<!--
 * @Author: zwq
 * @Date: 2022-09-15 10:44:29
 * @LastEditors: zwq
 * @LastEditTime: 2023-01-09 14:10:26
 * @Description: 
-->
<template>
  <div>
    <el-row
      :gutter="6"
      style="background-color:#e6f7ff;margin:-20px;padding-top:10px;margin-bottom:0"
    >
      <el-form ref="dataForm" :model="dataForm" :rules="rules" size="small" label-width="80px">
        <el-col :span="6">
          <el-form-item label="检验时间" prop="time">
            <el-date-picker
              type="daterange"
              v-model="dataForm.time"
              format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              range-separator="-"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="false">
          <el-form-item label="工厂" prop="field102">
            <el-select
              v-model="dataForm.field102"
              placeholder="请选择工厂"
              filterable
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in field102Options"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品" prop="productId">
            <el-select
              v-model="dataForm.productId"
              placeholder="请选择产品"
              @change="getWorkingprocedureByProductId"
              filterable
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in optionArr.arr0"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检验类型" prop="inspectionStage">
            <el-select
              v-model="dataForm.inspectionStage"
              @change="getFeaturesList()"
              placeholder="请选择检验类型"
              filterable
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in inspectionStageArr"
                :key="item.name"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工序" prop="workingProcedureId">
            <el-select
              v-model="dataForm.workingProcedureId"
              @change="$forceUpdate(), getFeaturesList()"
              placeholder="请选择工序"
              filterable
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="item in optionArr.arr4"
                :key="item.workingProcedureId"
                :label="item.workingProcedureName"
                :value="item.workingProcedureId"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="特性" prop="productFeaturesId">
            <el-select
              v-model="dataForm.productFeaturesId"
              placeholder="请选择特性"
              filterable
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in optionArr.arr2"
                :key="index"
                :label="item.name"
                :value="item.id"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="!groupTypeShow">
          <el-form-item label="样本大小" prop="sampleSize">
            <el-input-number
              v-model="dataForm.sampleSize"
              placeholder="样本大小"
              :step="1"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="groupTypeShow">
          <el-form-item label="分组" prop="groupType">
            <el-radio-group v-model="dataForm.groupType">
              <el-radio :label="1">年</el-radio>
              <el-radio :label="2">月</el-radio>
              <el-radio :label="3">日</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="groupTypeShow ? 6 : 12">
          <el-form-item>
            <el-button size="small" @click="getDataList()">
              <svg class="icon-svg"><use xlink:href="#icon-sousuo"></use></svg>
              查询
            </el-button>
            <el-button v-if="showRaw" size="small" type="primary" @click="rawData()">
              <svg class="icon-svg"><use xlink:href="#历史记录"></use></svg>
              原始数据
            </el-button>
            <el-button size="small" type="primary" @click="exportHandle()">
              <svg class="icon-svg">
                <use xlink:href="#导出"></use>
              </svg>
              导出
            </el-button>
            <el-button v-if="!groupTypeShow" size="small" type="primary" @click="showScheme()">
              <svg class="icon-svg"><use xlink:href="#方案管理"></use></svg>
              配置分析方案
            </el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <!-- 弹窗, 新增 / 修改 -->
    <interpretationScheme
      v-if="SchemeVisible"
      ref="Scheme"
      @setScheme="setScheme"
    ></interpretationScheme>
  </div>
</template>
<script>
import interpretationScheme from "./components/interpretationScheme";
export default {
  props: {
    pageName: {
      type: String,
      default: () => {
        return "";
      },
    },
    dataForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
    groupTypeShow: {
      type: Boolean,
      default: false,
    },
    fType: {
      type: Number,
      default: 1,
    },
    showRaw: {
      type: Boolean,
      default: false,
    }
  },
  components: {
    interpretationScheme,
  },
  data() {
    return {
      SchemeVisible: false,
      inspectionStageArr: [],
      optionArrUrl: ["/basic/product/page"],
      optionArr: {},
      rules: {
        productId: [
          {
            required: true,
            message: "请选择产品",
            trigger: "change",
          },
        ],
        productFeaturesId: [
          {
            required: true,
            message: "请选择特性",
            trigger: "change",
          },
        ],
        workingProcedureId: [
          {
            required: true,
            message: "请选择工序",
            trigger: "change",
          },
        ],
        time: [
          {
            required: true,
            message: "请选择检验时间",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {},
  methods: {
    getWorkingprocedureByProductId(val) {
      this.$set(this.dataForm, "inspectionStage", "");
      this.$set(this.dataForm, "workingProcedureId", "");
      this.getWorkingprocedureArr(val);
      this.getFeaturesList();
    },
    getWorkingprocedureArr(val) {
      if (val) {
        const obj = this.optionArr.arr0.find((item) => {
          return item.id === val;
        });
        const obj1 = { 1: "进货检验", 2: "过程检验", 3: "成品检验", 4: "出货检验" };
        const inspectionStage = obj.inspectionStage.split(",");
        this.inspectionStageArr = [];
        inspectionStage.forEach((item) => {
          this.inspectionStageArr.push({
            value: item,
            name: obj1[item],
          });
        });

        this.$http
          .get(`/basic/productWorkingprocedureRelation/getWorkingprocedureByProductId/${val}`)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            }
            this.$set(this.optionArr, "arr4", res.data);
          })
          .catch(() => {});
      } else {
        this.inspectionStageArr = [];
        this.$set(this.optionArr, "arr2", []);
        this.$set(this.optionArr, "arr4", []);
      }
    },
    getArr() {
      this.optionArrUrl.forEach((item, index) => {
        this.$http
          .get(item, {
            params: {
              page: 1,
              limit: 500,
            },
          })
          .then(({ data: res }) => {
            if (res.code !== 0) {
              this.$set(this.optionArr, `arr${index}`, []);
              return this.$message.error(res.msg);
            }
            this.$set(this.optionArr, `arr${index}`, res.data.list);
          })
          .catch(() => {});
      });
    },
    getFeaturesList() {
      this.$set(this.dataForm, "productFeaturesId", "");
      this.$http
        .post(
          `/processInspection/inspectionSheet/getInspectionSheetFeaturesList?productId=${
            this.dataForm.productId
          }${
            this.dataForm.inspectionStage ? "&inspectionStage=" + this.dataForm.inspectionStage : ""
          }${
            this.dataForm.workingProcedureId
              ? "&workingProcedureId=" + this.dataForm.workingProcedureId
              : ""
          }`
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.$set(this.optionArr, "arr2", []);
            return this.$message.error(res.msg);
          }
          const arr = res.data.filter((item) => item.type === this.fType);
          this.$set(this.optionArr, "arr2", arr);
        })
        .catch(() => {});
    },
    getDataList() {
      this.dataForm.procedureName = this.optionArr.arr4.find((item) => {
        return item.workingProcedureId === this.dataForm.workingProcedureId;
      })?.workingProcedureName;
      this.dataForm.begin =
        this.dataForm.time && this.dataForm.time.length > 0 ? this.dataForm.time[0] : "";
      this.dataForm.end =
        this.dataForm.time && this.dataForm.time.length > 0 ? this.dataForm.time[1] : "";
      this.$emit("getDataList");
    },
    showScheme() {
      this.SchemeVisible = true;
      this.$nextTick(() => {
        this.$refs.Scheme.init();
      });
    },
    setScheme(interpretationScheme) {
      this.dataForm.interpretationScheme = interpretationScheme;
    },
    rawData() {
      this.$emit("rawData");
    },
    exportHandle() {
      this.$emit("exportHandle", this.pageName);
    },
  },
};
</script>

<style></style>
