<template>
  <el-dialog title="选择其他存在风险" v-model="visible" width="1500">
    <el-form
      :model="searchForm"
      label-width="60px"
      @submit.prevent="fnResetPagination"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="关键字" prop="KEYWORDS">
            <el-input
              v-model="searchForm.KEYWORDS"
              placeholder="请输入关键字"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="部门" prop="DEPARTMENT_ID">
            <layout-department v-model="searchForm.DEPARTMENT_ID" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="类型" prop="OTHERLEVELID">
            <el-select v-model="searchForm.OTHERLEVELID">
              <el-option
                v-for="item in riskClassificationList"
                :key="item.BIANMA"
                :label="item.NAME"
                :value="item.BIANMA"
              />
            </el-select>
          </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="fnResetPagination">
              重置
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <layout-table
      ref="tableRef"
      :data="list"
      v-model:pagination="pagination"
      @get-data="fnGetData"
      row-key="RISKCHECKITEM_ID"
    >
      <el-table-column reserve-selection type="selection" width="55" />
      <el-table-column label="序号" width="70">
        <template v-slot="{ $index }">
          {{ serialNumber(pagination, $index) }}
        </template>
      </el-table-column>
      <el-table-column prop="RISKUNITNAME" label="风险点（单元）" width="105" />
      <el-table-column prop="PARTSNAME" label="辨识部位" width="90" />
      <el-table-column prop="RISK_DESCR" label="存在风险" />
      <el-table-column prop="DNAME5" label="风险分级" width="100" />
      <el-table-column prop="USERNAME" label="管控负责人" width="90" />
      <el-table-column prop="CHECK_CONTENT" label="检查内容" />
    </layout-table>
    <template #footer>
      <el-button @click="fnClose">取消</el-button>
      <el-button type="primary" @click="fnSubmit"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useVModel } from "@vueuse/core";
import { debounce } from "throttle-debounce";
import LayoutDepartment from "@/components/department/index.vue";
import useListData from "@/assets/js/useListData.js";
import { getInventoryManagementOtherRiskList } from "@/request/hazard_investigation.js";
import { watch } from "vue";
import { serialNumber } from "@/assets/js/utils.js";
import { layoutFnGetRiskClassification } from "@/assets/js/data_dictionary.js";
import { differenceWith } from "lodash-es";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  listData: {
    type: Array,
    required: true,
    default: () => [],
  },
});
const emits = defineEmits(["update:visible", "submit"]);
const visible = useVModel(props, "visible", emits);
const { list, searchForm, pagination, fnGetData, fnResetPagination, tableRef } =
  useListData(getInventoryManagementOtherRiskList, { immediate: false });
const riskClassificationList = await layoutFnGetRiskClassification();
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, (a, b) => {
      return a.RISKCHECKITEM_ID === b.RISKCHECKITEM_ID;
    });
    fnClose();
    emits("submit", listData);
  },
  { atBegin: true }
);
</script>

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