<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/domain/components/DomainAccessTraffic.vue
 * @Date: 2022-08-31 14:15:59
 * @Description: 
 * @LastEditTime: 2023-08-31 20:21:48
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { defineProps } from 'vue'
import CommonCard from "../../../../components/CommonCard/CommonCard.vue";
import NumberProgressBarItem from "../../../../components/ProgressBar/NumberProgressBarItem.vue";

interface IComponentProps {
  title: string;
  list: any;
}

const { title = "", list = [] } = defineProps<IComponentProps>();

// list.value = Array.from({length: 10}).map((item,index) => {
//   return {
//     rank: index + 1,
//     name: '域名' + (index + 1),
//     value: Math.floor(Math.random() * 1000),
//     percentage: Math.floor(Math.random() * 100)
//   }
// })
</script>

<template>
  <CommonCard :title="title" class="domain-access-traffic">
    <div class="domain-access-traffic-content">
      <NumberProgressBarItem v-for="(item, index) in list" :key="`${item.name}-${index}-${item.value}`" :name="item.name"
        :number="item.rank" :value="item.value" :percentage="item.percentage" unit="GB" />
    </div>
  </CommonCard>
</template>

<style lang="scss" scoped>
.domain-access-traffic {
  width: 100%;
  height: 712px;

  .domain-access-traffic-content {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}
</style>
