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

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

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

    const handleSettledChange = (val, row) => {
      dispatch({
        type: `${domain}/updateTaskRoles`,
        payload: {
          srcRow: row,
          distRow: { ...row, settled: val ? 'Y' : 'N' }
        }
      });
    };

    const roleTableProps = {
      rowKey: 'id',
      scroll: { x: '100%', y: 450 },
      enableSelection: false,
      bordered: true,
      pagination: false,
      dataSource: taskRoles,
      size: 'small',
      columns: [{
        title: '任务节点',
        dataIndex: 'name',
        width: '40%',
      }, {
        title: '流程角色(必填)',
        dataIndex: 'bpmRoles',
        width: '60%',
        render: (value, row, index) => { // Y可以修改
          return row.key !== 'initiator'
            ? <SuggestSelect
              apiName="bpmRoles"
              mode="multiple"
              value={value}
              disabled={row.settled !== 'Y'}
              onChange={(val) => handleRoleChange(val, row)}/>
            : '';
        },
      }]
      // }, {
      //   title: '启动加载处理人',
      //   dataIndex: 'settled',
      //   width: '20%',
      //   render: (value, row, index) => {
      //     return row.key !== 'initiator'
      //       ? <Switch size="small" checked={value === 'Y'}
      //           onChange={(val) => handleSettledChange(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}/saveTaskRoles`]}
          onClick={handleOk}
        >保存
        </Button>,
      ],
    };

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


export default modal;
