<template>
  <n-popover
    v-if="badgeValue > 0"
    :style="{ paddingBottom: '0px' }"
    :show-arrow="false"
    placement="bottom-end"
    trigger="click"
    :width="350"
  >
    <template #trigger>
      <n-badge :max="15" :value="badgeValue" class="news-badge">
        <n-icon size="18">
          <BellOutlined />
        </n-icon>
      </n-badge>
    </template>
    <n-tabs
      v-model="activeName"
      class="my-tabs"
      @update:value="handleClick"
      justify-content="space-between"
    >
      <n-tab-pane
        v-for="(item, index) in messageTypeList"
        :key="index"
        :tab="item.name"
        :name="item.value"
      >
      </n-tab-pane>
    </n-tabs>
    <n-list>
      <n-list-item v-for="(item, index) in messageList" :key="index">
        <n-thing :title="item.title">
          <template #description
            ><span class="text-gray-400">{{ item.createTime }}</span></template
          >
        </n-thing>
      </n-list-item>
      <template #footer>
        <div class="flex justify-between">
          <n-button text>
            <template #icon>
              <n-icon>
                <TagsOutlined />
              </n-icon>
            </template>
            清空通知
          </n-button>
          <n-button text @click="router.push('/dashboard/message')">
            <template #icon>
              <n-icon class="mr-2"><MoreOutlined /></n-icon>
            </template>
            查看更多
          </n-button>
        </div>
      </template>
    </n-list>
  </n-popover>
  <template v-else>
    <n-icon size="18" @click="notifierProClick">
      <BellOutlined />
    </n-icon>
  </template>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { MoreOutlined, BellOutlined, TagsOutlined } from '@vicons/antd';
  import { useRouter } from 'vue-router';
  import { getMessageProfile, setRead } from '@/api/dashboard/message';
  const router = useRouter();
  const messageTypeList = ref([
    {
      name: '系统通知',
      value: 1,
    },
    {
      name: '用户私信',
      value: 2,
    },
    {
      name: '代办事项',
      value: 3,
    },
  ]);

  const badgeValue = ref(28);
  const activeName = ref(1);
  const messageList = ref([]);

  const handleClick = async (e) => {
    activeName.value = e;
    const res = await getMessageProfile({ type: activeName.value, pageNo: 1, pageSize: 10 });
    messageList.value = res.records ? res.records : [];
  };
  onMounted(async () => {
    const res = await getMessageProfile({ type: activeName.value, pageNo: 1, pageSize: 10 });
    messageList.value = res.records ? res.records : [];
  });
</script>
<style lang="less" scoped>
  .news-badge {
    :deep(.n-badge-sup) {
      top: -10px;
    }
  }
  .c-gray {
    color: #dddddd;
  }
  .border-line {
    border-bottom: 1px solid #dddddd;
  }
</style>
