import Flow, { FLOW_TYPE } from '@/components/Flow';
import { connect } from 'dva';
import React, { useEffect } from 'react';
import { UnityAction } from '@/utils/utils';
import { Button } from 'antd';
import router from 'umi/router';

@connect(({ xflow }) => ({ flowDetail: xflow.flowDetail }))
class FlowPage extends React.PureComponent {
  onUpdate(node) {
    const { dispatch, flowDetail } = this.props;
    let params = {
      ...node,
      id: node.Id,
      node_type: node.name == 'custom-circle' ? 1 : 0,

      data: JSON.stringify(node.data),
      project_id: flowDetail.ProjectId,
      template_id: flowDetail.Id,
      template_name: flowDetail.Name,
    };
    delete params.node_id;
    dispatch({
      type: 'flow/updateNode',
      payload: {
        templateId: flowDetail.Id,
        nodeId: node.Id,
        body: params,
      },
    });
  }

  componentDidMount() {
    const {
      dispatch,
      match: {
        params: { flowId },
      },
    } = this.props;
    dispatch({
      type: 'xflow/queryOSSData',
    });
    dispatch({
      type: 'xflow/queryBoomFlowDetail',
      payload: {
        id: flowId,
      },
    });
    dispatch({
      type: 'xflow/queryAuditList',
    });

    UnityAction.on('NODE_SAVE', nodeConfig => {
      this.onUpdate(nodeConfig);
    });
  }
  componentWillUnmount() {
    UnityAction.off('NODE_SAVE');
  }
  render() {
    const { flowDetail } = this.props;
    return (
      <div>
        {/* <Form></Form> */}
        <Button style={{ marginBottom: 20 }} onClick={() => router.go(-1)}>
          返回
        </Button>
        <Flow
          meta={{ type: 'edit', flowId: 1 }}
          flowDetail={flowDetail}
          // onUpdate={node => this.onUpdate(node)}
        />
      </div>
    );
  }
}

export default FlowPage;