<template>
  <el-popover
    popper-class="notifier-popover"
    placement="bottom-end"
    :width="340"
    trigger="hover"
    v-if="badgeValue > 0"
  >
    <template #reference>
      <el-badge :max="15" :value="badgeValue" is-dot class="bell-badge">
        <el-icon :size="18"><bell /></el-icon>
      </el-badge>
    </template>
    <el-tabs v-model="activeName" class="my-tabs" @tab-click="handleClick" :stretch="true">
      <el-tab-pane v-for="(item,index) in messageTypeList" :key="index" :label="item.name" :name="item.value">
      </el-tab-pane>
      <ul class="mx-3">
          <li class="flex items-center py-3 border-line" v-for="(item,index) in messageList" :key="index">
            <dl class="min-w-0 ml-3">
              <dt class="mb-1 text-sm truncate">{{item.title}}</dt>
              <dd class="text-xs c-gray">{{item.createTime}}</dd>
            </dl>
          </li>
        </ul>
        <div class="flex items-center justify-between mt-4 mb-1">
          <el-link href="javascript:;" :underline="false" class="link">
            <el-icon class="mr-2"><delete /></el-icon>清空通知
          </el-link>
          <el-link href="javascript:;" :underline="false" class="link" @click="router.push('/dashboard/message')">
            <el-icon class="mr-2"><MoreFilled /></el-icon>查看更多
          </el-link>
        </div>
    </el-tabs>
  </el-popover>
  <template v-else>
    <el-icon :size="18"><bell /></el-icon>
  </template>
</template>

<script lang="ts" setup>
  import { ref,onMounted } from 'vue';
  import { Bell, Delete } from '@element-plus/icons-vue';
  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 (tab: string, event: Event) => {
    activeName.value = tab.props.name
    const res = await getMessageProfile({type:activeName.value,pageNo:1,pageSize:10})
    messageList.value = res.records?res.records:[]
    // messageList.value =result
    // let item = messageTypeList.value.find((item,index)=>item.value==activeName.value)
    // item.number = result.number
  };
  onMounted(async ()=>{
    const res = await getMessageProfile({type:activeName.value,pageNo:1,pageSize:10})
    messageList.value = res.records?res.records:[]
  })
  
</script>

<style lang="scss">
  body .el-popover.notifier-popover {
    padding-left: 20px;
    padding-right: 20px;
  }
</style>
<style lang="scss" scoped>
  .bell-badge {
    position: relative;
    top: 4px;
  }
  .c-gray {
    color: var(--el-color-info-light-3);
  }
  .border-line {
    border-bottom: 1px solid var(--el-border-color-base);
  }
</style>
