<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2023-06-21 13:31:02
 * @Description:
-->
<template>
  <div>
    <div style="margin-left:20px">
      <el-button size="small" type="primary" @click="addSample()">
        <svg class="icon-svg"><use xlink:href="#icon-新建"></use></svg>
        添加样本组
      </el-button>
      <el-button size="small" type="primary" @click="Submit()">
        提交
      </el-button>
    </div>
    <el-table
      :data="dataList"
      border
      :stripe="true"
      :header-cell-style="{
        background: '#eef1f6',
        color: '#606266',
        height: '56px',
      }"
      :height="'80vh'"
      v-loading="dataListLoading"
      style="width: 100%;"
    >
      <el-table-column
        v-for="item in tableProps"
        :label="item.label"
        :key="item.prop"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.$index > 6">
            <el-checkbox
              v-if="item.fType === 2"
              v-model="scope.row[item.prop]"
              :class="
                scope.row[item.prop] === '0'? 'redbg'
                  : ''
              "
              true-label="1"
              false-label="0"
            />
            <el-input
              v-else
              v-model="scope.row[item.prop]"
              :class="
                (item.usl < scope.row[item.prop] ||
                scope.row[item.prop] < item.lsl) &&
                !(item.label === '取样时间' || item.label === '样本号' || item.label === '批次号')
                  ? 'redFont'
                  : ''
              "
              size="small"
              clearable
              :readonly="
                item.label === '取样时间' || item.label === '样本号' || item.label === '批次号'
              "
              :placeholder="item.label"
            />
          </span>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    featuresList: {
      type: Array,
      default: () => {
        [];
      },
    },
    workingProcedureName: {
      type: String,
    },
    inspectionSheetId: {
      type: String,
    },
    numberOfGroupedSamples: {
      type: Number,
      default: 1,
    },
    batchNum: {
      type: String,
    },
  },
  data() {
    return {
      dataListLoading: false,
      dataList: [],
      tableProps: [],
      sampleNum: 1,
    };
  },
  methods: {
    init() {
      this.dataList.splice(0, this.dataList.length);
      this.dataList = [
        {
          sampleNumber: "工序",
        },
        {
          sampleNumber: "特性类型",
        },
        {
          sampleNumber: "规格下限",
        },
        {
          sampleNumber: "规格上限",
        },
        {
          sampleNumber: "抽样数量",
        },
        {
          sampleNumber: "参数规格",
        },
        {
          sampleNumber: "频率",
        },
      ];
      this.tableProps = [
        {
          prop: "sampleNumber",
          label: "样本号",
        },
        {
          prop: "sampleTime1",
          label: "取样时间",
        },
        // {
        //   prop: "batchNum",
        //   label: "批次号",
        // },
      ];
      this.featuresList.forEach((item,index) => {
        let obj = {
          prop: item.name + index,
          label: item.name,
          fType: item.type,
          lsl: item.lsl,
          usl: item.usl,

        };
        this.tableProps.push(obj);
        this.dataList[0][item.name + index] = this.workingProcedureName
          ? this.workingProcedureName
          : item.workingProcedureName;
        this.dataList[1][item.name + index] = { 1: "计量型", 2: "计数型" }[item.type];
        this.dataList[2][item.name + index] = item.lsl;
        this.dataList[3][item.name + index] = item.usl;
        this.dataList[4][item.name + index] = item.sampleSize;
        this.dataList[5][item.name + index] = item.specifications;
        this.dataList[6][item.name + index] = item.samplingFrequency;
      });
      this.getInfluxdb();
      this.dataListLoading = false;
      this.$nextTick(() => {});
    },
    getInfluxdb() {
      this.$http
        .post(
          `/processInspection/inspectionSheet/getFluxParamList3?inspectionSheetId=${this.inspectionSheetId}`
        )
        .then((res) => {
          res.data.forEach((item) => {
            item.sampleTime1 = this.formatDateTime(item.sampleTime);
            item.sampleParamList.forEach((item1) => {
              item[item1.argName] = item1.argValue;
            });
            this.dataList.push(item);
          });
        })
        .catch(() => {});
    },
    addSample() {
      let arr = [];
      for (let i = 1; i <= parseInt(this.numberOfGroupedSamples); i++) {
        let sampleNum = "";
        if (i < 10) {
          sampleNum = this.getSampleNum("0" + i);
        } else {
          sampleNum = this.getSampleNum(i);
        }
        let obj = {
          inspectionSheetId: this.inspectionSheetId,
          workingProcedureName: this.workingProcedureName,
          sampleNumber: sampleNum,
          sampleTime: new Date(),
          batchNum: this.batchNum,
          sampleParamList: [],
        };
        this.featuresList.forEach((item) => {
          let obj1 = {
            workingProcedureName: this.workingProcedureName
              ? this.workingProcedureName
              : item.workingProcedureName,
          };
          if (item.type === 1) {
            obj1.argName = item.name;
            obj1.argValue = "";
          } else {
            obj1.argName = item.name;
            obj1.argValue = 1;
          }
          obj.sampleParamList.push(obj1);
        });
        // obj.jsonData = JSON.stringify(obj.jsonData);
        arr.push(obj);
      }
      this.$http
        .post("/processInspection/inspectionSheet/saveFluxParamList3", arr)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$nextTick(() => {
            this.$emit("refreshDataForm", this.inspectionSheetId);
          });
        })
        .catch(() => {});
    },
    Submit() {
      let arr = JSON.parse(JSON.stringify(this.dataList.slice(7)));
      arr.forEach((item) => {
        (item.workingProcedureName = this.workingProcedureName), (item.sampleParamList = []);
        this.featuresList.forEach((item1) => {
          let obj1 = {
            workingProcedureName: this.workingProcedureName
              ? this.workingProcedureName
              : item1.workingProcedureName,
          };
          obj1.argName = item1.name;
          obj1.argValue = item[item1.name];
          item.sampleParamList.push(obj1);
        });
      });
      this.$http
        .post("/processInspection/inspectionSheet/saveFluxParamList3", arr)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.init();
          this.$nextTick(() => {
            this.$emit("refreshDataForm", this.inspectionSheetId);
          });
        })
        .catch(() => {});
    },
    getSampleNum(num) {
      this.sampleNum = Math.ceil(this.dataList.slice(7).length / this.numberOfGroupedSamples) + 1;
      return `00${this.sampleNum}${num}`;
    },
    formatDateTime(val) {
      let date = "";
      if (val) {
        date = new Date(val);
      } else {
        date = new Date();
      }
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },
  },
};
</script>

<style scoped>
.redFont >>> .el-input__inner {
  color: red;
}
.redbg >>> .el-checkbox__inner {
  background: red;
}
</style>
