import React from 'react';
import { connect } from 'dva';
import Modal from './Modal';
import { Input } from 'antd';

import { DataTable, UdcSelect } from '../../../components';

const Employee = ({ dispatch, emp, loading }) => {
    const { list, total, currentItem, modalVisible, mode } = emp;

    const domain = 'emp';
    const domainCN = '员工';

    const modalProps = {
      mode,
      domain,
      dispatch,
      loading,
      record: currentItem,
      visible: modalVisible,
      maskClosable: false,
      width: '70%',
      readOnly: mode === 'view',
      title: mode === 'create' ? `新增${domainCN}` : (mode === 'update' ? `修改${domainCN}` : `查看${domainCN}`),
      wrapClassName: 'vertical-center-modal',
      onOk(data) {
        dispatch({
          type: `${domain}/${mode}`,
          payload: data,
        });
      },
      onCancel() {
        dispatch({
          type: `${domain}/hideModal`,
        });
      },
    };

    const tableProps = {
      scroll: { x: '100%', y: 400 },
      domain,
      loading,
      dispatch,
      total,
      dataSource: list,
      showAdd: false,
      // showEdit: false,
      showDelete: false,
      sortBy: 'empCode',
      filter: [{
        title: '企业',
        dataIndex: 'ouCodeName',
        tag: <Input placeholder="请输入名称/编号"/>,
      }, {
        title: '部门',
        dataIndex: 'orgCodeName',
        tag: <Input placeholder="请输入名称/编号"/>,
      }, {
        title: '员工',
        dataIndex: 'empCodeName',
        tag: <Input placeholder="请输入名称/编号"/>,
      }, {
        title: '状态',
        dataIndex: 'empStatus',
        tag: <UdcSelect domain="EDP" code="ON_OFF_FLAG"/>,
      }],
      columns: [{
        title: '编号',
        dataIndex: 'empCode',
        width: '12%',
      }, {
        title: '姓名',
        dataIndex: 'empName',
        width: '12%',
      }, {
        title: '公司',
        dataIndex: 'ouName',
        width: '27%',
      }, {
        title: '部门',
        dataIndex: 'orgName',
        width: '27%',
      }, {
        title: '状态',
        dataIndex: 'empStatusName',
        width: '10%',
      }, {
        title: '类型',
        dataIndex: 'empTypeName',
        width: '10%',
      }],
    };

    return (
      <div className="content-inner">
        <DataTable {...tableProps} />
        {modalVisible && <Modal {...modalProps} />}
      </div>
    );
  }
;

export default connect(({ emp, loading }) => ({ emp, loading }))(Employee);
;
