<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2023-04-10 15:45:39
 * @Description:
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="fourVisible"
    append-to-body
    class="baseDialog"
  >
      <template #title>
        <slot name="title">
          <div class="titleStyle">{{ !fourDataForm.id ? '新增' : '修改' }}</div>
        </slot>
      </template>
    <el-row :gutter="10">
      <el-form
        :model="fourDataForm"
        :rules="dataRule"
        ref="fourDataForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="80px"
      >
        <el-col :span="8">
          <el-form-item label="编码" prop="code">
            <el-input v-model="fourDataForm.code" placeholder="编码" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="名称" prop="name">
            <el-input v-model="fourDataForm.name" placeholder="名称" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="特性类型" prop="type">
            <el-select
              v-model="fourDataForm.type"
              :style="{ width: '100%' }"
              readonly
              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
              v-model="fourDataForm.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
              v-model="fourDataForm.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="SPC" prop="isSpc">
            <el-select
              v-model="fourDataForm.isSpc"
              :style="{ width: '100%' }"
              readonly
              placeholder="请选择是否SPC"
            >
              <el-option
                v-for="item in SPCArr"
                :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="controlGraphId">
            <el-select
              :disabled="fourDataForm.type === 2"
              v-model="fourDataForm.controlGraphId"
              placeholder="请选择分析图形"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in GraphName"
                :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="sampleSize">
            <el-input-number
              :disabled="fourDataForm.type === 2"
              v-model="fourDataForm.sampleSize"
              placeholder="样本大小"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="抽样频率" prop="samplingFrequency">
            <el-input v-model="fourDataForm.samplingFrequency" placeholder="抽样频率"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单位" prop="unitId">
            <el-select
              v-model="fourDataForm.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="decimalPlaces">
            <el-input-number
              :disabled="fourDataForm.type === 2"
              v-model="fourDataForm.decimalPlaces"
              placeholder="小数位数"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规格" prop="specifications">
            <el-input v-model="fourDataForm.specifications" placeholder="规格"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="LSL" prop="lsl">
            <el-input-number
              :disabled="fourDataForm.type === 2"
              v-model="fourDataForm.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="fourDataForm.type === 2"
              v-model="fourDataForm.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="fourDataForm.type === 2"
              v-model="fourDataForm.usl"
              placeholder="USL"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目标CPK" prop="targetCpk">
            <el-input-number
              :disabled="fourDataForm.type === 2"
              v-model="fourDataForm.targetCpk"
              placeholder="目标CPK"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目标PPK" prop="targetPpk">
            <el-input-number
              :disabled="fourDataForm.type === 2"
              v-model="fourDataForm.targetPpk"
              placeholder="目标PPK"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="fourDataForm.remark" placeholder="备注"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="fourVisible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      fourVisible: false,
      fourDataForm: {
        id: "",
        productId: "",
        code: "",
        name: "",
        type: "",
        defectLevel: "",
        measureToolId: "",
        isSpc: "",
        controlGraphId: "",
        sampleSize: "",
        samplingFrequency: "",
        unitId: "",
        decimalPlaces: "",
        specifications: "",
        lsl: "",
        sl: "",
        usl: "",
        targetCpk: "",
        targetPpk: "",
        remark: "",
      },
      typeArr: [
        {
          name: "计数",
          value: 2,
        },
        {
          name: "计量",
          value: 1,
        },
      ],
      SPCArr: [
        {
          name: "否",
          value: 0,
        },
        {
          name: "是",
          value: 1,
        },
      ],
      defectLevelArr: [
        {
          name: "致命缺陷",
          value: 1,
        },
        {
          name: "严重缺陷",
          value: 2,
        },
        {
          name: "轻微缺陷",
          value: 3,
        },
      ],
      measureToolArr: [],
      GraphName: [],
      unitArr: [],
      dataRule: {
        code: [{ required: true, message: "编码不能为空", trigger: "blur" }],
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        sampleSize: [
          { required: true, message: "样本大小不能为空", trigger: "blur" },
          { pattern: /^([2-9]|[1-2]d|3[0-5])$/, message: "范围在2-35", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getArr();
  },
  methods: {
    init(id, productId) {
      this.fourDataForm.id = id || "";
      this.fourDataForm.productId = productId;
      this.fourVisible = true;
      this.$nextTick(() => {
        this.$refs["fourDataForm"].resetFields();
        if (this.fourDataForm.id) {
          this.$http
            .get(`/basic/productFeatures/${this.fourDataForm.id}`)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.fourDataForm = 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(() => {});
      this.$http
        .post("/qualityPlanning/controlGraph/list")
        .then(({ data: res }) => {
          this.GraphName = res;
        })
        .catch(() => {});
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["fourDataForm"].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.$http[!this.fourDataForm.id ? "post" : "put"](
          "/basic/productFeatures/",
          this.fourDataForm
        )
          .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.fourVisible = false;
                this.$emit("refreshFourDataList");
              },
            });
          })
          .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>