<template>
  <el-dialog v-model="visible" title="选择通知人">
    <el-form
      :model="searchForm"
      label-width="100px"
      @submit.prevent="fnResetPagination"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="用户名/姓名" prop="KEYWORDS">
            <el-input v-model="searchForm.KEYWORDS" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <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"
      row-key="USER_ID"
      :data="list"
      @get-data="fnGetData"
    >
      <el-table-column reserve-selection type="selection" width="55" />
      <el-table-column label="序号" width="60">
        <template #default="{ $index }">
          {{ serialNumber(pagination, $index) }}
        </template>
      </el-table-column>
      <el-table-column prop="USERNAME" label="用户名" />
      <el-table-column prop="NAME" label="姓名" />
      <el-table-column prop="DEPARTMENT_NAME" label="部门" />
      <el-table-column prop="POST_NAME" label="岗位" />
    </layout-table>
    <template #footer>
      <el-button @click="fnClose">关闭</el-button>
      <el-button type="primary" @click="fnConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { useVModel } from "@vueuse/core";
import useListData from "@/assets/js/useListData.js";
import { getSelectNotifierList } from "@/request/notification_announcement.js";
import { serialNumber } from "@/assets/js/utils.js";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
});
const emits = defineEmits(["update:visible", "confirm"]);
const visible = useVModel(props, "visible", emits);
const { list, searchForm, pagination, tableRef, fnResetPagination, fnGetData } =
  useListData(getSelectNotifierList, { key: "userList" });
const fnClose = () => {
  visible.value = false;
};
const fnConfirm = () => {
  const selectionData = tableRef.value.getSelectionRows();
  const userIds = selectionData.map((item) => item.USER_ID).join(",");
  const userNames = selectionData.map((item) => item.NAME).join(",");
  emits("confirm", userIds, userNames);
  fnClose();
};
</script>

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