<template>
  <div class="table">
    <div class="header">
      <p>排名</p>
      <p>媒体/账号名称</p>
      <p>媒体类型</p>
      <p>总条数</p>
      <p>敏感舆情</p>
    </div>
    <div class="list">
      <div class="cell" v-for="(item, index) in list" :key="index">
        <p>
          <span
            class="index"
            :class="{ first: item.rank == 1, second: item.rank == 2, third: item.rank == 3 }"
          >
            {{ item.rank }}
          </span>
        </p>
        <p>
          <span class="name">{{ item.title }}</span>
        </p>
        <p>
          <span class="name">{{ item.type }}</span>
        </p>
        <p>
          <span class="number">{{ item.num }}</span>
        </p>
        <p>
          <span class="status">{{ item.num_sensitive }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { getMediaTypeApi } from '@/api/sentiment.js'

  let list = ref([])
  const getMediaType = async () => {
    let res = await getMediaTypeApi()
    list.value = res.data
  }
  onMounted(() => {
    getMediaType()
  })
</script>

<style scoped lang="scss">
  .table {
    padding: 0 vw(20);
    .header {
      display: flex;
      font-weight: 400;
      font-size: vw(13);
      color: #0084ff;
      height: vh(40);
      align-items: center;
      background: rgba(3, 78, 153, 0.3);
      & > p {
        flex: 1;
        color: #ffffff;
        text-align: center;
      }
    }
    .list {
      overflow-y: auto;
      height: vh(370);
      /* 滚动条整体样式 */
      &::-webkit-scrollbar {
        width: vw(4); /* 滚动条的宽度 */
      }
      /* 滚动条轨道 */
      &::-webkit-scrollbar-track {
        background: 'transparent'; /* 轨道的背景色 */
      }
      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
        border-radius: 5px; /* 滑块的圆角 */
      }
      // /* 当鼠标悬停在滚动条上时滑块的样式 */
      // &::-webkit-scrollbar-thumb:hover {
      //   background: #555; /* 滑块的背景色 */
      // }
      .cell {
        height: vh(40);
        display: flex;
        align-items: center;
        &:nth-child(2n) {
          background: rgba(3, 78, 153, 0.3);
        }
        & > p {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .index {
          display: inline-block;
          width: vw(40);
          height: vh(24);
          font-weight: 400;
          font-size: vw(12);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: vw(2);
          background-color: #495c77;
        }
        .first {
          @extend .index;
          background-color: #d9011b;
        }
        .second {
          @extend .index;
          background-color: #feae00;
        }
        .third {
          @extend .index;
          background-color: #2380fb;
        }
        .name {
          font-weight: 400;
          font-size: vw(15);
          color: #ffffff;
        }
        .number {
          font-weight: 400;
          font-size: vw(15);
          color: #02f9fa;
        }
        .status {
          font-weight: 400;
          font-size: vw(15);
          color: #e21b1b;
        }
      }
    }
  }
</style>
