<template>
  <div class="attackerTop5">
    <div class="title-box">
      <div class="title">
        <div>攻击者 IPTOP5</div>
      </div>
      <div class="ya_right">
        <div class="unit">
          <div>单位：次</div>
        </div>
      </div>
    </div>
    <div class="attackerTop5" v-if="props.LIST.length > 0">
      <NumberProgressBarItem v-for="(item, index) in props.LIST" :key="`${item.name}-${index}`" :name="item.name"
        :number="item.rank" :value="item.value" :percentage="item.percentage" />
    </div>
    <ya-empty v-else></ya-empty>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import CommonCard from '../../../components/CommonCard/CommonCard.vue';
import NumberProgressBarItem from '../../../components/ProgressBar/NumberProgressBarItem.vue';
const list = ref([]) as any;
const props = defineProps({
  LIST: Array,
});
</script>
<style lang="scss" scoped>
::v-deep .title-center {
  flex: auto !important;
}

.attackerTop5 {
  box-sizing: border-box;
  padding-top: 24px;
  height: 100%;

  ::v-deep .progress-center {
    margin-top: 26px;
    box-sizing: border-box;

    .number-plate-progress {
      margin-left: 8px;
    }

    .progress-bar-box {
      .bottom {
        margin-top: 12px;
      }
    }
  }

  ::v-deep .progress-center:nth-child(1) {
    margin-top: 0;
  }

  .title-box {
    min-width: 0;
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: baseline;
    background-image: url('../../../assets/image/card/card-title-bg.png');
    background-repeat: no-repeat;
    background-size: 101px 100%;

    .title {
      font-size: 18px;
      font-weight: 400;
      font-family: YouSheBiaoTiHei;
      color: #1ad7ff;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-shadow: 0px 0px 7px rgba(5, 252, 255, 0.64);
      background: linear-gradient(180deg, #ffffff 0%, #1ad7ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
      margin-left: 40px;
      border-bottom: 1px solid #1ad7ff;
      margin-bottom: 1px;
      height: 32px;
      display: flex;
      justify-content: space-between;
    }

    .unit {
      font-size: 14px;
      flex: 1;
      font-weight: 400;
      color: #8cecff;
      width: 73px;
      text-align: center;
    }
  }
}

::v-deep .number-box {
  width: 70px;
  height: 25px;
}

::v-deep .ya-table-empty-slot {
  position: relative;
}
</style>
