<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2024-01-11 14:27:58
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2024-01-24 11:31:56
 * @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 = [];
  arr.push({
    title: "系统消息" + (readStatus + 1),
    dateTime: "今天10:03:00",
    content: "A3号车间B01产线出现产品缺陷异常，请及时查看",
    status: 0
  });
  arr.push({
    title: "系统消息" + (readStatus + 1),
    dateTime: "今天11:22:00",
    content: "B1号车间监测有人员吸烟，请及时查看",
    status: 1
  });
  return arr;
  // for (let i = 0; i < 3; i++) {
  //   arr.push({
  //     title: "系统消息" + (readStatus + i),
  //     dateTime: "今天10:03:00",
  //     content: "A3号车间B01产线出现产品缺陷异常，请及时查看",
  //     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 notify_wrap">
    <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 class="px-[20px] h-[195px] overflow-y-auto">
          <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>
<style lang="scss">
.notify_wrap {
  .el-tabs__item {
    padding: 0 20px !important;
  }
}
</style>
