<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/domain/serviceStatistic.vue
 * @Date: 2022-08-31 10:40:49
 * @Description: 
 * @LastEditTime: 2023-08-31 20:09:48
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { ElScrollbar } from "element-plus";
import { useGetChartData } from "../../../components/chart/logic";
import DomainAccessMap from "./components/DomainAccessMap.vue";
import DomainAccessFeature from "./components/DomainAccessFeature.vue";
import DomainAccessTraffic from "./components/DomainAccessTraffic.vue";
import DomainAccessVisit from "./components/DomainAccessVisit.vue";
import dayjs from "dayjs";
import { mapNameJoint } from "../../../components/chart/options";

const title = "域名访问分布地图";
const title2 = "域名访问流量TOP10";
const title3 = "域名访问特征TOP10";
const title4 = "域名访问次数TOP10";
const MODULE_API = "networkSafeDetect/";
const API_MAP = {
  域名访问分布地图: "domainSafe/domainServer/domainRegionStat",
  域名访问流量TOP10: "domainSafe/domainServer/domainAccessFlowStat",
  域名访问特征TOP10: "domainSafe/domainServer/domainAccessFeature",
  域名访问次数TOP10: "domainSafe/domainServer/domainAccessCountStat",
};

const searchFormData = reactive({
  time: [],
});
const searchFormColumns = reactive([
  {
    key: "time",
    type: "daterange",
    label: "时间",
    format: "YYYY-MM-DD",
    valueFormat: "YYYY-MM-DD",
    col: 24,
    startPlaceholder: "开始时间",
    endPlaceholder: "结束时间",
  },
]);

const getSearchTime = () => {
  const time = searchFormData.time;
  if (time.length === 0) {
    return {
      startTime: dayjs(new Date()).format("YYYY-MM-DD") + " 00:00:00",
      endTime: dayjs(new Date()).format("YYYY-MM-DD") + " 23:59:59",
    };
  }
  return {
    startTime: time[0] + " 00:00:00",
    endTime: time[1] + " 23:59:59",
  };
};

const mapChartData = ref([]) as any;

const getMapRes = (res) => {
  return res.map((item) => {
    return {
      name: mapNameJoint(item.city),
      value: Number(item.totalFlow),
      unit: item.unit || "",
    };
  });
};

// 域名访问分布地图
const getMapData = async () => {
  const params = getSearchTime();
  const res = await useGetChartData(
    MODULE_API + API_MAP[title],
    getMapRes,
    params
  );
  if (!res) return;
  mapChartData.value = res;
};

const featureChartData = ref([]) as any;
const handleFeatureRes = (list) => {
  return list.map((item) => {
    return {
      ...item,
      name: item.domain,
      value: Number(item.totalCount),
      valueFormat: Number(item.totalCount) + "GB",
    };
  });
};
// 域名访问特征TOP10
const getFeatureChartData = async () => {
  const params = getSearchTime();
  const res = await useGetChartData(
    MODULE_API + API_MAP[title3],
    handleFeatureRes,
    params
  );
  if (!res) return;
  featureChartData.value = res;
};

// 域名访问流量TOP10
const trafficListData = ref([]) as any;
const handleTrafficRes = (list) => {
  const maxCount = list[0].accessFlow;
  return list
    .map((item, index) => {
      return {
        ...item,
        rank: index + 1,
        name: item.domainName,
        value: Number(item.accessFlow),
        percentage: (Number(item.accessFlow) / maxCount) * 100,
      };
    })
    .slice(0, 10);
};
const getTrafficList = async () => {
  const params = getSearchTime();
  const res = await useGetChartData(
    MODULE_API + API_MAP[title2],
    handleTrafficRes,
    params
  );
  trafficListData.value = res;
};

// 域名访问次数TOP10
const accessCountListData = ref([]) as any;
const handleAccessCountRes = (list) => {
  return list
    .map((item, index) => {
      return {
        ...item,
        rank: index + 1,
        name: item.domainName,
        count: Number(item.accessCount),
      };
    })
    .slice(0, 10);
};
const getAccessCount = async () => {
  const params = getSearchTime();
  const res = await useGetChartData(
    MODULE_API + API_MAP[title4],
    handleAccessCountRes,
    params
  );
  accessCountListData.value = res;
};

const handleSearch = (form) => {
  console.log(form);
  init();
};

const handleReset = () => {
  init();
};

const init = () => {
  getMapData();
  getFeatureChartData();
  getTrafficList();
  getAccessCount();
};

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

<template>
  <ElScrollbar>
    <div class="service-statistic-container">
      <YaSearch :formData="searchFormData" :formColumns="searchFormColumns" @search="handleSearch" @reset="handleReset">
      </YaSearch>
      <div class="top-module">
        <div class="left">
          <DomainAccessMap :title="title" :chartData="mapChartData" />
          <DomainAccessFeature :title="title3" :chartData="featureChartData" class="mt-16" />
        </div>
        <div class="right">
          <DomainAccessTraffic :title="title2" :list="trafficListData" />
        </div>
      </div>
      <div class="bottom-module mt-16">
        <DomainAccessVisit :title="title4" :list="accessCountListData" />
      </div>
      <div class="empty-block">1</div>
    </div>
  </ElScrollbar>
</template>

<style lang="scss" scoped>
.service-statistic-container {
  width: 100%;
  min-width: 1200px;
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  :deep(.ya-table-search-left) {
    width: 100%;
  }

  .top-module {
    display: flex;
    width: 100%;
    gap: 16px;

    .left {
      display: flex;
      flex-direction: column;
      width: 48%;
    }

    .right {
      width: 52%;
    }
  }

  .bottom-module {
    width: 100%;
  }
}

.empty-block {
  width: 100%;
  height: 200px;
  color: transparent;
}
</style>
