<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/domain/maliciousDomainName.vue
 * @Date: 2022-08-31 11:13:51
 * @Description: 
 * @LastEditTime: 2023-08-31 10:49:18
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import CommonCardVue from "../../../components/CommonCard/CommonCard.vue";
import BarChart from "../../../components/chart/BarChart/BarChart.vue";
import LineChart from "../../../components/chart/LineChart/LineChart.vue";
import RoseChart from "../../../components/chart/RoseChart/RoseChart.vue";
import ProvincesMap from "../../../components/chart/map/ProvincesMap.vue";
import { useGetChartData } from "../../../components/chart/logic";
import { mapNameJoint } from "../../../components/chart/options";
import lineCircle1 from "../../../assets/image/screen/threat-event/line-2.png";
import lineCircle2 from "../../../assets/image/screen/threat-event/line-1.png";
import lineCircle3 from "../../../assets/image/screen/threat-event/line-3.png";
import lineCircle4 from "../../../assets/image/screen/threat-event/line-4.png";
import lineCircle5 from "../../../assets/image/screen/threat-event/line-5.png";

import { getThemeColor } from "../../../components/chart/options/theme";

const title = ref("近一周全省恶意域名被访问统计");
const title2 = ref("昨日恶意域名被访问TOP5");
const title3 = ref("昨日恶意类型TOP5");
const title4 = ref("昨日被感染主机地市分布TOP10");

const MODULE_API = "networkSafeDetect/";
const _API_MAP = {
  近一周全省恶意域名被访问统计: "domainSafe/evilDomainAnalyse/evilOneWeek",
  昨日恶意域名被访问TOP5: "domainSafe/evilDomainAnalyse/evilDomainAccessStat",
  昨日恶意类型TOP5: "domainSafe/evilDomainAnalyse/evilTypeStat",
  昨日被感染主机地市分布TOP10: "domainSafe/evilDomainAnalyse/evilHostCityStat",
};

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

const handleBarRes = (res) => {
  let xAxisData = [] as any;
  let chartData = [
    { name: "访问次数（次）", data: [] },
    { name: "访问IP数量（个）", data: [] },
  ] as any;
  res.forEach((item) => {
    xAxisData.push(item.accessTime);
    chartData[0].data.push(Number(item.accessCount));
    chartData[1].data.push(item.ipCount);
  });
  return {
    xAxisData,
    chartData,
  };
};

// 近一周全省恶意域名访问统计
const getBarChartData = async () => {
  const { chartData, xAxisData } = await useGetChartData(
    MODULE_API + _API_MAP[title.value],
    handleBarRes
  );
  barChartData.value = chartData;
  barXAxisData.value = xAxisData;
};

const lineChartData = ref([]) as any;
const linexAxisData = ref([]) as any;

const handleLineRes = (res = []) => {
  let xAxisData = [] as any;
  let chartData = [] as any;
  xAxisData = res[0] && res[0].xaxisData;
  res.forEach((item, index) => {
    let obj = {
      name: item.name,
      data: item.data,
    };
    chartData.push(obj);
  });
  return {
    xAxisData,
    chartData,
  };
};
// 恶意访问域名TOP5
const getLineChartData = async () => {
  const { xAxisData, chartData } = await useGetChartData(
    MODULE_API + _API_MAP[title2.value],
    handleLineRes
  );
  lineChartData.value = chartData;
  linexAxisData.value = xAxisData;
};

const roseChartData = ref([]) as any;

const handleRoseData = (res) => {
  return res.map((item) => {
    return {
      value: Number(item.evilTypeCount),
      name: item.evilTypeName,
    };
  });
};
// 恶意类型TOP5
const getRoseChartData = async () => {
  const res = await useGetChartData(
    MODULE_API + _API_MAP[title3.value],
    handleRoseData
  );
  if (!res) return;
  roseChartData.value = res;
};

const mapChartData = ref([]) as any;
const handleMapRes = (res) => {
  return res.map((item, index) => {
    return {
      ...item,
      name: mapNameJoint(item.city),
      value: Number(item.count),
    };
  });
};
const getMapChartData = async () => {
  const res = await useGetChartData(
    MODULE_API + _API_MAP[title4.value],
    handleMapRes
  );
  if (!res) return;
  mapChartData.value = res;
  console.log(mapChartData.value, "========");
};
const labelFormatter = (params) => {
  return (
    "{name|" +
    params.name +
    "}\n\n{value|" +
    params.data.realValue +
    "（个）" +
    "}"
  );
};

const tooltipFormatter = function (params) {
  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">${params.value || 0}个</div>
        </div>
      </div>
      
    </div>`;
};
const tooltipFormatter1 = (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>`;
};

const init = () => {
  getBarChartData();
  getLineChartData();
  getRoseChartData();
  getMapChartData();
};
const areaGradientColor = ref([]);
if (getThemeColor().lineGradient) {
  // getThemeColor().lineGradient.forEach((item, index) => {
  //   if (index < 5) {
  //     areaGradientColor.value.push(item);
  //   }
  // });
}

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

<template>
  <div class="malicious-domain-name-page">
    <ElRow :gutter="16" class="custom-row">
      <ElCol :md="16" :lg="16" :xl="16" style="height: 100%">
        <CommonCardVue :title="title" class="custom-row-item">
          <BarChart :chartData="barChartData" :xAxisData="barXAxisData" />
        </CommonCardVue>
      </ElCol>
      <ElCol :md="8" :lg="8" :xl="8" style="height: 100%">
        <CommonCardVue :title="title3" class="custom-row-item">
          <RoseChart v-if="roseChartData.length" :chartData="roseChartData" :labelFormatter="labelFormatter" theme1
            :name="title3" :legendShow="false" />
          <ya-empty v-else></ya-empty>
        </CommonCardVue>
      </ElCol>
    </ElRow>

    <ElRow :gutter="16" class="custom-row mt-16">
      <ElCol :md="24" :lg="24" :xl="24">
        <CommonCardVue :title="title2" class="custom-row-item">
          <LineChart v-if="lineChartData.length" title="单位：个" :showSymbol="true" :chartData="lineChartData"
            :xAxisData="linexAxisData" />
          <ya-empty v-else></ya-empty>
        </CommonCardVue>
      </ElCol>
      <!-- <ElCol :md="16" :lg="14" :xl="14">
        <CommonCardVue :title="title4" class="custom-row-item">
          <div class="infected-map-box">
            <div class="infected-map">
              <ProvincesMap makePoint :autotip="true" :chartData="mapChartData" :tooltipFormatter="tooltipFormatter" />
            </div>
            <div class="map-card ya-border-color">
              <div class="map-card-head ya-fill-color ya-primary-text">
                <div class="item">地市</div>
                <div class="item">被感染主机数</div>
              </div>
              <div class="map-card-content">
                <div class="item-box" v-for="(item,index) in mapChartData" :key="index">
                  <div class="item ya-regular-text">{{ item.name }}</div>
                  <div class="item item-count ya-regular-text">{{ item.value || 0}}</div>
                </div>
              </div>
            </div>
          </div>

        </CommonCardVue>
      </ElCol> -->
    </ElRow>
  </div>
</template>

<style lang="scss" scoped>
.malicious-domain-name-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

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

  .custom-row-item {
    width: 100%;
    height: 100%;
  }
}

.infected-map-box {
  width: 100%;
  height: 100%;
  display: flex;
}

.infected-map {
  flex: auto;
}

.map-card {
  width: 220px;
  height: 100%;
  border-radius: 8px;
  border: 1px solid #cacaca;

  .map-card-head {
    width: 100%;
    height: 32px;
    background: #f8f8f8;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    line-height: 32px;
    padding: 0 24px 0 24px;
    box-sizing: border-box;
    display: flex;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;

    .item {
      flex: 1;
    }
  }

  .map-card-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 24px 0 24px;
    box-sizing: border-box;

    .item-box {
      width: 100%;
      display: flex;
      height: 28px;
      line-height: 28px;

      .item {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        flex: 1;
      }

      .item-count {
        font-size: 14px;
        font-family: HelveticaNeue;
        color: rgba(0, 0, 0, 0.4);
        text-align: right;
      }
    }
  }
}
</style>
