<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/overview/components/IndicatorMap.vue
 * @Date: 2022-08-27 10:39:57
 * @Description: 
 * @LastEditTime: 2023-08-31 20:24:03
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import ProvincesMap from "../../../../components/chart/map/ProvincesMap.vue";
import CommonCard from "../../../../components/CommonCard/CommonCard.vue";
import { http } from "../../../../utils/https/index";
const _API = "/networkSafeDetect/flowPeview/overAll/areaCount";
const chartData = ref([]);

const tooltipFormatter = function (params) {
  const _data = params.data || {
    netizencount: 0,
    upriverCount: "0G",
    downriverCount: "0G",
    flowCount: "0G",
    connectCount: 0,
  };
  return `<div class="light-map-tip-box">
      <div class="light-map-tip-box-name">${params.name}</div>
      <div class="light-map-tip-box-content">
        <div class="light-map-tip-box-item">
          <div class="light-map-tip-box-label">网民数</div>
          <div class="light-map-tip-box-value">${_data.netizencount || 0}</div>
        </div>
        <div class="light-map-tip-box-item">
          <div class="light-map-tip-box-label">上行流量</div>
          <div class="light-map-tip-box-value">${_data.upriverCount || "0G"
    }</div>
        </div>
        <div class="light-map-tip-box-item">
          <div class="light-map-tip-box-label">下行流量</div>
          <div class="light-map-tip-box-value">${_data.downriverCount || "0G"
    }</div>
        </div>
        <div class="light-map-tip-box-item">
          <div class="light-map-tip-box-label">总流量</div>
          <div class="light-map-tip-box-value">${_data.flowCount || "0G"}</div>
        </div>
        <div class="light-map-tip-box-item">
          <div class="light-map-tip-box-label">连接数</div>
          <div class="light-map-tip-box-value">${_data.connectCount || 0}</div>
        </div>
      </div>
      
    </div>`;
};

const handleInterFaceData = (list) => {
  return list.map((item) => {
    return {
      name: item.city,
      value: item.netizencount,
      ...item,
    };
  });
};

const init = async () => {
  const res = (await http.get(_API)) as any;
  if (res.code === 200 && res.data) {
    chartData.value = handleInterFaceData(res.data);
    console.log("chartData", chartData.value);
  }
};

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

<template>
  <CommonCard title="全省指标统计地图" class="shandong-map">
    <ProvincesMap autotip :chartData="chartData" :tooltipFormatter="tooltipFormatter" />
  </CommonCard>
</template>

<style scope lang="scss">
.shandong-map {
  width: 100%;
}

.light-map-tip-box {
  position: relative;
  top: 20px;
}
</style>
