<!--
 * @Author: 曹文丽 caowenli@yuan-info.com
 * @Date: 2023-03-06 16:37:07
 * @LastEditors: 曹文丽 caowenli@yuan-info.com
 * @LastEditTime: 2023-04-18 21:08:38
 * @FilePath: \yuan-huoling-browser\src\views\screen\components\highVulProcessItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { ref, onMounted, defineProps } from "vue";
import ProgressBar from "./ProgressBar.vue";
import { TOP_ICON } from "../constants";

interface BlockHeaderProps {
  number: String | Number;
  name: String;
  value: Number;
  percentage: Number;
}
const {
  number = "",
  name = "",
  value = "",
  percentage = "",
} = defineProps<BlockHeaderProps>();
const imgList = [
  `${TOP_ICON.RED}`,
  `${TOP_ICON.ORANGE}`,
  `${TOP_ICON.YELLOW}`,
  `${TOP_ICON.GREEN}`,
  `${TOP_ICON.BLUE}`,
];
</script>

<template>
  <div class="ya-progress-bar-box">
    <div class="ya-title">
      <div class="ya-title-left">
        <span class="ya-num">TOP{{ number }}</span>
        <img :src="imgList[number - 1]" alt="" />
        <yaTooltip
          :content="name"
          placement="top"
          trigger="hover"
          :enterable="false"
          :hide-after="0"
        >
          <span class="ya-name">{{ name }}</span>
        </yaTooltip>
      </div>
      <div class="ya-title-right">{{ value }}</div>
    </div>
    <ProgressBar :percentage="percentage" />
  </div>
</template>

<style scoped lang="scss">
.ya-progress-bar-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 17px;
  .ya-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 9px;
    .ya-title-left {
      display: flex;
      align-items: center;
      position: relative;
      img {
        width: 46px;
        height: 20px;
        vertical-align: middle;
        margin-right: 12px;
      }
      .ya-num {
        position: absolute;
        left: 7px;
        font-size: 12px;
        font-family: MicrosoftYaHei;
        font-weight: normal;
        color: #ffffff;
        transform: scale(0.833333);
      }
      .ya-name {
        width: 60%;
        font-size: 16px;
        font-family: MicrosoftYaHei;
        color: #ffffff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .ya-title-right {
      font-size: 18px;
      font-family: PangMenZhengDao;
      font-weight: bold;
      color: #e1e6f9;
    }
  }
}
</style>
