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

const Option = Select.Option;

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

  const domain = 'instances';
  const domainName = '流程实例';

  const modalProps = {
    dispatch,
    loading,
    mode,
    domain,
    record: currentItem,
    visible: modalVisible,
    maskClosable: false,
    width: '80%',
    confirmLoading: mode === 'create' ? loading.effects[`${domain}/create`] : loading.effects[`${domain}/update`],
    readOnly: mode === 'view',
    title: mode === `查看${domainName}`,
    wrapClassName: 'vertical-center-modal',
    onOk(data) {
      dispatch({
        type: `${domain}/${mode}`,
        payload: data,
      });
    },
    onCancel() {
      dispatch({
        type: `${domain}/hideModal`,
      });
    },
  };

  const tableProps = {
    scroll: { x: '100%', y: 350 },
    rowKey: 'prcId',
    sortBy: 'startTime',
    sortDirection: 'DESC',
    domain,
    showAdd: false,
    showEdit: false,
    showDelete: false,
    dispatch,
    loading,
    total,
    dataSource: list,
    filter: [{
      title: '流程定义',
      dataIndex: 'defIdName',
    }, {
      title: '流程状态',
      dataIndex: 'state',
      options: {
        initialValue: 'ACTIVE',
      },
      tag: <Select style={{ width: '100%' }}>
        <Option value="">全部</Option>
        <Option value="ACTIVE">运行中</Option>
        <Option value="COMPLETED">已结束</Option>
        <Option value="INTERNALLY_TERMINATED">被终止</Option>
      </Select>,
    }],
    columns: [{
      title: '流程编号',
      dataIndex: 'prcId',
      sorter: true,
      width: '15%',
    }, {
      title: '流程名称',
      dataIndex: 'defName',
      className: 'alignLeft',
      sorter: true,
      width: '20%',
    }, {
      title: '流程定义编号',
      dataIndex: 'defId',
      className: 'alignLeft',
      sorter: true,
      width: '25%',
    }, {
      title: '流程状态',
      dataIndex: 'stateName',
      sorter: true,
      width: '10%',
    }, {
      title: '开始时间',
      dataIndex: 'startTime',
      sorter: true,
      width: '15%',
      render: (value, row, index) => {
        return value && dataUtils.dtm(value);
      },
    }, {
      title: '结束时间',
      dataIndex: 'endTime',
      sorter: true,
      width: '15%',
      render: (value, row, index) => {
        return value && dataUtils.dtm(value);
      },
    }],
  };

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

export default connect(({ instances, loading }) => ({ instances, loading }))(Instance);
