<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/overview/applicationType.vue
 * @Date: 2022-08-27 10:01:11
 * @Description: 
 * @LastEditTime: 2023-08-31 20:28:50
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import CommonCard from "../../../components/CommonCard/CommonCard.vue";
import CircularDiagram from "../../../components/chart/CircularDiagram/CircularDiagram.vue";
import BarChart from "../../../components/chart/BarChart/BarChart.vue";
import { ElScrollbar } from "element-plus";
import dayjs from "dayjs";
import { http } from "../../../utils/https";

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 handleSearch = (form) => {
  console.log(form);
  init();
};

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

const applicationChartData = ref([]) as any;
const applicationTitle = ref("应用流量分布TOP10");

const applicationLegendFormatter = (name) => {
  const findItem = unref(applicationChartData).findIndex(
    (item) => item.name === name
  );
  const _item = unref(applicationChartData)[findItem] as any;
  const _name = `{title|${name}}`;
  const percentage = `{subtitle|${_item.value}GB}`;
  return _name + percentage;
};

const userChartData = ref([]);
const userTitle = ref("用户规模分布TOP10");

const userLegendFormatter = (name) => {
  const findItem = unref(applicationChartData).findIndex(
    (item) => item.name === name
  );
  const _item = unref(applicationChartData)[findItem] as any;
  const _name = `{title|${name}}`;
  const percentage = `{subtitle|${_item.value}GB}`;
  return _name + percentage;
};

const accessXAxisData = ref([]) as any;

const accessChartData = ref([
  {
    name: "访问次数",
    data: [],
  },
]);

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 unitRef3 = ref("");
const tooltipValueFormatter3 = (val) => {
  return val + unref(unitRef3);
};
// 访问数量分布
const getAccessChart = async () => {
  const params = getSearchTime();
  const res = (await http.get(
    "/networkSafeDetect/flowPeview/application/userSum",
    params
  )) as any;
  if (res.code === 200 && res.data?.length) {
    const accessXAxisDataRes = res.data.map((item) => item.type);
    const _chartData = res.data.map((item) => item.userSum);
    unitRef3.value = res.data[0]?.unit || "";
    accessXAxisData.value = accessXAxisDataRes;
    unref(accessChartData)[0].data = _chartData;
  }
};

const unitRef2 = ref("");
const tooltipValueFormatter2 = (val) => {
  return val + unref(unitRef2);
};
// 用户规模分布
const getUserChart = async () => {
  const params = getSearchTime();
  const res = (await http.get(
    "/networkSafeDetect/flowPeview/application/scaleFlow",
    params
  )) as any;
  if (res.code === 200 && res.data?.length) {
    const _data = res.data.map((item) => {
      return {
        name: item.type,
        value: item.userSum,
        valueFormat: item.userSum + item.unit,
      };
    });
    unitRef2.value = res.data[0]?.unit || "";
    userChartData.value = _data;
  }
};

const unitRef = ref("");
const tooltipValueFormatter = (val) => {
  return val + unref(unitRef);
};

// 应用流量分布
const getTrafficChart = async () => {
  const params = getSearchTime();
  const res = (await http.get(
    "/networkSafeDetect/flowPeview/application/useFlow",
    params
  )) as any;
  if (res.code === 200 && res.data?.length) {
    const _data = res.data.map((item) => {
      return {
        name: item.type,
        value: item.userSum,
        valueFormat: item.userSum + item.unit,
      };
    });
    unitRef.value = res.data[0]?.unit || "";
    applicationChartData.value = _data;
  }
};

const init = () => {
  getAccessChart();
  getUserChart();
  getTrafficChart();
};

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

<template>
  <ElScrollbar>
    <div class="application-type-container">
      <YaSearch :formData="searchFormData" :formColumns="searchFormColumns" @search="handleSearch" @reset="handleReset">
      </YaSearch>
      <div class="custom-row">
        <CommonCard :title="applicationTitle">
          <CircularDiagram :tooltipValueFormatter="tooltipValueFormatter" :chartData="applicationChartData"
            :name="applicationTitle" :legendFormatter="applicationLegendFormatter" />
        </CommonCard>
        <CommonCard :title="userTitle" class="ml-16">
          <CircularDiagram :chartData="userChartData" :tooltipValueFormatter="tooltipValueFormatter2" :name="userTitle"
            :legendFormatter="userLegendFormatter" />
        </CommonCard>
      </div>
      <div class="custom-row mt-16">
        <CommonCard title="访问数量分布">
          <BarChart :tooltipValueFormatter="tooltipValueFormatter3" :chartData="accessChartData" title="访问次数/次"
            :xAxisData="accessXAxisData" />
        </CommonCard>
      </div>
    </div>
  </ElScrollbar>
</template>

<style lang="scss" scoped>
.application-type-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-width: 1362px;

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

  .custom-row {
    display: flex;
    width: 100%;
    height: calc((100vh - 56px - 40px - 48px - 12px - 16px - 16px) / 2);
  }
}
</style>
