<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2022-12-13 16:00:28
 * @Description:
-->
<template>
  <div>
    <el-tabs tab-position="left" @tab-click="tabClick">
      <el-tab-pane
        v-for="(item, index) in inspectionStageArr"
        :key="index"
        :label="inspectionStageOptions[item]"
      >
        <four-content
          style="margin-left:10px"
          v-if="inspectionStageArr.length"
          ref="fourContentRef"
          :product-id="productId"
          :product-features-options="dataList"
          :working-procedure="workingProcedure"
        ></four-content>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import fourContent from "./productList-four-content";
export default {
  props: {
    productId: {
      type: String,
    },
    inspectionStageArr: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      dataList: [],
      workingProcedure: [],
      inspectionStageOptions: {
        "1": "进货检验",
        "2": "过程检验",
        "3": "成品检验",
        "4": "出货检验",
      },
    };
  },
  components: {
    fourContent,
  },
  methods: {
    init() {
      this.inspectionStageArr.sort();
      this.$nextTick(() => {
        if (this.productId) {
          this.getFourDataList();
        }
      });
    },
    getFourDataList() {
      this.$http
        .post("/basic/productFeatures/getProductFeaturesByProductId", {
          id: this.productId,
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.dataList = [];
            return this.$message.error(res.msg);
          }
          this.dataList = res.data;
        })
        .catch(() => {});
      this.$http
        .get(
          `/basic/productWorkingprocedureRelation/getWorkingprocedureByProductId/${this.productId}`
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.workingProcedure = [];
            return this.$message.error(res.msg);
          }
          this.workingProcedure = res.data;
          this.$refs.fourContentRef[0].init(this.inspectionStageArr?.[0]);
        })
        .catch(() => {});
    },
    tabClick(val) {
      this.$refs.fourContentRef[val.index].init(this.inspectionStageArr?.[val.index]);
    },
    // 表单提交
    dataFormSubmit() {
      this.$emit("nextStep");
    },
  },
};
</script>
