import React from 'react';
import { connect } from 'dva';
import { Input, Modal, Switch } from 'antd';

import { DataTable, SuggestSelect } from '../../../components';
import { dataUtils } from '@utils';

const BpmRole = ({ dispatch, bpmFaults, loading }) => {
  const { list, total, remark, modalVisible } = bpmFaults;
  const domain = 'bpmFaults';

  const modalProps = {
    title: '确定要修复这条记录吗?',
    okText: '确认',
    okType: 'danger',
    cancelText: '取消',
    onOk() {
      dispatch({
        type: `${domain}/close`,
        payload: '',
      });
    },
    onCancel() {
      dispatch({
        type: `${domain}/hideModal`,
      });
      dispatch({
        type: `${domain}/updateState`,
        payload: { remark: '' },
      });
    },
  };

  const tableProps = {
    rowKey: 'taskId',
    showAdd: false,
    showEdit: false,
    showView: false,
    showDelete: false,
    scroll: { x: '130%', y: 350 },
    domain,
    dispatch,
    loading,
    total,
    dataSource: list,
    buttons: [{
      key: 'fix',
      type: 'primary',
      name: '修复',
      requiredSelected: 1,
      cb: (selectedKeys) => {
        dispatch({
          type: `${domain}/showModal`,
          payload: selectedKeys[0]
        });
      },
    }],
    filter: [{
      title: '流程定义',
      dataIndex: 'defKey',
      tag: <SuggestSelect optionKey="code" apiName="defKeys"/>,
    }, {
      title: '已修复',
      dataIndex: 'closed',
      tag: <Switch/>,
    }],
    columns: [{
      title: '故障类型名',
      dataIndex: 'typeName',
      width: '10%',
    }, {
      title: '流程定义ID',
      dataIndex: 'defId',
      width: '10%',
    }, {
      title: '流程定义名',
      dataIndex: 'defName',
      width: '10%',
    }, {
      title: '流程实例ID',
      dataIndex: 'procId',
      width: '5%',
    }, {
      title: '任务定义Key',
      dataIndex: 'taskKey',
      width: '10%',
    }, {
      title: '任务定义名',
      dataIndex: 'taskName',
      width: '10%',
    }, {
      title: '任务ID',
      dataIndex: 'taskId',
      width: '10%',
    }, {
      title: '故障发生时间点',
      dataIndex: 'issueTime',
      width: '10%',
      render: value => dataUtils.dtm(value)
    }, {
      title: '故障修复时间点',
      dataIndex: 'closeTime',
      width: '10%',
      render: value => dataUtils.dtm(value)
    }, {
      title: '故障修复备注',
      dataIndex: 'closeMemo',
      width: '10%',
    }],
  };

  return (
    <div className="content-inner">
      <Modal {...modalProps} visible={modalVisible}>
        <Input.TextArea placeholder="备注" value={remark} onChange={e => dispatch({
          type: `${domain}/updateState`,
          payload: { remark: e.target.value },
        })}/>
      </Modal>
      <DataTable {...tableProps} />
    </div>
  );
};
export default connect(({ bpmFaults, loading }) => ({ bpmFaults, loading }))(BpmRole);
