import React, { useState, useEffect } from 'react';
import { Table, Divider } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import FlowModal from '../Detail/FlowModal';
import { queryBoomFlowDetail, queryRecordSheet } from '@/services/boom';
import { async } from '@antv/x6/es/registry/marker/async';
import { getToken } from '@/utils/utils';

function List(props) {
  const { excel, loading, project, dispatch } = props;
  const [flowVisible, setFlowVisible] = useState(false);
  const [version, setVersion] = useState({});
  const [versionVisible, setVersionVisible] = useState(false);
  const [flowDetail, setFlowDetail] = useState();
  let token = getToken();

  const columns = [
    {
      title: '流程名称',
      width: '35%',
      render: item => item.version_name || item.name,
    },
    {
      title: '所属项目',
      width: '35%',
      render: item => {
        if (!item.is_parent) return '';
        return project.list.find(p => p.ID == item.project_id)?.Name;
      },
    },
    {
      title: '操作',
      render: record => {
        if (record.is_parent) return null;
        return (
          <a
            onClick={async () => {
              localStorage.excelId = record.id;

              const data = await queryBoomFlowDetail({ id: record.template_id });
              setFlowDetail(data);
              setVersion(record);
              setFlowVisible(true);
              // router.push(`/home/detail/${record.project_id}/${record.template_id}`);
            }}
          >
            查看
          </a>
        );
      },
    },
  ];
  const queryList = page => {
    console.log(page);
    dispatch({
      type: 'newList/queryProjectRecord',
      payload: {
        ...page,
        currentPage: page.current,
      },
    });
  };

  useEffect(() => {
    dispatch({
      type: 'newList/queryProjectRecord',
      payload: {
        pageSize: 20,
      },
    });
    dispatch({
      type: 'newList/queryProject',
    });
  }, []);

  const changeVersion = item => {
    if (typeof item == 'object') {
      localStorage.excelId = item.id;
    }
    router.push(`/home/detail/${item.project_id}/${item.template_id}`);
  };

  const getLoading = () => {
    let effects = loadingVersion.effects;
    return !loadingVersion.effects['detail/queryComment'] && loadingVersion.models.detail;
  };

  const onCommit = async (values, id) => {
    let currentNode = flowDetail.nodes.find?.(item => item.Id == version.template_node_id);
    let sheets = await queryRecordSheet({ gridKey: version.id, 'JWT-TOKEN': token });
    if (!currentNode.muti_version) {
      // audit_status=4 表示为清单推进后留存的副本.不计入多清单计算
      let serviceVersion = versionList.find(
        item => item.audit_status != 4 && item.template_node_id == currentNode.Id
      );
      if (serviceVersion) {
        message.error(`新建清单失败！业务节点【${currentNode.label}】只能有一个清单！`);
        return;
      }
    }
    let params = {
      ...values,
      id: id,
      project_id: version.project_id,
      name: version.name,
      guid: version.guid,
      template_id: version.template_id,
      template_node_id: version.template_node_id,
      flow_id: version.flow_id,
      node_id: version.node_id,
      new_version: '0',
      audit_status: 0,
      data: sheets,
      base_id: version.id,
    };
    dispatch({
      type: 'newList/commitSheet',
      payload: params,
      callback: async newVersion => {
        // 更新flow流程图
        const data = await queryBoomFlowDetail({ id: newVersion.template_id });
        console.log(data);
        setFlowDetail(data);
      },
    });
  };

  return (
    <div>
      <Table
        loading={loading}
        rowKey="id"
        dataSource={excel.list}
        pagination={excel.pagination}
        columns={columns}
        onChange={queryList}
      />
      <FlowModal
        isOut={true}
        flowDetail={flowDetail}
        visible={flowVisible}
        onClose={() => setFlowVisible(false)}
        version={version}
        onCommit={onCommit}
        onChangeVersion={version => changeVersion(version)}
      />
      {/* <VersionModal
        loading={getLoading()}
        visible={versionVisible}
        onClose={() => setVersionVisible(false)}
        onOk={values => onCommit(values)}
      /> */}
    </div>
  );
}

export default connect(({ newList, loading }) => ({
  excel: newList.excel,
  project: newList.project,
  loading: loading.models.newList,
  loadingVersion: loading,
}))(List);