<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/overview/components/TrafficStatistical.vue
 * @Date: 2022-08-27 14:55:15
 * @Description: 
 * @LastEditTime: 2023-08-31 20:24:39
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import CommonCard from '../../../../components/CommonCard/CommonCard.vue'
import { ICONS } from './constans'
import { http } from '../../../../utils/https/index'

const _API = '/networkSafeDetect/flowPeview/overAll/flow/area'

let list = ref([
  {
    name: '网民数',
    count: '0',
    color: '#4E9B40',
  },
  {
    name: '网站数',
    count: '0',
    color: '#45BCCA'
  },
  {
    name: '连接数',
    count: '0',
    color: '#0095FF'
  },
  {
    name: '总流量',
    count: '0',
    color: '#677DFF'
  },
  {
    name: '上行流量',
    count: '0',
    color: '#9E7AFE'
  },
  {
    name: '下行流量',
    count: '0',
    color: '#FE7F09'
  }
])


function setCount(name, val) {
  console.log(val)
  const findIndex = unref(list).findIndex((item) => item.name === name)
  unref(list)[findIndex].count = val
}


const init = async () => {
  const res = await http.get(_API) as any
  if (res.code === 200) {
    const result = res?.data
    setCount('网民数', result?.netizencount)
    setCount('网站数', result?.websiteCount)
    setCount('连接数', result?.connectCount)
    setCount('总流量', result?.flowCount)
    setCount('上行流量', result?.upriverCount)
    setCount('下行流量', result?.downriverCount)
  }
}

onMounted(() => {
  init()
})
</script>

<template>
  <CommonCard title="全省流量统计" class="traffic-statistical">
    <div class="traffic-statistical-con">
      <div class="item" v-for="(item, index) in list" :key="index">
        <img :src="ICONS[item.name]" alt="" class="icon-img">

        <div class="item-count" :style="`color: ${item.color}`">{{ item.count }}</div>

        <div class="item-desc ya-regular-text">{{ item.name }}</div>

      </div>
    </div>
  </CommonCard>
</template>

<style lang="scss" scoped>
.traffic-statistical-con {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 22px 22px 0 22px;
  box-sizing: border-box;
  justify-content: space-between;

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .icon-img {
      width: 64px;
      height: 64px;
      flex-shrink: 0;
    }

    .item-count {
      margin-top: 16px;
      font-size: 16px;
      font-weight: bold;
    }

    .item-desc {
      margin-top: 10px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
    }

  }
}
</style>
