<template>
  <el-dialog
    v-model="visible"
    :title="title ? title : type === 'add' ? '新增' : '修改'"
    :before-close="fnClose"
  >
    <el-form ref="formRef" :rules="rules" :model="form" label-width="240px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="检查类别" prop="CHECK_CATEGORY_NAME">
            <layout-select-create
              v-if="type === 'add'"
              v-model="data.CHECK_CATEGORY_NAME"
              :list="categoryData"
              @change="goChange"
            />
            <el-input
              v-if="type !== 'add'"
              v-model="form.CHECK_CATEGORY_NAME"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="检查项目" prop="CHECK_ITEM_NAME">
            <layout-select-create
              v-if="type === 'add'"
              v-model="data.CHECK_ITEM_NAME"
              :list="data.itemData"
              @change="goChange"
            />
            <el-input
              v-if="type !== 'add'"
              v-model="form.CHECK_ITEM_NAME"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="检查内容" prop="CHECK_CONTENT">
            <el-input
              v-model="form.CHECK_CONTENT"
              placeholder="请输入检查内容"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="检查标准" prop="CHECK_STANDARD">
            <el-input
              v-model="form.CHECK_STANDARD"
              placeholder="请输入检查标准"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="参考依据" prop="REFERENCE_BASIS">
            <el-input
              v-model="form.REFERENCE_BASIS"
              placeholder="请输入参考依据"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="检查合格项" prop="CHECK_QUALIFIED">
            <el-input
              v-model="form.CHECK_QUALIFIED"
              placeholder="请输入检查合格项"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="检查不合格项" prop="CHECK_UNQUALIFIED">
            <el-input
              v-model="form.CHECK_UNQUALIFIED"
              placeholder="请输入检查不合格项"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="操作类型" prop="OPERATION_TYPE">
            <el-select v-model="form.OPERATION_TYPE">
              <el-option :value="1" label="选择" />
              <el-option :value="2" label="填写" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="fnClose">取消</el-button>
      <el-button type="primary" @click="fnSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useVModels } from "@vueuse/core";
import { debounce } from "throttle-debounce";
import useFormValidate from "@/assets/js/useFormValidate.js";
import LayoutSelectCreate from "@/components/select_create/index.vue";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  form: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  standardData: {
    type: Array,
    required: true,
    default: () => [],
  },
  categoryData: {
    type: Array,
    required: true,
    default: () => [],
  },
  type: {
    type: String,
    required: true,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
});
const emits = defineEmits(["update:visible", "update:form", "submit"]);
const { visible, form } = useVModels(props, emits);
const formRef = ref(null);
const data = reactive({
  nameValue: "",
  CHECK_CATEGORY_NAME: "",
  CHECK_ITEM_NAME: "",
  standardData: props.standardData,
  itemData: [],
});
const goChange = (event) => {
  if (fnFindValueInList(props.categoryData, data.CHECK_CATEGORY_NAME)) {
    form.value.letCategoryType = "select";
    form.value.CHECK_CATEGORY_NAME = data.nameValue;
  } else {
    form.value.letCategoryType = "value";
    form.value.CHECK_CATEGORY_NAME = data.CHECK_CATEGORY_NAME;
  }
  if (form.value.letCategoryType === "select" && event) {
    data.itemData = [];
    getItemList(data.CHECK_CATEGORY_NAME);
  } else {
    data.itemData = [];
  }
  if (fnFindValueInList(data.itemData, data.CHECK_ITEM_NAME)) {
    form.value.letItemType = "select";
    form.value.CHECK_ITEM_NAME = data.nameValue;
  } else {
    form.value.letItemType = "value";
    form.value.CHECK_ITEM_NAME = data.CHECK_ITEM_NAME;
  }
};
const getItemList = (val) => {
  data.standardData.forEach((item) => {
    if (item.PARENT_ID !== "0" && item.PARENT_IDS.includes(val)) {
      data.itemData.push(item);
    }
  });
};
const fnFindValueInList = (list, value) => {
  let existence = false;
  for (let i = 0; i < list.length; i++) {
    if (list[i].DICTIONARIES_ID === value) {
      existence = true;
      data.nameValue = list[i].NAME;
      break;
    }
  }
  return existence;
};
const rules = {
  CHECK_CATEGORY_NAME: [
    { required: true, message: "检查类别不能为空", trigger: "blur" },
  ],
  CHECK_ITEM_NAME: [
    { required: true, message: "检查项目不能为空", trigger: "blur" },
  ],
  CHECK_CONTENT: [
    { required: true, message: "检查内容不能为空", trigger: "change" },
  ],
  CHECK_STANDARD: [
    {
      required: true,
      message: "检查标准不能为空",
      trigger: "change",
    },
  ],
  REFERENCE_BASIS: [
    {
      required: false,
      message: "参考依据不能为空",
      trigger: "change",
    },
  ],
  CHECK_QUALIFIED: [
    { required: true, message: "检查合格项不能为空", trigger: "change" },
  ],
  CHECK_UNQUALIFIED: [
    { required: true, message: "检查不合格项不能为空", trigger: "blur" },
  ],
  OPERATION_TYPE: [
    { required: true, message: "操作类型不能为空", trigger: "blur" },
  ],
};
const fnClose = () => {
  // formRef.value.resetFields();
  data.CHECK_CATEGORY_NAME = "";
  data.CHECK_ITEM_NAME = "";
  visible.value = false;
};
const fnSubmit = debounce(
  1000,
  async () => {
    await useFormValidate(formRef);
    emits("submit", form.value);
    fnClose();
  },
  { atBegin: true }
);
</script>

<style scoped lang="scss"></style>
