<!--
 * @Author: tqh
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/website/components/accesstTraffic.vue
 * @Date: 2022-09-01 09:00:59
-->
<script setup lang="ts">
import { ref, defineProps, 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,
});
watch(
  () => props.LIST,
  (val, preVal) => {
    list.value = val.map((item, index) => {
      return {
        rank: index + 1,
        name: item.websiteName,
        value: item.netWorkSum,
        percentage: Number(item.percentage.replace("%", "")),
      };
    });
  }
);
</script>
<template>
  <CommonCard title="全省网站被访问量TOP10" class="access-traffic" unit="次">
    <div class="access-traffic-content" v-if="list.length > 0">
      <NumberProgressBarItem v-for="(item, index) in list" :key="`${item.name}-${index}`" :name="item.name"
        :number="item.rank" :value="item.value" :percentage="item.percentage" />
    </div>
    <ya-empty v-else></ya-empty>
  </CommonCard>
</template>

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

  .access-traffic-content {
    width: 100%;
    height: 100%;
    padding-top: 15px;
    display: flex;
    flex-direction: column;
    // justify-content: space-around;
  }
}

::v-deep .progress-bar-box {
  // margin-top: 18px !important;
}

.no-data {
  .img1 {
    width: 200px;
    height: 160px;
  }

  margin: 20% auto;
  text-align: center;
  color: #96a2b5;
  font-size: 14px;
}
</style>
