<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2023-04-10 15:40:38
 * @Description:
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="threeVisible"
    append-to-body
    class="baseDialog"
  >
      <template #title>
        <slot name="title">
          <div class="titleStyle">{{ !threeDataForm.id ? '新增' : '修改' }}</div>
        </slot>
      </template>
    <el-row :gutter="10">
      <el-form
        :model="threeDataForm"
        :rules="dataRule"
        ref="threeDataForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="80px"
      >
        <el-col :span="8">
          <el-form-item label="编码" prop="code">
            <el-input v-model="threeDataForm.code" placeholder="编码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="名称" prop="name">
            <el-input v-model="threeDataForm.name" placeholder="名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="特性类型" prop="type">
            <el-select
              v-model="threeDataForm.type"
              @change="numIsblack"
              :style="{ width: '100%' }"
              filterable
              placeholder="请选择特性类型"
            >
              <el-option
                v-for="item in typeArr"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="缺陷等级" prop="defectLevel">
            <el-select
              :disabled="threeDataForm.type === 2"
              v-model="threeDataForm.defectLevel"
              :style="{ width: '100%' }"
              filterable
              placeholder="请选择缺陷等级"
            >
              <el-option
                v-for="item in defectLevelArr"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="量具" prop="measureToolId">
            <el-select
              :disabled="threeDataForm.type === 2"
              v-model="threeDataForm.measureToolId"
              placeholder="请选择单位"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in measureToolArr"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单位" prop="unitId">
            <el-select
              :disabled="threeDataForm.type === 2"
              v-model="threeDataForm.unitId"
              placeholder="请选择单位"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in unitArr"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规格" prop="specifications">
            <el-input
              :disabled="threeDataForm.type === 2"
              v-model="threeDataForm.specifications"
              placeholder="规格"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="LSL" prop="lsl">
            <el-input-number
              :disabled="threeDataForm.type === 2"
              v-model="threeDataForm.lsl"
              placeholder="LSL"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="SL" prop="sl">
            <el-input-number
              :disabled="threeDataForm.type === 2"
              v-model="threeDataForm.sl"
              placeholder="SL"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="USL" prop="usl">
            <el-input-number
              :disabled="threeDataForm.type === 2"
              v-model="threeDataForm.usl"
              placeholder="USL"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="threeDataForm.remark" placeholder="备注"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="threeVisible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      threeVisible: false,
      threeDataForm: {
        id: "",
        productId: "",
        code: "",
        name: "",
        type: "",
        defectLevel: "",
        measureToolId: "",
        unitId: "",
        specifications: "",
        lsl: "",
        sl: "",
        usl: "",
        remark: "",
      },
      typeArr: [
        {
          name: "计数",
          value: 2,
        },
        {
          name: "计量",
          value: 1,
        },
      ],
      defectLevelArr: [
        {
          name: "致命缺陷",
          value: 1,
        },
        {
          name: "严重缺陷",
          value: 2,
        },
        {
          name: "轻微缺陷",
          value: 3,
        },
      ],
      measureToolArr: [],
      unitArr: [],
      dataRule: {
        code: [{ required: true, message: "编码不能为空", trigger: "blur" }],
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getArr();
  },
  methods: {
    init(id, productId) {
      this.threeDataForm.id = id || "";
      this.threeDataForm.productId = productId;
      this.threeVisible = true;
      this.$nextTick(() => {
        this.$refs["threeDataForm"].resetFields();
        if (this.threeDataForm.id) {
          this.$http
            .get(`/basic/productFeatures/${this.threeDataForm.id}`)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.threeDataForm = res.data;
            })
            .catch(() => {});
        }
      });
    },
    getArr() {
      this.$http
        .get("/basic/unit/page", {
          params: {
            page: 1,
            limit: 500,
          },
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.unitArr = res.data.list;
        })
        .catch(() => {});
      this.$http
        .get("/basic/measureTool/page", {
          params: {
            page: 1,
            limit: 500,
          },
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.measureToolArr = res.data.list;
        })
        .catch(() => {});
    },
    numIsblack(val){
      if(val===2){
        this.threeDataForm.defectLevel= ""
        this.threeDataForm.measureToolId= ""
        this.threeDataForm.unitId= ""
        this.threeDataForm.specifications= ""
        this.threeDataForm.lsl= 0
        this.threeDataForm.sl= 0
        this.threeDataForm.usl= 0
      }
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["threeDataForm"].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.$http[!this.threeDataForm.id ? "post" : "put"](
          "/basic/productFeatures/",
          this.threeDataForm
        )
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            }
            this.$message({
              message: this.$t("prompt.success"),
              type: "success",
              duration: 500,
              onClose: () => {
                this.threeVisible = false;
                this.$emit("refreshThreeDataList");
              },
            });
          })
          .catch(() => {});
      });
    },
  },
};
</script>

<style>
.baseDialog .el-dialog__header {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  padding: 13px 24px;
  border-bottom: 1px solid #e9e9e9;
}
.baseDialog .el-dialog__header .titleStyle::before{
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #0B58FF;
  border-radius: 1px;
  margin-right: 8px;
  position: relative;
  top: 2px;
}
.baseDialog .el-dialog__body {
  padding-left: 24px;
  padding-right: 24px;
}
</style>
