<template>
  <el-dialog v-model="visible" title="查看状态">
    <layout-table
      v-model:pagination="pagination"
      :data="list"
      @get-data="fnGetDataTransfer"
    >
      <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 label="阅读状态">
        <template #default="{ row }">
          {{ row.TYPE === 0 ? "未阅" : "已阅" }}
        </template>
      </el-table-column>
      <el-table-column prop="CREATOR" label="阅读时间" />
    </layout-table>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

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

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  id: {
    type: String,
    required: true,
    default: "",
  },
});
const emits = defineEmits(["update:visible"]);
const visible = useVModel(props, "visible", emits);
const { list, pagination, fnResetPagination, fnGetData } = useListData(
  getNotificationAnnouncementViewStatusList,
  {
    immediate: false,
  }
);
const fnGetDataTransfer = () => {
  fnGetData({ NOTICECORP_ID: props.id });
};
watchEffect(() => {
  if (visible.value) {
    fnResetPagination({ NOTICECORP_ID: props.id });
  }
});
</script>

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