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

@connect(({ xflow, user }) => ({
  flowDetail: xflow.flowDetail,
  currentUser: user.currentUser,
  permission: user.currentUser.Permission,
}))
class FlowPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { spinning: false };
  }

  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,
      },
      callback: () => {
        // this.setState({ spinning: false });
      },
    });
  }

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

    UnityAction.on('NODE_SAVE', nodeConfig => {
      this.onUpdate(nodeConfig);
      // this.setState({ spinning: true });
    });
  }
  componentWillUnmount() {
    UnityAction.off('NODE_SAVE');
  }
  getEditMode() {
    const { flowDetail, permission } = this.props;

    return 2;
  }
  render() {
    const { flowDetail, permission, currentUser } = this.props;
    let editMode = 2;

    if (
      // 判断是否有权限
      permission['func-01-point-bom-flow'] ||
      // 判断是否为管理员
      currentUser.IsSuper
    ) {
      editMode = 1;
    }

    return (
      <Spin spinning={this.state.spinning}>
        {/* <Form></Form> */}
        <Button style={{ marginBottom: 20 }} onClick={() => router.go(-1)}>
          返回
        </Button>
        {currentUser.ID && (
          <Flow
            meta={{ type: 'edit', editMode, flowId: 1 }}
            flowDetail={flowDetail}
            // onUpdate={node => this.onUpdate(node)}
          />
        )}
      </Spin>
    );
  }
}

export default FlowPage;