import React, { useEffect, useState, useRef, useMemo } from 'react';
import { Modal, Input, Select, List } from 'antd';
import Flow from '@/components/Flow/index';
import { connect } from 'dva';
import { GetTokenFromUrl, getToken } from '@/utils/utils';
import { MODELS, useXFlowApp, useModelAsync } from '@antv/xflow';

const { TextArea } = Input;
const localData = JSON.parse(localStorage.ggDetaiData || '{}');

// 提交
function FlowModal(props) {
  const { visible, onClose, onChangeVersion, form, loading, flowDetail, versionList } = props;
  const [data, setData] = useState([]);

  const graphData = useMemo(() => {
    let nodes = flowDetail.nodes.map(item => ({
      ...item,
      version: versionList.filter(version => version.template_node_id == item.Id) || [],
    }));
    return {
      nodes,
      edges: flowDetail.edges,
    };
  }, [flowDetail, versionList]);

  const handleSelectNode = node => {
    console.log(node);
    setData(node.version);
  };

  return (
    <Modal
      confirmLoading={loading}
      destroyOnClose
      title="流程图"
      visible={visible}
      onCancel={onClose}
      footer={false}
      width="80%"
    >
      <Flow meta={{ type: 'view' }} flowDetail={graphData} onSelectNode={handleSelectNode} />
      <List
        size="small"
        header={<div>版本列表</div>}
        bordered
        dataSource={data}
        style={{ marginTop: 20 }}
        renderItem={item => (
          <List.Item
            actions={[
              <a
                onClick={() => {
                  onChangeVersion(item);
                  onClose();
                }}
              >
                切换
              </a>,
            ]}
          >
            {item.version_name}
          </List.Item>
        )}
      />
    </Modal>
  );
}

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