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 } = props;
  const ref = useRef();

  const curItem = useMemo(() => {
    return currentItem || localStorage.getItem('currentAudit');
  }, [currentItem, localStorage.getItem('currentAudit')]);

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

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

  const handleSaveClick = async () => {
    const data = 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,
}))(Audit);