<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 label="通知（1）" name="notice">
        <ul class="mx-3">
          <li class="flex items-center py-3 border-line" v-for="i in 3" :key="i">
            <el-avatar class="flex-shrink-0" :size="40" />
            <dl class="min-w-0 ml-3">
              <dt class="mb-1 text-sm truncate"
                >约翰.维尔逊回复了你的邮件约翰.维尔逊回复了你的邮件</dt
              >
              <dd class="text-xs c-gray">2022-01-08 14:33:18</dd>
            </dl>
          </li>
        </ul>
        <div class="mt-4 mb-1 text-center"
          ><el-link href="javascript:;" :underline="false" class="link"
            ><el-icon class="mr-2"><delete /></el-icon>清空通知</el-link
          ></div
        >
      </el-tab-pane>
      <el-tab-pane label="关注（2）" name="follow">
        <ul class="mx-3">
          <li class="flex items-center py-3 border-line" v-for="i in 3" :key="i">
            <el-avatar class="flex-shrink-0" :size="40" />
            <dl class="min-w-0 ml-3">
              <dt class="mb-1 text-sm truncate">约翰.维尔逊关注了你</dt>
              <dd class="text-xs c-gray">2022-01-08</dd>
            </dl>
          </li>
        </ul>
        <div class="mt-4 mb-1 text-center"
          ><el-link href="link" :underline="false" class="link"
            ><el-icon class="mr-2"><delete /></el-icon>清空关注</el-link
          ></div
        >
      </el-tab-pane>
      <el-tab-pane label="待办（3）" name="needto">
        <ul class="mx-3">
          <li class="flex items-center justify-between py-3 border-line">
            <dl class="min-w-0 ml-3">
              <dt class="mb-1 text-sm truncate">技术部约翰.维尔逊申请离职</dt>
              <dd class="text-xs c-gray">请在24小时之前完成</dd>
            </dl>
            <div class="flex-none"><el-tag type="danger">即将超时</el-tag></div>
          </li>
          <li class="flex items-center justify-between py-3 border-line">
            <dl class="min-w-0 ml-3">
              <dt class="mb-1 text-sm truncate">统计年后人员和物资</dt>
              <dd class="text-xs c-gray">请在2021-08-31号之前完成</dd>
            </dl>
            <div class="flex-none"><el-tag type="success">进行中</el-tag></div>
          </li>
          <li class="flex items-center justify-between py-3 border-line">
            <dl class="min-w-0 ml-3">
              <dt class="mb-1 text-sm truncate">回访上月全部客户</dt>
              <dd class="text-xs c-gray">请在2021-08-28号之前完成</dd>
            </dl>
            <div class="flex-none"><el-tag type="warning">未开始</el-tag></div>
          </li>
        </ul>
        <div class="mt-4 mb-1 text-center"
          ><el-link href="link" :underline="false" class="link"
            ><el-icon class="mr-2"><delete /></el-icon>清空待办</el-link
          ></div
        >
      </el-tab-pane>
    </el-tabs>
  </el-popover>
  <template v-else>
    <el-icon :size="18"><bell /></el-icon>
  </template>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Bell, Delete } from '@element-plus/icons-vue';

  const badgeValue = ref(28);
  const activeName = ref('notice');

  const handleClick = (tab: string, event: Event) => {
    console.log(tab, event);
  };
</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>
