<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import {Avatar, List, ListItem, ListItemMeta, Tag} from "ant-design-vue";

const userList = ref([]);
const unreadCount = ref(0);
const title = ref('通知的用户列表');
const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  footer: false,
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      const { values, unread_count } = modalApi.getData<Record<string, any>>();
      if (values) {
        userList.value = values;
        unreadCount.value = unread_count;
        if (unread_count > 0) {
          title.value = `通知的用户列表 - （${unread_count}个用户未读）`;
        } else {
          title.value = `通知的用户列表 - （全部已读）`;
        }
      }
    }
  },
});
</script>
<template>
  <Modal :title="title" class="w-[60%]">
    <List
      :bordered="true"
    >
      <ListItem v-for="item in userList">
        <ListItemMeta>
          <template #avatar>
            <Avatar :src="item.admin?.avatar">
              {{ item.admin?.nick_name.slice(0, 2) }}
            </Avatar>
          </template>
          <template #title>
            {{ item.admin?.nick_name }}
          </template>
        </ListItemMeta>
        <Tag v-if="item.status === 0" color="warning">未读</Tag>
        <Tag v-else-if="item.status === 1" color="success">已读</Tag>
      </ListItem>
    </List>
  </Modal>
</template>
