content: import React from 'react'
  import PropTypes from 'prop-types'
  import { routerRedux } from 'dva/router'
  import { connect } from 'dva'
  import List from './List'
  import Filter from './Filter'
  import Modal from './Modal'
  
  const User = ({ location, dispatch, user, loading }) => {
    const { list, pagination, currentItem, modalVisible, modalType, isMotion } = user
    const { pageSize } = pagination
  
    const modalProps = {
      item: modalType === 'create' ? {} : currentItem,
      visible: modalVisible,
      maskClosable: false,
      confirmLoading: loading.effects['user/update'],
      title: `${modalType === 'create' ? 'Create User' : 'Update User'}`,
      wrapClassName: 'vertical-center-modal',
      onOk (data) {
        dispatch({
          type: `user/${modalType}`,
          payload: data,
        })
      },
      onCancel () {
        dispatch({
          type: 'user/hideModal',
        })
      },
    }
  
    const listProps = {
      dataSource: list,
      loading: loading.effects['user/query'],
      pagination,
      location,
      isMotion,
      onChange (page) {
        const { query, pathname } = location
        dispatch(routerRedux.push({
          pathname,
          query: {
            ...query,
            page: page.current,
            pageSize: page.pageSize,
          },
        }))
      },
      onDeleteItem (id) {
        dispatch({
          type: 'user/delete',
          payload: id,
        })
      },
      onEditItem (item) {
        dispatch({
          type: 'user/showModal',
          payload: {
            modalType: 'update',
            currentItem: item,
          },
        })
      },
    }
  
    const filterProps = {
      isMotion,
      filter: {
        ...location.query,
      },
      onFilterChange (value) {
        dispatch(routerRedux.push({
          pathname: location.pathname,
          query: {
            ...value,
            page: 1,
            pageSize,
          },
        }))
      },
      onSearch (fieldsValue) {
        fieldsValue.keyword.length ? dispatch(routerRedux.push({
          pathname: '/user',
          query: {
            field: fieldsValue.field,
            keyword: fieldsValue.keyword,
          },
        })) : dispatch(routerRedux.push({
          pathname: '/user',
        }))
      },
      onAdd () {
        dispatch({
          type: 'user/showModal',
          payload: {
            modalType: 'create',
          },
        })
      },
      switchIsMotion () {
        dispatch({ type: 'user/switchIsMotion' })
      },
    }
  
    return (
      <div className="content-inner">
        <Filter {...filterProps} />
        <List {...listProps} />
        {modalVisible && <Modal {...modalProps} />}
      </div>
    )
  }
  
  User.propTypes = {
    user: PropTypes.object,
    location: PropTypes.object,
    dispatch: PropTypes.func,
    loading: PropTypes.object,
  }
  
  export default connect(({ user, loading }) => ({ user, loading }))(User)
  