import React, { useEffect, useState, useRef, useMemo } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Radio, Row, Col, message, Tabs } from 'antd';
import { connect } from 'dva';

const { TabPane } = Tabs;

// 选择比对清单
function MergeModal(props) {
  const { visible, versionList, onClose, onOk, dispatch, version, flowDetail } = props;

  const [checkValue, setCheckValue] = useState([]);

  const onChange = e => {
    setCheckValue(e.target.value);
  };

  const handleOk = () => {
    if (!checkValue) {
      message.error('请选择要合并的清单');
    } else {
      let checkSheet = versionList.find(item => item.id == checkValue);
      onOk(checkSheet);
      onClose();
      setCheckValue();
    }
  };
  const items = useMemo(() => {
    let list = {};
    versionList.forEach(version => {
      let nodeId = version.template_node_id;
      if (!nodeId || nodeId === '0' || !version.version_no) return;
      if (!list[nodeId]) {
        list[nodeId] = [];
      }
      list[nodeId].push(version);
    });
    let nodeIds = Object.keys(list)
    return nodeIds.filter(nodeId => {
      let name = flowDetail.nodes.find(node => node.Id == nodeId)?.label
      return name
    }).map(nodeId => ({
      label: flowDetail.nodes.find(node => node.Id == nodeId)?.label,
      key: nodeId + "",
      // list: list[nodeId],
      children: list[nodeId].map(version => (
        <div style={{ marginBottom: 16 }} key={version.id}>
          <Radio value={version.id}>{version.version_name}_{version.version_no}</Radio>
        </div>
      ))
    }))
  }, [versionList, flowDetail]);

  return (
    <Modal
      title="选择同步文件"
      visible={visible}
      onCancel={onClose}
      onOk={handleOk}
      width={600}
      bodyStyle={{ paddingTop: 0 }}
    >
      <Radio.Group value={checkValue} style={{ width: '100%' }} onChange={onChange}>
        {/* <Row gutter={16}>
          {versionList.map(v => {
            if (v.id == version.id) return null;
            return (
              <Col span={8} key={v.id}>
                <Radio value={v.id}>{v.version_name}</Radio>
              </Col>
            );
          })}
        </Row> */}
        <Tabs defaultActiveKey={items[0]?.key} items={items} />
      </Radio.Group>
    </Modal>
  );
}

export default connect(({ detail, xflow }) => ({
  versionList: detail.versionList,
  flowDetail: xflow.flowDetail,
}))(MergeModal);