<!--
 * @Author: zwq
 * @Date: 2022-08-22 15:53:16
 * @LastEditors: zwq
 * @LastEditTime: 2022-09-08 14:28:56
 * @Description: 
-->
<template>
  <el-tabs @tab-click="tabClick">
    <el-tab-pane label="表格模式">
      <two-step-table
        v-show="twoStepVisible"
        ref="twoStepRef"
        :product-id="productId"
      ></two-step-table>
    </el-tab-pane>
    <el-tab-pane label="图形模式">
      <process-flow-graph
        v-show="graphVisible"
        ref="graphRef"
        :product-id="productId"
      ></process-flow-graph>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import processFlowGraph from "./processFlow-graph";
import twoStepTable from "./productList-two-table";

export default {
  props: {
    productId: {
      type: String,
    },
  },
  data() {
    return {
      flowDataList: [],
      graphVisible: true,
      twoStepVisible: false,
      dataForm: {
        paramKey: "",
      },
      paneName: "图形模式",
    };
  },
  components: {
    processFlowGraph,
    twoStepTable,
  },
  created() {},
  methods: {
    init() {
      this.graphVisible = false;
      this.twoStepVisible = true;
      this.$nextTick(() => {
        this.$refs.twoStepRef.init();
      });
    },
    tabClick(val) {
      this.paneName = val.label;
      if (val.label === "图形模式") {
        this.twoStepVisible = false;
        this.graphVisible = true;
        this.$nextTick(() => {
          this.$refs.graphRef.init();
        });
      } else {
        this.graphVisible = false;
        this.twoStepVisible = true;
        this.$refs.graphRef.GraphDelete();
        this.$nextTick(() => {
          this.$refs.twoStepRef.init();
        });
      }
    },
    // 表单提交
    dataFormSubmit() {
      this.$emit("nextStep");
    },
  },
};
</script>
