<template>
  <el-dialog v-model="visible" title="选择人员" width="1500">
    <el-form
      :model="searchForm"
      label-width="90px"
      @submit.prevent="fnResetPagination"
    >
      <el-row>
        <el-col :span="5">
          <el-form-item label="关键字" prop="KEYWORDS">
            <el-input
              v-model="searchForm.KEYWORDS"
              placeholder="请输入关键字"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="从业类型" prop="PRACTITIONERTYPE">
            <el-select
              v-model="searchForm.PRACTITIONERTYPE"
              placeholder="请选择从业类型"
            >
              <el-option
                v-for="item in PERSONTYPEMENU"
                :key="item.id"
                :label="item.id"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <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"
      v-model:pagination="pagination"
      :data="list"
      row-key="RISKCHECKITEM_ID"
      @get-data="fnGetData"
    >
      <el-table-column reserve-selection type="selection" width="55" />
      <el-table-column label="序号" width="70">
        <template #default="{ $index }">
          {{ serialNumber(pagination, $index) }}
        </template>
      </el-table-column>
      <el-table-column prop="USER_ID" label="用户Id" />
      <el-table-column prop="NAME" label="姓名" />
      <el-table-column prop="DEPARTMENT_NAME" label="部门" />
      <el-table-column prop="PRACTITIONERTYPE" label="从业类型" />
    </layout-table>
    <template #footer>
      <el-button @click="fnClose">取消</el-button>
      <el-button type="primary" @click="fnAllSubmit"> 全选 </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 useListData from "@/assets/js/useListData.js";
import { watch } from "vue";
import { serialNumber } from "@/assets/js/utils.js";
import { differenceWith } from "lodash-es";
import { getUserListAll } from "@/request/safety_production_related.js";
import { PERSONTYPEMENU } from "@/assets/js/constant.js";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  listData: {
    type: Array,
    required: true,
    default: () => [],
  },
});
const emits = defineEmits(["update:visible", "submit", "submitall"]);
const visible = useVModel(props, "visible", emits);

const { list, searchForm, pagination, fnGetData, fnResetPagination, tableRef } =
  useListData(getUserListAll, {
    key: "userList",
    immediate: false,
    clearSelection: false,
  });

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) => a.RISKCHECKITEM_ID === b.RISKCHECKITEM_ID
    );
    fnClose();
    emits("submit", listData);
  },
  { atBegin: true }
);

const fnAllSubmit = () => {
  fnClose();
  emits("submitall", list);
};
</script>

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