<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2022-08-31 10:07:19
 * @Description:
-->
<template>
  <el-row :gutter="10">
    <el-form ref="dataForm" :model="dataForm" :rules="rules" size="medium" label-width="110px">
      <el-col :span="8">
        <el-form-item label="编码" prop="code">
          <el-input
            v-model="dataForm.code"
            placeholder="请输入编码"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="dataForm.name"
            placeholder="请输入名称"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="规格" prop="specifications">
          <el-input
            v-model="dataForm.specifications"
            placeholder="请输入规格"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="图纸" prop="drawing">
          <el-input
            v-model="dataForm.drawing"
            placeholder="请输入图纸"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="描述" prop="descs">
          <el-input
            v-model="dataForm.descs"
            placeholder="请输入描述"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="dataForm.remark"
            placeholder="请输入备注"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="产品类型" prop="productTypeId">
          <el-select
            v-model="dataForm.productTypeId"
            placeholder="请选择产品类型"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in optionArr.arr0"
              :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
            v-model="dataForm.unitId"
            placeholder="请选择单位"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in optionArr.arr1"
              :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="inspectionStandard">
          <el-input
            v-model="dataForm.inspectionStandard"
            placeholder="请输入检验标准"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="检验阶段" prop="inspectionStageArr">
          <el-checkbox-group v-model="dataForm.inspectionStageArr"
              @change="$forceUpdate()" size="medium">
            <el-checkbox
              v-for="(item, index) in inspectionStageOptions"
              :key="index"
              :label="item.value"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-col>
    </el-form>
  </el-row>
</template>

<script>
export default {
  props: {
    productId: {
      type: String
    },
  },
  data() {
    return {
      dataForm: {
        id: "",
        code: undefined,
        name: undefined,
        specifications: undefined,
        drawing: undefined,
        descs: undefined,
        remark: undefined,
        productTypeId: undefined,
        unitId: undefined,
        inspectionStage: "",
        inspectionStageArr: [],
        inspectionStandard: undefined,
      },
      rules: {
        code: [
          {
            required: true,
            message: "请输入编码",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
      },
      inspectionStageOptions: [
        {
          label: "进货检验",
          value: '1',
        },
        {
          label: "过程检验",
          value: '2',
        },
        {
          label: "成品检验",
          value: '3',
        },
        {
          label: "出货检验",
          value: '4',
        },
      ],
      optionArrUrl: ["/basic/productType/page", "/basic/unit/page"],
      optionArr: {},
    };
  },
  methods: {
    init() {
      this.dataForm.id = this.productId || "";
      this.getArr();
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.$http
            .get(`/basic/product/${this.dataForm.id}`)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.dataForm = res.data;
              this.dataForm.inspectionStageArr = this.dataForm.inspectionStage.split(',')
            })
            .catch(() => {});
        }
      });
    },
    getArr() {
      this.optionArrUrl.forEach((item, index) => {
        this.$http
          .get(item, {
            params: {
              page: 1,
              limit: 500,
            },
          })
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            }
            this.$set(this.optionArr, `arr${index}`, res.data.list);
          })
          .catch(() => {});
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.dataForm.inspectionStage = this.dataForm.inspectionStageArr.toString()
        this.$http[!this.dataForm.id ? "post" : "put"](
          `/basic/product/${!this.dataForm.id ? "save" : "update"}`,
          this.dataForm
        )
          .then(({ data: res }) => {
            this.$message({
              message: this.$t("prompt.success"),
              type: "success",
              duration: 500,
              onClose: () => {
                this.$emit("nextStep");
                this.$emit("setInspectionStage",this.dataForm.inspectionStageArr);
                if(!this.dataForm.id){
                this.$emit("setPrductId",res.id);
                }
              },
            });
          })
          .catch(({ data: res }) => {
            this.$message.error(res.msg)
          });
      });
    },
  },
}
</script>