import React, { useState, useEffect, useRef, useMemo } from 'react';
import { Form, Select, Button, Table, Input, Checkbox, Divider, Tabs } from 'antd';
import { connect } from 'dva';
import AuditNodeModal from './AuditNodeModal';
import AuditModal from './AuditModal';
import styles from './Audit.less';
import router from 'umi/router';
import Flow, { FLOW_TYPE } from '@/components/Flow';
import AuditForm from '@/components/AuditForm';
import { async } from '@antv/x6/lib/registry/marker/async';
const { Option } = Select;
const { TabPane } = Tabs;

const FLOWID = 2;

function Audit(props) {
  const {
    roleList,
    currentItem,
    dispatch,
    formItems,
    formData,
    flowDetail,
    simpleFlowDteail,
  } = props;
  const ref = useRef();

  const curItem = useMemo(() => {
    let item = localStorage.getItem('currentAudit');
    return JSON.stringify(currentItem) == '{}' ? JSON.parse(item) : currentItem;
  }, [currentItem, localStorage.getItem('currentAudit')]);

  useEffect(() => {
    dispatch({
      type: 'flow/queryProcessFlows',
      payload: { ids: Number(curItem.id) },
    });
    dispatch({
      type: 'user/getRoleList',
    });
    dispatch({
      type: 'user/fetch',
    });

    dispatch({
      type: 'user/fetchDepV2',
    });
  }, []);
  const onChange = values => {
    dispatch({
      type: 'xflow/save',
      payload: {
        formData: values,
      },
    });
  };

  const handleSaveClick = async () => {
    //只修改表单不渲染xflow getGraphData方法找不到，保存接口返回的flowDetail数据
    if (!ref.current?.getGraphData) {
      let param = {
        // name: curItem.name,
        id: Number(curItem.id),
        form_json: JSON.stringify(formItems),
        process_json: JSON.stringify(flowDetail),
        process_simple_json: simpleFlowDteail,
      };
      dispatch({ type: 'flow/saveAuditFlowInfo', payload: param });
      return;
    }
    await ref.current?.getGraphData?.((data, simpleNodes) => {
      let param = {
        // name: curItem.name,
        id: Number(curItem.id),
        form_json: JSON.stringify(formItems),
        process_json: data,
        process_simple_json: simpleNodes,
      };
      dispatch({ type: 'flow/saveAuditFlowInfo', payload: param });
    });
  };
  return (
    <div style={{ position: 'relative' }}>
      <p>{curItem.name}</p>
      <Tabs defaultActiveKey="1">
        <TabPane tab="表单设计" key="1">
          <AuditForm value={formData} onChange={values => onChange(values)} />
        </TabPane>
        <TabPane tab="流程控制" key="2">
          <Flow meta={{ type: 'edit', flowId: curItem.id }} flowDetail={flowDetail} ref={ref} />
        </TabPane>
      </Tabs>
      <Button
        type="primary"
        onClick={handleSaveClick}
        style={{ position: 'absolute', right: 0, top: 0 }}
      >
        保存
      </Button>
    </div>
  );
}
export default connect(({ flow, loading, xflow }) => ({
  roleList: flow.roleList,
  currentItem: flow.current,
  loading: loading.models.purchaseList2,
  formItems: xflow.formData,
  flowDetail: flow.flowDetail,
  formData: flow.formData,
  simpleFlowDteail: flow.simpleFlowDteail,
}))(Audit);