<template>
  <div class="work-box-3">
    <div class="work-2-flex">
      <Title1 title="消息统计" />
      <div class="statistics">
        <div class="statistics-item">
          <div class="flex align-center">
            <img class="statistics-item__icon" src="@/assets/images/dot-primary.svg" />
            <span class="statistics-item__label">今日消息总条数</span>
          </div>
          <div class="statistics-item__value--primary">
            <countup :end-val="countInfo.total" />
            <span class="statistics-item__value-suffix">条</span>
          </div>
        </div>
        <div class="statistics-item">
          <div class="flex align-center">
            <img class="statistics-item__icon" src="@/assets/images/dot-error.svg" />
            <span class="statistics-item__label">重要消息</span>
          </div>
          <div class="statistics-item__value--error">
            <countup :end-val="countInfo.important" />
            <span class="statistics-item__value-suffix">条</span>
          </div>
        </div>
        <div class="statistics-item">
          <div class="flex align-center">
            <img class="statistics-item__icon" src="@/assets/images/dot-warning.svg" />
            <span class="statistics-item__label">紧急消息</span>
          </div>
          <div class="statistics-item__value--warning">
            <countup :end-val="countInfo.warn" />
            <span class="statistics-item__value-suffix">条</span>
          </div>
        </div>
        <div class="statistics-item">
          <div class="flex align-center">
            <img class="statistics-item__icon" src="@/assets/images/dot-success.svg" />
            <span class="statistics-item__label">普通消息</span>
          </div>
          <div class="statistics-item__value--success">
            <countup :end-val="countInfo.normal" />
            <span class="statistics-item__value-suffix">条</span>
          </div>
        </div>
      </div>
      <div class="chart-box">
        <pie
          v-for="(item, index) in newsStateList"
          :key="index"
          :value="item.value"
          :label="item.name"
          :width="150"
          :height="150"
        />
      </div>
    </div>
    <div class="work-box-1">
      <Title1 title="消息情况" />
      <div class="list">
        <div class="item" v-for="(item, index) in list" :key="index">
          <span
            :class="{
              'label--primary': item.level == 'normal',
              'label--warning': item.level == 'warn',
              'label--error': item.level == 'important'
            }"
            >{{ item.level_text }}</span
          >
          <p>{{ item.title }}</p>
          <span class="time">{{ item.time }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import countup from 'vue-countup-v3'
  import pie from './pie.vue'
  import { getNewsListApi, getNewsStateApi, getNewsTotalApi } from '@/api/news'

  let list = ref([])
  let countInfo = ref({
    important: 0,
    normal: 0,
    total: 0,
    warn: 0
  })
  let newsStateList = ref([])
  const getNewsTotal = async () => {
    let res = await getNewsTotalApi()
    countInfo.value = res.data
  }
  const getNewsState = async () => {
    let res = await getNewsStateApi()
    newsStateList.value = res.data
    console.log(newsStateList.value, '=================')
  }
  const getNewsList = async () => {
    let res = await getNewsListApi()
    list.value = res.data
  }
  onMounted(() => {
    getNewsList()
    getNewsTotal()
    getNewsState()
  })
</script>

<style lang="scss" scoped>
  .work-box-3 {
    width: vw(840);
    margin-top: vh(120);
    margin-left: vw(8);

    .work-box-1 {
      padding: 0 vw(20);
      height: vh(566);
      display: flex;
      flex-direction: column;
      background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);

      .list {
        height: vh(500);
        overflow: auto;
        /* 滚动条整体样式 */
        &::-webkit-scrollbar {
          width: vw(4); /* 滚动条的宽度 */
        }
        /* 滚动条轨道 */
        &::-webkit-scrollbar-track {
          background: 'transparent'; /* 轨道的背景色 */
        }
        /* 滚动条滑块 */
        &::-webkit-scrollbar-thumb {
          background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
          border-radius: 5px; /* 滑块的圆角 */
        }
        .item:nth-child(odd) {
          background: rgba(3, 78, 153, 0.3);
        }
        .item:nth-child(even) {
          background-color: transparent;
        }
        .item {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding: vh(8) vh(10);
          .label {
            width: vw(60);
            height: vh(24);
            line-height: vh(24);
            color: #fff;
            border-radius: 2px 2px 2px 2px;
            font-size: vw(14);
            text-align: center;
            display: inline-block;
            margin-right: vw(10);
          }
          .label--primary {
            @extend .label;
            background: #2380fb;
          }
          .label--warning {
            @extend .label;
            background: #feae00;
          }
          .label--error {
            @extend .label;
            background: #d9011b;
          }
          .time {
            font-weight: 400;
            font-size: vw(12);
            color: rgba(255, 255, 255, 0.6);
            line-height: 14px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: vw(30);
          }
          p {
            font-weight: 400;
            font-size: vw(15);
            color: #ffffff;
            text-align: left;
            font-style: normal;
            text-transform: none;
            flex: 1;
            /*1. 先强制一行内显示文本*/
            white-space: nowrap;
            /*2. 超出的部分隐藏*/
            overflow: hidden;
            /*3. 文字用省略号替代超出的部分*/
            text-overflow: ellipsis;
          }
        }
      }
    }
    .work-2-flex {
      display: flex;
      flex-direction: column;
      height: vh(380);
      margin-bottom: vw(8);
      background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);

      .chart-box {
        padding: vw(20) vw(15);
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
      }

      .statistics {
        padding: 0 vw(20);
        display: flex;
        justify-content: space-around;
        &-item {
          font-weight: 400;
          font-size: vw(14);
        }
        &-item__icon {
          width: vw(24);
          height: vw(24);
        }
        &-item__label {
          color: #fff;
          font-size: vw(14);
        }
        &-item__value {
          position: relative;
          margin-top: vh(16);
          padding-left: vw(12);
          padding-bottom: vh(12);
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: vw(28);
          color: #fff;
          &--primary {
            @extend .statistics-item__value;
            color: #02f9fa;
            background-image: url('@/assets/images/mask-primary.png');
            background-size: 100% 100%;
          }
          &--error {
            @extend .statistics-item__value;
            background-image: url('@/assets/images/mask-error.png');
            background-size: 100% 100%;
          }
          &--warning {
            @extend .statistics-item__value;
            background-image: url('@/assets/images/mask-warning.png');
            background-size: 100% 100%;
          }
          &--success {
            @extend .statistics-item__value;
            background-image: url('@/assets/images/mask-success.png');
            background-size: 100% 100%;
          }
        }
        &-item__value-suffix {
          font-size: vw(12);
          margin-top: vh(6);
        }
      }
    }
  }
</style>
