<template>
  <div style="height: 700px; overflow-y: scroll">
    <el-form ref="form" :model="form" :disabled="disabled" :rules="rules" label-width="80px">
      <el-divider content-position="left">生猪健康检查信息</el-divider>
      <!-- <el-form-item label="入场批次ID" prop="entranceBatchId">
        <el-input
          v-model="queryParams.entranceBatchId"
          placeholder="请输入入场批次ID"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-row>
        <el-col :span="6">
          <el-form-item label="精神" prop="spirit">
            <el-select v-model="form.spirit">
              <el-option
                v-for="dict in dict.type.app_inspection_res"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="外貌" prop="appearance">
            <el-select v-model="form.appearance">
              <el-option
                v-for="dict in dict.type.app_inspection_res"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="呼吸" prop="breathe">
            <el-select v-model="form.breathe">
              <el-option
                v-for="dict in dict.type.app_inspection_res"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="代谢物" prop="metabolite">
            <el-select v-model="form.metabolite">
              <el-option
                v-for="dict in dict.type.app_inspection_res"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="其他" prop="otherRemark">
            <el-input
              v-model="form.otherRemark"
              :autosize="{ minRows: 2, maxRows: 6 }"
              placeholder="请输入其他"
              maxlength="50" show-word-limit
              type="textarea"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">生猪检验检疫信息</el-divider>
      <el-row class="mb20">
        <el-col :span="5">
          <div>
            <!-- <span style="color: #f00">* </span> -->
            检验检疫项目</div>
        </el-col>
        <el-col :span="5">
          <div>
            <!-- <span style="color: #f00">* </span> -->
            检验检疫结果</div>
        </el-col>
        <el-col :span="5">
          <div>查验人</div>
        </el-col>
        <el-col :span="5">
          <div>处理情况</div>
        </el-col>
      </el-row>
      <!-- <div class="mt10 mb10">
        <el-button
            type="primary"
            v-if="form.inspectionDetailArr.length==0"
            @click="addItem"
            >录入检疫信息</el-button>
        </div> -->
      <el-row v-for="(itemRow, i) in form.inspectionDetailArr" :key="i">
        <el-col :span="5">
          <el-form-item
            label=""
            label-width="0"
            :prop="'inspectionDetailArr.' + i + '.itemName'"
          >
            <el-select
              v-model="itemRow.itemName"
              filterable
              clearable
              placeholder="请选择检验检疫项目"
              @change="selectItem"
              style="width: 180px"
            >
              <el-option
                v-for="(item,i) in inspectionItemOptions"
                :key="i"
                :label="item.itemName"
                :value="item.itemName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item
            label=""
            label-width="0"
            :prop="'inspectionDetailArr.' + i + '.result'"
            :rules="rules1"
          >
            <el-select
              v-model="itemRow.result"
              filterable
              placeholder="请选择检验检疫结果"
              style="width: 180px"
            >
              <el-option
                v-for="(item,i) in inspectionResOptions"
                :key="i"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item
            label=""
            label-width="0"
            :prop="'inspectionDetailArr.' + i + '.checkName'"
            :rules="{
              min: 0,
              max:10,
              message: '查验人超出限制（10位）',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="itemRow.checkName"
              placeholder="请输入查验人"
              style="width: 180px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item
            label=""
            label-width="0"
            :prop="'inspectionDetailArr.' + i + '.dealWay'"
            :rules="{
              min: 0,
              max:20,
              message: '处理方式超出限制（20位）',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="itemRow.dealWay"
              placeholder="请输入处理方式"
              style="width: 180px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button
            class="item-add"
            type="primary"
            v-if="i == form.inspectionDetailArr.length - 1"
            @click="addItem"
            ><i class="el-icon-plus"></i
          ></el-button>
          <el-button
            class="item-del"
            type="danger"
            v-if="i > 0 || form.inspectionDetailArr.length > 1"
            @click="removeItem(i)"
            ><i class="el-icon-minus"></i
          ></el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer" v-if="!disabled">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>
<script>
import {
  getEntranceInspection,
  addEntranceInspection,
  updateEntranceInspection,
} from "@/api/app/entranceInspection";

import { getAllInspectionItem } from "@/api/app/inspectionItem";
export default {
  name: "EntranceInspection",
  dicts: ["app_inspection_res"],
  props: {
    entranceBatchId: {
      type: Number,
      default:null
    },
    disabled: {
      type: Boolean,
      default:false
    }
  },
  watch:{
    entranceBatchId: {
      handler(newVal, oldVal) {
        this.reset();
      },
      immediate: true,
    },
  },
  data() {
    var valiRes = (rule, value, callback) => {//包含小数的数字
            console.log(rule)
            let index = rule.field.split(".")[1];
            if(index!=undefined && index!=null){
              console.log(this.form.inspectionDetailArr[index].itemName,value)
               if(this.form.inspectionDetailArr[index].itemName && !value){
                  callback(new Error('请选择对应检验检疫结果'));
               }else{
                callback();
               }
            }else{
              callback();
            }
    };
    return {
      inspectionItemOptions: [],
      inspectionResOptions: [],
      //entranceBatchId:null,
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      rules1:{ validator: valiRes, trigger: 'change' }
    };
  },
  methods: {
    addItem() {
      this.form.inspectionDetailArr.push({
        itemName: null,
        result: null,
        dealWay: null,
        checkName: null,
      });
    },
    removeItem(i) {
      this.form.inspectionDetailArr.splice(i, 1);
    },
    selectItem(value) {
      let select = this.inspectionItemOptions.find(
        (item) => item.itemName === value
      );
      this.inspectionResOptions = select.result
        ? JSON.parse(select.result)
        : [];
      console.log(this.inspectionResOptions);
    },
    getInspectionItem() {
      getAllInspectionItem().then((response) => {
        this.inspectionItemOptions = response.data;
      });
    },
    // 取消按钮
    cancel() {
      this.$emit('submit');
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        entranceBatchId: this.entranceBatchId,
        spirit: null,
        appearance: null,
        breathe: null,
        metabolite: null,
        otherRemark: null,
        inspectionDetail: null,
        inspectionDetailArr: [
          {
            itemName: null,
            result: null,
            dealWay: null,
            checkName: null,
          },
        ],
      };
      this.resetForm("form");
      if(this.form.entranceBatchId){
        this.getDetail(this.form.entranceBatchId);
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.form.inspectionDetail = JSON.stringify(this.form.inspectionDetailArr);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateEntranceInspection(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.$emit('submit');
            });
          } else {
            addEntranceInspection(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.$emit('submit');
            });
          }
        }
      });
    },
    getDetail(id) {
      console.log(id)
      getEntranceInspection(id).then((response) => {
        if(response.data){
          this.form = response.data;
          let inspectionDetailArr = [];
          if(this.form.inspectionDetail == null){
            inspectionDetailArr = [{
              itemName: null,
              result: null,
              dealWay: null,
              checkName: null,
            }];
          }else{
            inspectionDetailArr = JSON.parse(this.form.inspectionDetail);
          }
          this.$set(this.form, "inspectionDetailArr",inspectionDetailArr );
          console.log(this.form)
        }
      });
    },
  },
  created() {

    this.getInspectionItem();
  },
};
</script>
<style scoped>
.footer {
  padding-left: 40px;
}
.form-part {
  /* font-weight: bold; */
  font-size: 18px;
  height: 30px;
  line-height: 30px;
}
</style>
