<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/domain/DGADomainAnalysis.vue
 * @Date: 2022-08-31 11:14:43
 * @Description: 
 * @LastEditTime: 2023-08-31 10:50:33
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import CommonCardVue from "../../../components/CommonCard/CommonCard.vue";
import BarChart from "../../../components/chart/BarChart/BarChart.vue";
import ProgressBarItem from "../../../components/ProgressBar/ProgressBarItem.vue";
import LineChart from "../../../components/chart/LineChart/LineChart.vue";
import CircularDiagram from "../../../components/chart/CircularDiagram/CircularDiagram.vue";
import ProgressBar from "../../../components/ProgressBar/ProgressBar.vue";
import { useGetChartData } from "../../../components/chart/logic";
import { getThemeColor } from "../../../components/chart/options/theme";
const MODULE_API = "networkSafeDetect/";
const _API_MAP = {
  近一周全省DGA域名被访问统计: "domainSafe/dgaDomainAnalyse/dgaOneWeek",
  昨日DGA域名被访问TOP5: "domainSafe/dgaDomainAnalyse/dgaDomainAccessStat",
  昨日DGA家族域名数量TOP5: "domainSafe/dgaDomainAnalyse/dgaTypeStat",
  昨日被感染主机地市分布TOP10: "domainSafe/dgaDomainAnalyse/dgaHostCityStat",
};

const title1 = ref("近一周全省DGA域名被访问统计");
const title2 = ref("昨日DGA域名被访问TOP5");
const title3 = ref("昨日DGA家族域名数量TOP5");
const title4 = ref("昨日被感染主机地市分布TOP10");

let barChartData = ref([]) as any;
let barXAxisData = ref([]) as any;

let barChartData1 = ref([]) as any;
let barXAxisData1 = ref([]) as any;

const handleResChartData = (res) => {
  let xAxisData = [] as any;
  let chartData = [
    { name: "访问次数（次）", data: [] },
    { name: "访问IP数量（个）", data: [] },
  ] as any;

  let accessData: number[] = [];
  let ipCountData: number[] = [];

  res.forEach((item) => {
    xAxisData.push(item.accessTime);
    accessData.push(Number(item.accessCount));
    ipCountData.push(Number(item.ipCount));
  });
  chartData[0].data = accessData;
  chartData[1].data = ipCountData;
  return { xAxisData, chartData };
};

const getBarChartData = async () => {
  const { xAxisData, chartData } = await useGetChartData(
    MODULE_API + _API_MAP[title1.value],
    handleResChartData
  );
  barXAxisData.value = xAxisData;
  barChartData.value = chartData;
  console.log(xAxisData);
  console.log(chartData);
};

const homeDomainList = ref([]) as any;

const handleHomeResData = (res = []) => {
  const maxCount = res[0] && res[0].dgaTypeCount;
  return res.map((item) => {
    return {
      ...item,
      name: item.dgaTypeName || "-",
      count: item.dgaTypeCount || 0,
      percentage: (item.dgaTypeCount / maxCount) * 100,
    };
  });
};

const getHomeDomainList = async () => {
  const list = await useGetChartData(
    MODULE_API + _API_MAP[title3.value],
    handleHomeResData
  );
  homeDomainList.value = list;
};

const handleInfectedResData = (res) => {
  return res.map((item) => {
    return {
      ...item,
      name: item.city,
      value: item.count,
      unit: "个",
    };
  });
};

const getInfectedChartData = async () => {
  const list = await useGetChartData(
    MODULE_API + _API_MAP[title4.value],
    handleInfectedResData
  );
  if (list.length > 0) {
    barXAxisData1.value = list.map((item) => {
      return item.name;
    });
    let data = list.map((item) => {
      return item.value;
    });
    barChartData1.value = [
      {
        name: "感染主机个数",
        data: data,
      },
    ];
  }
};

const init = () => {
  getBarChartData();
  getHomeDomainList();
  getInfectedChartData();
  getLineChartData();
};

const lineChartData = ref([]) as any;

const handleLineResData = (res) => {
  return res;
};

const getLineChartData = async () => {
  let res = await useGetChartData(
    MODULE_API + _API_MAP[title2.value],
    handleLineResData
  );
  lineChartData.value = res || [];
};

onMounted(() => {
  init();
});

const tooltipFormatter = (params) => {
  let _resHtml = "";
  const axisValue = params[0]?.axisValue;
  const _unit = "";
  params.forEach((item) => {
    const { color, seriesName, value } = item;
    _resHtml += `<div class="line-chart-tool-item">
            <div class="line-chart-tool-info">
              <div class="line-chart-tool-item-icon" style="background: ${color}"></div>
              <div class="line-chart-tool-item-name">${seriesName}</div>
            </div>
            <div class="line-chart-tool-item-value">${value}</div>
				</div>`;
  });
  return `<div class="line-chart-tool-bg">
			<div class="line-chart-tool-bg-subtitle">${axisValue}</div>
			<div class="line-chart-tool-bg-content">
				${_resHtml}
			</div>
		</div>`;
};
</script>

<template>
  <div class="DGA-domain-analysis-container">
    <div class="custom-row">
      <CommonCardVue :title="title1" class="custom-row-item">
        <BarChart :xAxisData="barXAxisData" :chartData="barChartData" />
      </CommonCardVue>
      <CommonCardVue :title="title2" unit="次" class="custom-row-item ml-16">
        <div class="scope-box" v-if="lineChartData.length">
          <div class="scope-box-item" v-for="(item, index) in lineChartData">
            <div class="top">
              <div class="level" :class="`level-${index + 1}`">
                <span>TOP{{ index + 1 }}</span>
              </div>
              <div class="name">
                <CustomTooltip :show="true" :text="item.eventName"></CustomTooltip>
              </div>
              <div class="count">{{ item.num }}</div>
            </div>
            <div class="bottom">
              <ProgressBar :color="getThemeColor().progressColor || 'rgba(88, 180, 213, 1)'
                " :percentage="item.ratio" backgroundColor="rgba(15, 37, 66, 1)"></ProgressBar>
            </div>
          </div>
        </div>
        <ya-empty v-else></ya-empty>
      </CommonCardVue>
    </div>
    <div class="custom-row mt-16">
      <CommonCardVue :title="title3" unit="个" class="custom-row-item">
        <div class="scope-box" v-if="homeDomainList.length">
          <div class="scope-box-item" v-for="(item, index) in homeDomainList">
            <div class="top">
              <div class="level" :class="`level-${index + 1}`">
                <span>TOP{{ index + 1 }}</span>
              </div>
              <div class="name">
                <CustomTooltip :show="true" :text="item.name"></CustomTooltip>
              </div>
              <div class="count">{{ item.count }}</div>
            </div>
            <div class="bottom">
              <ProgressBar :color="getThemeColor().progressColor || 'rgba(88, 180, 213, 1)'
                " :percentage="item.percentage" backgroundColor="rgba(15, 37, 66, 1)"></ProgressBar>
            </div>
          </div>
        </div>
        <ya-empty v-else></ya-empty>
      </CommonCardVue>
      <CommonCardVue :title="title4" class="custom-row-item ml-16">
        <BarChart v-if="barXAxisData1.length > 0" :barGradientColor="['rgba(112, 216, 255, 1)', 'rgba(17, 47, 70, 1)']"
          :xAxisData="barXAxisData1" title="单位：个" :chartData="barChartData1" />
        <ya-empty v-else></ya-empty>
      </CommonCardVue>
    </div>
  </div>
</template>

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

  .custom-row {
    display: flex;
    width: 100%;
    height: 50%;

    // height: calc(50vh - 75px);
    .custom-row-item {
      width: calc((100% - 16px) / 2);
      height: 100%;
    }
  }
}

.home-domain-content {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding-top: 30px;
}

::v-deep .progress-bar-box {
  height: 20%;
  // margin-top: 25px;
  // margin-bottom: 20px;
}

::v-deep .custom-circle-legend {
  margin-right: 20px;
}

.scope-box {
  width: 100%;
  height: 100%;
  // margin-top: 42px;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  box-sizing: border-box;

  .scope-box-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 20%;
    justify-content: end;
    // padding-top: 18px;
    box-sizing: border-box;

    // margin-bottom: 24px;
    .top {
      display: flex;
      align-items: center;

      .level {
        width: 40px;
        height: 25px;
        background: rgba(37, 160, 202, 0.3);
        color: #ffffff;
        font-size: 12px;
        display: flex;
        font-weight: 500;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
        transform: skewX(30deg);

        span {
          transform: skewX(-30deg);
        }
      }

      .level-1 {
        background: #b26e30;
      }

      .level-2 {
        background: #8f994f;
      }

      .level-3 {
        background: #6057ae;
      }

      .icon-tip {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        margin-left: 10px;
        margin-right: 5px;
        margin-top: 2px;
      }

      .name {
        cursor: default;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        color: #8cecff;
        font-weight: 400;
        margin-left: 24px;
      }

      .count {
        min-width: 50px;
        font-family: "DIN";
        text-align: right;
        font-size: 16px;
        font-family: PangMenZhengDao;
        font-weight: 400;
        color: #93e5f6;
      }
    }

    .bottom {
      margin-top: 12px;
    }
  }
}
</style>
