<!--
 * @Author: zwq
 * @Date: 2022-08-22 15:53:16
 * @LastEditors: zwq
 * @LastEditTime: 2022-09-01 16:42:08
 * @Description: 
-->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-row :gutter="10">
      <el-col :span="10">
        <el-form
          style="background-color:#e6f7ff;padding:10px 20px"
          :inline="true"
          :model="dataForm"
          @keyup.enter.native="getDataList()"
        >
          <el-form-item>
            <el-input v-model="dataForm.paramKey" clearable placeholder="请输入关键字查询" />
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList()">
              <svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
              查询
            </el-button>
          </el-form-item>
        </el-form>
        <el-table
          :data="dataList"
          height="650"
          highlight-current-row
          @current-change="handleCurrentChange"
          :header-cell-style="{
            background: '#eef1f6',
            color: '#606266',
            height: '56px',
          }"
          border
          v-loading="dataListLoading"
          style="width: 100%;"
        >
          <el-table-column
            fixed="left"
            type="index"
            header-align="center"
            align="center"
            label="序号"
            width="50"
          >
          </el-table-column>
          <el-table-column prop="name" label="名称" fixed="left"> </el-table-column>
          <el-table-column prop="code" label="编码" fixed="left"> </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="13" :offset="1">
        <el-tabs @tab-click="tabClick">
          <el-tab-pane label="图形模式">
            <process-flow-graph
              v-show="graphVisible"
              ref="graphRef"
              :product-id="productId"
              @refreshDataList="getDataList"
            ></process-flow-graph>
          </el-tab-pane>
          <el-tab-pane label="表格模式">
            <two-step v-show="twoStepVisible" ref="twoStepRef" :product-id="productId"></two-step>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import processFlowGraph from "./components/processFlow-graph";
import twoStep from "./components/productList-two";

export default {
  data() {
    return {
      dataListLoading: false,
      dataList: [],
      flowDataList: [],
      graphVisible: true,
      twoStepVisible: false,
      dataForm: {
        paramKey: "",
      },
      productId: "",
      paneName: "图形模式",
    };
  },
  components: {
    processFlowGraph,
    twoStep,
  },
  created() {
    this.getDataList();
    this.productId = ''
  },
  methods: {
    getDataList() {
      this.dataListLoading = true;
      this.$http
        .get("/basic/product/page", {
          params: {
            page: 1,
            limit: 500,
            code: this.dataForm.paramKey,
            name: this.dataForm.paramKey,
          },
        })
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.dataList = [];
            return this.$message.error(res.msg);
          }
          this.dataList = res.data.list;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
    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.$nextTick(() => {
          this.$refs.twoStepRef.init();
        });
      }
    },
    handleCurrentChange(val) {
      if (val) {
        this.productId = val.id;
        const obj = {
          label: this.paneName,
        };
        this.tabClick(obj);
      }
    },
  },
};
</script>
