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

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

  const domain = 'org';
  const domainCN = '部门';

  const modalProps = {
    domain,
    mode,
    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,
    dispatch,
    loading,
    total,
    dataSource: list,
    showAdd: false,
    showEdit: false,
    showDelete: false,
    sortBy: 'orgCode',
    filter: [{
      title: '企业',
      dataIndex: 'ouCodeName',
      tag: <Input placeholder="请输入名称/编号"/>,
    }, {
      title: '部门',
      dataIndex: 'orgCodeName',
      tag: <Input placeholder="请输入名称/编号"/>,
    }],
    columns: [{
      title: '编号',
      dataIndex: 'orgCode',
      width: '10%',
    }, {
      title: '名称',
      dataIndex: 'orgName',
      width: '30%',
    }, {
      title: '公司',
      dataIndex: 'ouName',
      width: '30%',
    }, {
      title: '类型',
      dataIndex: 'orgTypeName',
      width: '10%',
    }, {
      title: '状态',
      dataIndex: 'orgStatusName',
      width: '10%',
    }, {
      title: '层级',
      dataIndex: 'orgLevel',
      width: '10%',
    }],
  };

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

export default connect(({ org, loading }) => ({ org, loading }))(Organization);
