<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-01-11 14:27:58
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2024-01-12 17:44:57
 * @FilePath: \General-AI-Platform-Web-Client\src\views\workbench\components\Notify.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { ref } from "vue";
// import type { TabsPaneContext } from "element-plus";

defineOptions({
  name: "Notify"
});

//TODO 模拟数据

const urgencyStatus = [
  {
    label: "紧急",
    value: 0,
    color: "#E80D0D",
    bgColor: "rgba(232, 13, 13, 0.10)"
  },
  {
    label: "优先",
    value: 0,
    color: "#FE9A05",
    bgColor: "rgba(254, 154, 5, 0.10)"
  },
  {
    label: "普通",
    value: 0,
    color: "#52C41A",
    bgColor: "rgba(82, 196, 26, 0.10)"
  }
];

function fetchNoticeList(readStatus = 1) {
  const arr = [];
  for (let i = 0; i < 3; i++) {
    arr.push({
      title: "系统消息" + (readStatus + i),
      dateTime: "今天10:03:00",
      content: "您的产品使用期限即将截止，如需继续使用产品请前请去买",
      status: Math.floor(Math.random(0, 2.9) * 3)
    });
  }
  return arr;
}

const activeName = ref("1");

const noticeData = ref<Record<string, any>[]>([
  {
    label: "已读（10）",
    list: fetchNoticeList(1)
  },
  {
    label: "未读（15）",
    list: fetchNoticeList(4)
  }
]);
</script>

<template>
  <div class="w-full text-sm">
    <el-tabs v-model="activeName" class="w-full">
      <el-tab-pane
        v-for="(item, index) in noticeData"
        :key="index"
        :label="item.label"
        :name="index + ''"
      >
        <ul>
          <li v-for="(v, k) in item.list" :key="k" style="margin-bottom: 12px">
            <div class="flex items-center justify-between">
              <span class="font-bold" style="line-height: 22px">{{
                v.title
              }}</span>
              <span
                :style="{
                  backgroundColor: urgencyStatus[v.status].bgColor,
                  color: urgencyStatus[v.status].color,
                  padding: '0px 8px',
                  borderRadius: '4px',
                  borderRadius: '2px'
                }"
                >{{ urgencyStatus[v.status].label }}</span
              >
            </div>
            <div style="margin: 8px 0">{{ v.content }}</div>
            <div style="color: #999">{{ v.dateTime }}</div>
          </li>
        </ul>
      </el-tab-pane>
    </el-tabs>
    <div class="flex justify-center">
      <el-button type="primary">查看更多</el-button>
    </div>
  </div>
</template>
