<script setup lang="ts">
import { onMounted, ref, reactive, unref, watch, nextTick } from "vue";
import LineChart from "../../../components/chart/LineChart/LineChart.vue";
import CommonCardVue from "../../../components/CommonCard/CommonCard.vue";
import RingProcessChart from "../../../components/chart/RingProcessChart/RingProcessChart.vue";
import RoundTab from "../../../components/RoundTab/RoundTab.vue";
import CommonTabs from "../../../components/CommonTabs/CommonTabs.vue";
import { useGetChartData } from "../../../components/chart/logic";
import { dateSwitchOptions } from "../../../settings";
import { ElScrollbar } from "element-plus";
import { http } from "../../../utils/https/index";
import { getThemeColor } from "../../../components/chart/options/theme";

import { initCanvas } from "../../../utils/canvas";
import lineCircle2 from "../../../assets/image/screen/threat-event/line-2.png";
import lineCircle1 from "../../../assets/image/screen/threat-event/line-1.png";
import lineCircle3 from "../../../assets/image/screen/threat-event/line-3.png";

const themeColor = getThemeColor();
const title = ref("递归/权威交互分析");
const title1 = ref("域名被访问趋势");
const currentTab = ref(1);
const xInterval = ref(1);
const options = ref(dateSwitchOptions);
const proportionInfo = reactive({
  requestProportion: 0,
  requestPercent: 0,
  responseProportion: 0,
  responsPercent: 0,
});

const currentTabName = ref(1);
const isShow = ref(true);
watch(currentTabName, () => {
  isShow.value = false;
});

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

const lineChartData1 = ref([]);

const lineChartData2 = ref([]);
/**
 * @description 监听日期切换
 */
watch(currentTab, () => {
  if (currentTab.value == 1) {
    xInterval.value = 1;
  } else if (currentTab.value == 3) {
    xInterval.value = 3;
  } else {
    xInterval.value = 0;
  }
  getLineChartData();
  getPercent();
});
/**
 * @description 配置请求基本信息
 */
const MODULE_API = "networkSafeDetect/domainSafe/BasicInformationDetection/";
const API_MAP = {
  "递归/权威交互分析": "toDateQueryPercentage",
  域名被访问趋势: "queryDomainTendency",
  1: "toDataQueryFirstDoMain",
  2: "toDateQueryCDN",
};
/**
 * @description 获取递归/权威交互分析数据
 */
const getPercent = async () => {
  const params = {
    type: unref(currentTab),
  };
  let res = await http.get(MODULE_API + API_MAP[title.value], params);
  const { code, data } = res || {};
  if (code === 200 && data) {
    if (res.data.requestProportion) {
      proportionInfo.requestProportion = res.data.requestProportion;
      proportionInfo.requestPercent = res.data.requestProportion.replace(
        "%",
        ""
      );
    }
    if (res.data.responseProportion) {
      proportionInfo.responseProportion = res.data.responseProportion;
      proportionInfo.responsPercent = res.data.responseProportion.replace(
        "%",
        ""
      );
    }
    initCanvas(
      document.getElementById("highlevel"),
      proportionInfo.requestPercent || 0,
      "#fff",
      "rgba(68, 173, 206, 1)",
      100,
      true
    );
    initCanvas(
      document.getElementById("highlevel1"),
      proportionInfo.responsPercent || 0,
      "#fff",
      "rgba(125, 191, 135, 1)",
      100,
      true
    );
  }
};
/**
 * @description 获取域名访问趋势数据
 */
const getLineChartData = async () => {
  const params = {
    type: unref(currentTab),
  };
  lineChartData.value = [];
  lineChartData1.value = [];
  lineChartData2.value = [];
  linexAxisData.value = [];
  const res = await http.get(MODULE_API + API_MAP[title1.value], params);
  if (res.code == 200) {
    if (res.data && res.data.length > 0) {
      linexAxisData.value = res.data[0]?.time.split(",");
      res.data.forEach((item) => {
        if (item.name == "域名数量") {
          lineChartData.value.push({
            name: item.name,
            data: item.sum.split(","),
          });
        } else if (item.name == "域名被访问次数") {
          lineChartData1.value.push({
            name: item.name,
            data: item.sum.split(","),
          });
        } else {
          lineChartData2.value.push({
            name: item.name,
            data: item.sum.split(","),
          });
        }
      });
    } else {
      lineChartData.value = null;
    }
  } else {
    lineChartData.value = null;
  }
};

/**
 * @description 页面初始化请求
 */
const init = () => {
  getPercent();
  getLineChartData();
};
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}${_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>`;
};
</script>
<template>
  <div class="domain-tampering-attack-page">
    <div class="data-chose">
      <RoundTab v-model="currentTab" :options="options"></RoundTab>
    </div>
    <div class="ya-attack-content">
      <ElRow :gutter="16" class="custom-row" justify="space-between">
        <ElCol :md="12" :lg="12" :xl="12">
          <CommonCardVue :title="title" class="custom-row-item">
            <div class="ring-circle-process-box">
              <div>
                <div class="ya-boll">
                  <canvas class="ya-highlevel" style="width: 150px; height: 150px" id="highlevel"></canvas>
                  <span>{{ proportionInfo.requestPercent || 0 }}%</span>
                </div>
                <div class="ring-circle-process-box-text">
                  <div>递归请求比例</div>
                  <img src="../../../assets/image/card/card-text-bg.png" alt="" />
                </div>
              </div>
              <div>
                <div class="ya-boll boll1">
                  <canvas class="ya-highlevel" style="width: 150px; height: 150px" id="highlevel1"></canvas>
                  <span>{{ ~~proportionInfo.responsPercent || 0 }}%</span>
                </div>
                <div class="ring-circle-process-box-text">
                  <div>权威应答比例</div>
                  <img src="../../../assets/image/card/card-text-bg.png" alt="" />
                </div>
              </div>
            </div>
          </CommonCardVue>
        </ElCol>
        <ElCol :md="12" :lg="12" :xl="12">
          <CommonCardVue title="域名被访问数量趋势" class="custom-row-item">
            <LineChart :xInterval="xInterval" :legendRight="0" title="单位：个" :titleLeft="0" :gridTop="50"
              :colors="[themeColor.lineColorList[0]]" :areaGradientColor="themeColor.lineGradient[0]" :showSymbol="true"
              :yAxisAxisLineShow="true" :xAxisSplitLineShow="false" :yAxisSplitLineShow="false" :xAxisData="linexAxisData"
              :chartData="lineChartData" :xFontSize="10" />
          </CommonCardVue>
        </ElCol>
      </ElRow>
      <ElRow :gutter="16" class="custom-row mt-16" justify="space-between">
        <ElCol :md="12" :lg="12" :xl="12">
          <CommonCardVue title="域名被访问次数趋势" class="custom-row-item">
            <LineChart :xInterval="xInterval" :legendRight="0" title="单位：个" :titleLeft="0" :gridTop="50"
              :colors="[themeColor.lineColorList[1]]" :areaGradientColor="themeColor.lineGradient[1]" :showSymbol="true"
              :yAxisAxisLineShow="true" :xAxisSplitLineShow="false" :yAxisSplitLineShow="false" :xAxisData="linexAxisData"
              :chartData="lineChartData1" :xFontSize="10" />
          </CommonCardVue>
        </ElCol>
        <ElCol :md="12" :lg="12" :xl="12">
          <CommonCardVue title="访问源IP数量趋势" class="custom-row-item">
            <LineChart :xInterval="xInterval" :legendRight="0" title="单位：个" :titleLeft="0" :gridTop="50"
              :colors="[themeColor.lineColorList[2]]" :areaGradientColor="themeColor.lineGradient[2]" :showSymbol="true"
              :yAxisAxisLineShow="true" :xAxisSplitLineShow="false" :yAxisSplitLineShow="false" :xAxisData="linexAxisData"
              :chartData="lineChartData2" :xFontSize="10" />
          </CommonCardVue>
        </ElCol>
      </ElRow>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.domain-tampering-attack-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .data-chose {
    // height: 70px;
    // min-height: 70px;
    margin-bottom: 24px;
    position: relative;

    .custom-switch-box {
      left: 0;

      ::v-deep .custom-round-tab-item {
        margin-left: 0;
        margin-right: 32px !important;
        width: 80px;
        height: 32px;
        line-height: 32px;
        font-size: 16px;
      }
    }
  }

  .ya-attack-content {
    display: flex;
    flex-direction: column;
    flex: 1;

    &>div {
      height: 50%;
    }
  }
}

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

.mt-16 {
  margin-top: 16px;
}

.ring-circle-process-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

  .ring-circle-process-box-text {
    margin-top: 35px;
    text-align: center;
    color: #fff;
    font-size: 16px;

    img {
      width: 176px;
      height: 21px;
    }

    div {
      position: relative;
      top: 6px;
    }
  }

  .ring-process-chart {
    width: 50%;
    height: 100%;
  }

  .ring-process-other {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

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

    .count {
      margin-top: 16px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.4);
    }
  }
}

.tab-center {
  // background: #fff;
  margin-top: 16px;
  border-radius: 4px;
  min-height: calc(100vh - 550px);
  border: 1px solid #fff;

  // height: calc(100vh - 620px);
  .tab-center-active {
    padding: 0 25px;
  }
}

::v-deep .ya-tabs-box {
  margin-bottom: 1px !important;
}

::v-deep .ya-layout-content-page {
  height: 128px;
  position: relative;
  top: -22px;
}

.ya-boll {
  // background: rgba(33, 117, 160, 0.17);
  // box-shadow: inset 0px 1px 32px 0px rgba(16, 204, 252, 0.18);
  // border: 1px solid rgba(84, 229, 252, 0.15);
  background: rgba(33, 117, 160, 0.17);
  box-shadow: inset 0px 0px 17px 0px rgba(0, 220, 255, 0.46);
  border: 2px solid #217890;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  position: relative;

  span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 23px;
    font-family: YouSheBiaoTiHei;
    color: #ffffff;
  }
}

.boll1 {
  background: rgba(33, 160, 129, 0.17);
  box-shadow: inset 0px 0px 17px 0px rgba(125, 191, 135, 0.46);
  border: 2px solid #7dbf87;
}
</style>
