import React from 'react';
import { Table, Button, Modal } from 'antd';
import { SuggestSelect } from '@components';

const modal =
  ({
     mode,
     domain,
     readOnly,
     record,
     taskNotifies,
     onOk,
     onCancel,
     dispatch,
     loading,
     ...modalProps
   }) => {

    const handleRoleChange = (val, row) => {
      dispatch({
        type: `${domain}/updateTaskNotifies`,
        payload: {
          srcRow: row,
          distRow: { ...row, bpmRoles: val }
        }
      });
    }

    const notifiedTableProps = {
      rowKey: 'key',
      scroll: { x: '100%', y: 450 },
      enableSelection: false,
      bordered: true,
      pagination: false,
      dataSource: taskNotifies,
      size: "small",
      columns: [{
        title: '任务节点',
        dataIndex: 'name',
        width: '30%',
        className: 'alignLeft',
      }, {
        title: '被知会流程角色',
        dataIndex: 'bpmRoles',
        width: '50%',
        render: (value, row, index) => {
          return row.key !== 'initiator'
            ? <SuggestSelect apiName="bpmRoles" mode="multiple" value={value}
                onChange={(val) => handleRoleChange(val, row)} />
            : '';
        }
      }],
    };

    const handleOk = () => {
      onOk();
    };

    const handleCancel = () => {
      onCancel();
    };

    const modalOpts = {
      ...modalProps,
      onCancel: handleCancel,
      footer: [
        <Button key="back" onClick={handleCancel}>取消</Button>,
        <Button
          key="submit"
          type="primary"
          loading={loading.effects[`${domain}/saveTaskNotifies`]}
          onClick={handleOk}
        >保存
        </Button>,
      ],
    };

    return (
      <Modal {...modalOpts}>
        <Table {...notifiedTableProps} />
      </Modal>
    );
  };

export default modal;
