<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2022-08-19 14:34: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="specs">
          <el-input
            v-model="dataForm.specs"
            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="desc">
          <el-input
            v-model="dataForm.desc"
            placeholder="请输入备注"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="描述" prop="description">
          <el-input
            v-model="dataForm.description"
            placeholder="请输入描述"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="产品类型" prop="productType">
          <el-select
            v-model="dataForm.productType"
            placeholder="请选择产品类型"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in productTypeOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="单位" prop="unit">
          <el-select
            v-model="dataForm.unit"
            placeholder="请选择单位"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in unitOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="检验阶段" prop="inspectionStage">
          <el-checkbox-group v-model="dataForm.inspectionStage" size="medium">
            <el-checkbox
              v-for="(item, index) in inspectionStageOptions"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="检验标准" prop="standard">
          <el-input
            v-model="dataForm.standard"
            placeholder="请输入检验标准"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
      </el-col>
    </el-form>
  </el-row>
</template>

<script>
export default {
  data () {
    return {
      dataForm: {
        id: '',
        code: undefined,
        name: undefined,
        specs: undefined,
        drawing: undefined,
        desc: undefined,
        description: undefined,
        productType: undefined,
        unit: undefined,
        inspectionStage: [],
        standard: undefined
      },
      rules: {
        code: [
          {
            required: true,
            message: '请输入编码',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }
        ]
      },
      productTypeOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],
      unitOptions: [
        {
          label: '选项一',
          value: 1
        },
        {
          label: '选项二',
          value: 2
        }
      ],
      inspectionStageOptions: [
        {
          label: '进货检验',
          value: 1
        },
        {
          label: '过程检验',
          value: 2
        },
        {
          label: '成品检验',
          value: 3
        },
        {
          label: '出货检验',
          value: 4
        }
      ]
    }
  },
  methods: {
    init (id) {
      this.dataForm.id = id || ''
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/alarmBase/get`),
            method: 'post',
            data: this.$http.adornData({ id })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm = data.data
            } else {
              this.$message.error(data.msg)
            }
          })
        } else {
          this.$http({
            url: this.$http.adornUrl(`/alarmBase/codeGenerator`),
            method: 'post',
            data: this.$http.adornData()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.code = data.data
            } else {
              this.$message.error('编码生成失败')
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit () {
      this.$emit('nextStep')
      // this.$refs['dataForm'].validate(valid => {
      //   if (valid) {
      //     this.$http({
      //       url: this.$http.adornUrl(
      //         `/alarmBase/${!this.dataForm.id ? 'add' : 'update'}`
      //       ),
      //       method: 'post',
      //       data: this.$http.adornData(this.dataForm)
      //     }).then(({ data }) => {
      //       if (data && data.code === 0) {
      //         this.$message({
      //           message: '操作成功',
      //           type: 'success',
      //           duration: 1500,
      //           onClose: () => {
      //             this.$emit('nextStep')
      //           }
      //         })
      //       } else {
      //         this.$message.error(data.msg)
      //       }
      //     })
      //   }
      // })
    }
  }
}
</script>
