<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/domain/components/DomainAccessVisit.vue
 * @Date: 2022-08-31 14:15:59
 * @Description: 
 * @LastEditTime: 2022-09-09 09:34:47
 * @LastEditors: changjun
-->
<script setup lang="ts">
import { defineProps } from 'vue'
import CommonCard from '../../../../components/CommonCard/CommonCard.vue'
import NumberPlateBlockItem from '../../../../components/ProgressBar/NumberPlateBlockItem.vue'


interface IComponentProps {
  title: string
  list: any
}

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

// const leftList = ref([]) as any
// const rightList = ref([]) as any

// const fakeData = Array.from({ length: 10 }).map((item, index) => {
//   return {
//     name: 'www.icloud.com',
//     count: '500',
//     rank: index + 1
//   }
// })

// leftList.value = fakeData.slice(0, 5)
// rightList.value = fakeData.slice(5)
</script>

<template>
  <CommonCard :title="title" class="domain-access-visit">
    <div class="domain-access-visit-con">
      <div class="left-block">
        <NumberPlateBlockItem v-for="item in list.slice(0, 5)" :count="item.count" :name="item.name"
          :number="item.rank" />
      </div>

      <div class="right-block">
        <NumberPlateBlockItem v-for="item in list.slice(5)" :count="item.count" :name="item.name" :number="item.rank" />
      </div>
    </div>
  </CommonCard>
</template>

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

  .domain-access-visit-con {
    display: flex;
    width: 100%;
    margin-top: 5px;

    .left-block {
      width: calc((100% - 100px) / 2);
    }

    .right-block {
      width: calc((100% - 100px) / 2);
      margin-left: 100px;
    }
  }
}
</style>
