<script setup lang="ts">
import { onMounted, ref, reactive, unref, watch } from "vue";
import LineChart from "../../../components/chart/LineChart/LineChart.vue";
import CommonCardVue from "../../../components/CommonCard/CommonCard.vue";
import RoundTab from "../../../components/RoundTab/RoundTab.vue";
import RoseChart from "../../../components/chart/RoseChart/RoseChart.vue";
import FunnelChart from "../../../components/chart/FunnelChart/FunnelChart.vue";
import { bigNumberTransform } from "../../../utils/utils";
import { ElScrollbar } from "element-plus";
import { dateSwitchOptions } from "../../../settings";
import {
  getQueryCartogram,
  getQueryAttackCityTop,
  getQueryTypeDistribution,
} from "@/api/monitoring/attackEvent/statisticAnalysis";
import lineCircle2 from "../../../assets/image/screen/threat-event/line-2.png";

const currentTab = ref(2);
const xInterval = ref(0);
const options = ref(dateSwitchOptions);
const lineChartData = ref([]);
const linexAxisData = ref([]);
const unit = ref("");
const eventTypeList = ref([]);
const addressList = ref([]);

/**
 * @description 监听日期切换
 */
watch(currentTab, () => {
  if (currentTab.value == 3) {
    xInterval.value = 1;
  } else {
    xInterval.value = 0;
  }
  getLineChartData();
});
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}${_unit}</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>`;
};
/**
 * @description 获取事件趋势数据
 */
const getLineChartData = async () => {
  linexAxisData.value = [];
  lineChartData.value = [];
  let res = await getQueryCartogram({ type: unref(currentTab) });
  console.log(res);
  if (res.code == 200) {
    if (res.data && res.data.length > 0) {
      linexAxisData.value = res.data[0].eventTime.split(",");
      unit.value = res.data[0].unit;
      lineChartData.value = res.data.map((item) => {
        return {
          name: "",
          data: item.eventNum.split(","),
        };
      });
    }
  }
};
/**
 * @description 获取近一周DDOS流量分布
 */
const getAddres = async () => {
  let res = await getQueryAttackCityTop();
  if (res.code == 200) {
    if (res.data?.length) {
      addressList.value = res.data.map((item) => {
        return {
          name: item.city,
          value: item.num,
          proportion: item.proportion,
          percentage: item.proportion,
        };
      });
      console.log(addressList.value);
    }
  }
};
/**
 * @description 获取近一周DDOS事件类型分布
 */
const getTypeList = async () => {
  let res = await getQueryTypeDistribution();
  if (res.code == 200) {
    if (res.data?.length) {
      eventTypeList.value = res.data.map((item) => {
        return {
          name: item.eventName,
          value: item.eventSum,
          percentage: item.percentage,
        };
      });
    }
  }
};
const legendFormatter = (val) => {
  return (
    `{name|${val.name}}` +
    "   " +
    `{value|${bigNumberTransform(val.value)}}` +
    `  {value|（${val.data.proportion}）}`
  );
};
/**
 * @description 页面初始化请求
 */
const init = () => {
  getLineChartData();
  getAddres();
  getTypeList();
};
onMounted(() => {
  init();
});
const tooltipFormatterone = (params) => {
  let _resHtml = "";
  const { color, seriesName, value, name, percentage } = params;
  _resHtml += `<div class="rose-linechart-tooltip-content-item">
            <div class="rose-linechart-tooltip-content-item-value">${params.data.realValue}
              <span style="margin-left:5px">(${params.data.percentage})</span>
            </div>
				</div>`;
  return `<div class="rose-linechart-tooltip">
      <div style="display: flex;">
        <div class="rose-linechart-tooltip-content-item-icon" style="background: ${color}"></div>
        <div >
          <div class="rose-linechart-tooltip-subtitle">${name}</div>
          <div class="rose-linechart-tooltip-content">
            ${_resHtml}
          </div>
        </div>
      </div>
		
		</div>`;
};
const tooltipFormattertwo = (params) => {
  let _resHtml = "";
  const { color, seriesName, value, name, percentage } = params;
  _resHtml += `<div class="rose-linechart-tooltip-content-item">
            <div class="rose-linechart-tooltip-content-item-value">${bigNumberTransform(
    value
  )}
              <span style="margin-left:5px">(${params.data.percentage})</span>
            </div>
				</div>`;
  return `<div class="rose-linechart-tooltip">
      <div style="display: flex;">
        <div class="rose-linechart-tooltip-content-item-icon" style="background: ${color}"></div>
        <div >
          <div class="rose-linechart-tooltip-subtitle">${name}</div>
          <div class="rose-linechart-tooltip-content">
            ${_resHtml}
          </div>
        </div>
      </div>
		</div>`;
};
</script>
<template>
  <div style="height: 100%">
    <div class="tab-center" style="height: 45%">
      <CommonCardVue title="DDoS事件趋势">
        <template v-slot:headerSlot>
          <RoundTab v-model="currentTab" :options="options"></RoundTab>
        </template>
        <LineChart :xInterval="xInterval" :chartData="lineChartData" :xAxisData="linexAxisData" :showSymbol="true"
          :title="'事件数/' + unit" :areaGradientColor="[
            'rgba(49, 150, 250, 0.3)',
            'rgba(49, 150, 250, 0)',
          ]" />
      </CommonCardVue>
    </div>
    <ElRow :gutter="16" justify="space-between" style="height: 53%">
      <ElCol :md="24" :lg="12" :xl="12" style="height: 100%">
        <div class="custom-row">
          <CommonCardVue title="近一周DDoS被攻击地市流量分布TOP10" unit="GB">
            <FunnelChart v-if="addressList.length" :legendFormatter="legendFormatter" style="width: 100%; height: 100%"
              :defaultType="'two'" :chartData="addressList" />
            <ya-empty v-else></ya-empty>
          </CommonCardVue>
        </div>
      </ElCol>
      <ElCol :md="24" :lg="12" :xl="12" style="height: 100%">
        <div class="custom-row">
          <CommonCardVue title="近一周DDoS攻击类型分布" unit="个">
            <RoseChart v-if="eventTypeList.length" :borderRadius="0" :defaultType="'two'" :pieCenter="['50%', '50%']"
              legendTop="auto" legendRight="0" :legendShow="true" :labelLineShow="false" :labelShow="false"
              :chartData="eventTypeList" />
            <ya-empty v-else></ya-empty>
          </CommonCardVue>
        </div>
      </ElCol>
    </ElRow>
  </div>
</template>
<style lang="scss" scoped>
.tab-center {
  // background: #fff;
  // border: 1px solid #fff;
  border-radius: 4px;
  height: 340px;
  padding-bottom: 16px;
}

.custom-row {
  border-radius: 4px;
  // margin-top: 16px;
  width: 100%;
  height: 100%;
  // background: #fff;
  // padding-bottom: 50px;
  position: relative;
  // border: 1px solid #fff;
  box-sizing: border-box;

  ::v-deep .custom-rose-legend .custom-rose-legend-item {
    margin-bottom: 40px;
  }
}

::v-deep .legend-value {
  display: flex;
}
</style>
