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

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

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

  const domain = 'ou';
  const domainCN = '企业';

  const modalProps = {
    dispatch,
    loading,
    mode,
    domain,
    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: 'ouCode',
    filter: [{
      title: '企业',
      dataIndex: 'ouCodeName',
      tag: <Input placeholder="请输入名称/编号"/>,
    }],
    columns: [{
      title: '编号',
      dataIndex: 'ouCode',
      width: '20%',
    }, {
      title: '名称',
      dataIndex: 'ouName',
      width: '35%',
    }, {
      title: '类型',
      dataIndex: 'ouTypeName',
      width: '15%',
    }, {
      title: '状态',
      dataIndex: 'ouStatusName',
      width: '15%',
    }, {
      title: '本位币',
      dataIndex: 'ouCurr',
      width: '10%',
    }],
  };

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

export default connect(({ ou, loading }) => ({ ou, loading }))(OperationUnit);
