/* eslint-disable arrow-body-style */
/* eslint-disable no-useless-escape */
/* eslint-disable no-lonely-if */
/* eslint-disable no-unused-expressions */
/* eslint-disable prefer-template */
/* eslint-disable react/jsx-boolean-value */
import React, { useState, useEffect } from 'react';
import { Modal, Collapse, notification, Upload, Input, Empty, Tooltip, Table } from 'antd';
const { Panel } = Collapse;

const EditTypeModal = props => {

  const { callBackSubmit = () => { }, visible, onCancel, tableData } = props;
  const [imgData, setImgData] = useState([]);
  const [pickItem, setPickItem] = useState('');
  const [chooseItem, setChooseItem] = useState('');
  const [keepItem, setKeepItem] = useState('');
  const [keepGroupName, setKeepGroupName] = useState([]);
  const [search, setSearch] = useState('');
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const { Search } = Input;

  useEffect(() => {
    if (visible) {
    } else {
      setSelectedRowKeys([]);
    }
  }, [visible]);

  // 提交
  const onSubmit = () => {
    if (selectedRowKeys.length) {
      callBackSubmit(selectedRowKeys.toString());
    }
  };

  const columns = [
    {
      title: () => <span style={{ fontWeight: 'bold' }}>流程名称</span>,
      dataIndex: 'FlowName',
      key: 'FlowName',
      width: 150,
      ellipsis: true,
      align: 'center',
    },
  ];

  // 单选框
  const rowSelection = {
    type: 'radio',
    selectedRowKeys,
    onChange: (RowKeys, Rows) => {
      setSelectedRowKeys(RowKeys);
    },
  };

  return (
    <Modal
      title="请选择流程"
      style={{ top: '100px' }}
      width="1000px"
      destroyOnClose
      maskClosable={false}
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      forceRender={true}
      getContainer={false}
    >
      {tableData.length > 0 ? (
        <Table
          size="middle"
          rowKey="ID"
          bordered
          style={{ height: '15rem', overflowY: 'scroll', marginLeft: '25px' }}
          columns={columns}
          dataSource={tableData}
          pagination={false}
          rowSelection={rowSelection}
        />
      ) : (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description="暂无数据"
          style={{ height: '600px', margin: '20px auto 0px auto', paddingTop: '50px' }}
        />
      )}
    </Modal>
  );
};
export default EditTypeModal;
