<template>
  <el-dialog v-model="visible" title="配置" :on-close="fnClose">
    <layout-table
      ref="tableRef"
      v-model:pagination="pagination"
      row-key="USER_ID"
      :data="list"
      @get-data="fnGetDataTransfer"
    >
      <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="fnSubmit"> 确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import useListData from "@/assets/js/useListData.js";
import { serialNumber } from "@/assets/js/utils.js";
import { useVModel } from "@vueuse/core";
import { debounce } from "throttle-debounce";
import { ElMessage, ElMessageBox } from "element-plus";
import { nextTick, ref, watch } from "vue";
import {
  setNotificationTemplateConfigurationConfigure,
  setNotificationTemplateConfigurationConfigureList,
} from "@/request/notification_announcement.js";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  noticeManagementId: {
    type: String,
    required: true,
    default: "",
  },
  noticeTemplateId: {
    type: String,
    required: true,
    default: "",
  },
});
const emits = defineEmits(["update:visible", "get-data"]);
const visible = useVModel(props, "visible", emits);
const checkUserList = ref([]);
const { list, pagination, fnGetData, fnResetPagination, tableRef } =
  useListData(setNotificationTemplateConfigurationConfigureList, {
    immediate: false,
    clearSelection: false,
    key: "userList",
    callbackFn: (list, resData) => {
      checkUserList.value = resData.checkuserList;
    },
  });
const fnGetDataTransfer = () => {
  fnGetData({ NOTICE_MANAGEMENT_ID: props.noticeManagementId });
};
const fnResetPaginationTransfer = async () => {
  await fnResetPagination({ NOTICE_MANAGEMENT_ID: props.noticeManagementId });
};
const fnInit = async () => {
  await fnResetPaginationTransfer();
  await nextTick();
  checkUserList.value.forEach((item) => {
    tableRef.value.toggleRowSelection(item);
  });
  fnResetPaginationTransfer();
};
watch(
  () => props.visible,
  (val) => {
    if (val) {
      fnInit();
    }
  }
);
const fnClose = () => {
  tableRef.value.clearSelection();
  visible.value = false;
};
const fnSubmit = debounce(
  1000,
  async () => {
    const selectionData = tableRef.value.getSelectionRows();
    if (selectionData.length === 0) {
      ElMessage.warning("请选择要发送的用户");
      return;
    }
    const ADDRESSEE = selectionData.map((item) => item.USER_ID).join(",");
    const USERNAME = selectionData.map((item) => item.NAME).join(",");
    await ElMessageBox.confirm(
      `确定要发送短信给<span class="text-green">${USERNAME.split(",").join(
        "、"
      )}</span>吗？`,
      {
        type: "warning",
        dangerouslyUseHTMLString: true,
      }
    );
    await setNotificationTemplateConfigurationConfigure({
      NOTICE_MANAGEMENT_ID: props.noticeManagementId,
      NOTICETEMPLATE_ID: props.noticeTemplateId,
      ADDRESSEE,
      USERNAME,
    });
    ElMessage.success("保存成功");
    fnClose();
    emits("get-data");
  },
  { atBegin: true }
);
</script>

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