<template>
  <el-dialog v-model="visible" title="选择其他检查标准" width="1500">
    <el-form
      ref="formRef"
      :model="searchForm"
      label-width="60px"
      @submit.prevent="fnResetPagination"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="检查类型" prop="KEYWORDS" label-width="100px">
            <el-select
              v-model="searchForm.CHECK_CATEGORY"
              @change="getLevelData"
            >
              <el-option
                v-for="item in categoryData"
                :key="item.DICTIONARIES_ID"
                :label="item.NAME"
                :value="item.DICTIONARIES_ID"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="检查项目"
            prop="DEPARTMENT_ID"
            label-width="100px"
          >
            <el-select v-model="searchForm.CHECK_ITEM">
              <el-option
                v-for="item in data.itemData"
                :key="item.DICTIONARIES_ID"
                :label="item.NAME"
                :value="item.DICTIONARIES_ID"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="检查内容" label-width="100px">
            <el-input
              v-model="searchForm.OTHERKEYWORDS"
              placeholder="请输入关键字"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label-width="10px">
            <el-button type="primary" native-type="submit">搜索</el-button>
            <el-button native-type="reset" @click="fnResetPaginationTransfer">
              重置
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <layout-table
      ref="tableRef"
      v-model:pagination="pagination"
      :data="list"
      row-key="CUSTOM_ITEM_ID"
      @get-data="fnGetData"
    >
      <el-table-column reserve-selection type="selection" width="55" />
      <el-table-column label="序号" width="55">
        <template #default="{ $index }">
          {{ serialNumber(pagination, $index) }}
        </template>
      </el-table-column>
      <el-table-column prop="CHECK_CATEGORY_NAME" label="检查类别" width="90" />
      <el-table-column prop="CHECK_ITEM_NAME" label="检查项目" width="90" />
      <el-table-column prop="CHECK_CONTENT" label="检查内容" width="200" />
      <el-table-column prop="CHECK_STANDARD" label="检查标准" width="200" />
      <el-table-column prop="REFERENCE_BASIS" label="参考依据" width="200" />
      <el-table-column prop="CHECK_QUALIFIED" label="检查合格项" width="200" />
      <el-table-column
        prop="CHECK_UNQUALIFIED"
        label="检查不合格项"
        width="200"
      />
      <el-table-column label="操作类型" width="100">
        <template #default="{ row }">
          <span v-if="row.OPERATION_TYPE === 1">选择</span>
          <span v-if="row.OPERATION_TYPE === 2">填写</span>
        </template>
      </el-table-column>
      <el-table-column prop="OPERATION_TYPE" label="操作">
        <template #default="{ row }">
          <el-button type="primary" text link @click="goEdit(row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </layout-table>
    <template #footer>
      <el-button @click="fnClose">取消</el-button>
      <el-button type="primary" @click="fnSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
  <add-checkstandard
    v-model:visible="data.editOrEditDialog.visible"
    v-model:form="data.editOrEditDialog.form"
    title="修改检查标准"
    type="edit"
    @submit="fnEditStandardSubmit"
  />
</template>

<script setup>
import { useVModel } from "@vueuse/core";
import { debounce } from "throttle-debounce";
import useListData from "@/assets/js/useListData.js";
import {
  getCheckstandardCommonList,
  setCommonItemEdit,
} from "@/request/hazard_investigation.js";
import { reactive, ref, watch } from "vue";
import { serialNumber } from "@/assets/js/utils.js";
import { differenceWith } from "lodash-es";
import { ElMessage } from "element-plus";
import AddCheckstandard from "@/views/hazard_investigation/inventory_management/components/checkstandard_add.vue";
import useFormValidate from "@/assets/js/useFormValidate.js";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  listData: {
    type: Array,
    required: true,
    default: () => [],
  },
  standardData: {
    type: Array,
    required: true,
    default: () => [],
  },
  categoryData: {
    type: Array,
    required: true,
    default: () => [],
  },
});
const formRef = ref(null);
const data = reactive({
  itemData: [],
  editOrEditDialog: {
    visible: false,
    form: {},
  },
});
const emits = defineEmits(["update:visible", "submit"]);
const visible = useVModel(props, "visible", emits);
const { list, searchForm, pagination, fnGetData, fnResetPagination, tableRef } =
  useListData(getCheckstandardCommonList, {
    immediate: false,
    clearSelection: false,
  });
const getLevelData = () => {
  searchForm.value.CHECK_ITEM = "";
  data.itemData = [];
  props.standardData.forEach((item) => {
    if (
      item.PARENT_ID !== "0" &&
      item.PARENT_IDS.includes(searchForm.value.CHECK_CATEGORY)
    ) {
      data.itemData.push(item);
    }
  });
};
const stop = watch(
  () => props.visible,
  (value) => {
    if (value) {
      fnGetData();
      stop && stop();
    }
  }
);
const fnClose = () => {
  visible.value = false;
};
const fnSubmit = debounce(
  1000,
  () => {
    const selectionData = tableRef.value.getSelectionRows();
    const listData = differenceWith(selectionData, props.listData);
    fnClose();
    emits("submit", listData);
  },
  { atBegin: true }
);
const goEdit = (row) => {
  data.editOrEditDialog.form = row;
  data.editOrEditDialog.visible = true;
};
const fnEditStandardSubmit = debounce(
  1000,
  async () => {
    await useFormValidate(formRef);
    const params = {
      ...data.editOrEditDialog.form,
    };
    await setCommonItemEdit(params);
    ElMessage.success("保存成功");
  },
  { atBegin: true }
);
const fnResetPaginationTransfer = () => {
  searchForm.value = [];
  data.itemData = [];
  fnResetPagination();
};
</script>

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