<script setup lang="ts">
import { ref, reactive, onMounted, watch, unref } from "vue";
import CommonCardVue from "../../../components/CommonCard/CommonCard.vue";
import LineChart from "../../../components/chart/LineChart/LineChart.vue";
import CrossBarChart from "../../../components/chart/CustomChart/CrossBarNewChart.vue";
import CircularDiagram from "../../../components/chart/CircularDiagram/CircularDiagram.vue";
import NumberProgressBarItem from "../../../components/ProgressBar/NumberProgressBarItem.vue";
import { bigNumberTransform } from "../../../utils/utils";
import { ElScrollbar } from "element-plus";
import { getThemeColor } from "../../../components/chart/options/theme";
import {
  getThreeMonthsScanType,
  getTypeDistribution,
  getMonitoringEvent,
  getVulnerabilityType,
  getSiteEventType,
} from "../../../api/monitoring/website/monitor";
import { mapMapping } from "../../../assets/map/provinceData";
import lineCircle2 from "../../../assets/image/screen/threat-event/line-2.png";
import lineCircle1 from "../../../assets/image/screen/threat-event/line-1.png";
const mapData = mapMapping();
const xAxisData = ref([]);
const chartData = reactive({
  list: [],
});
const chartData1 = ref([]);

const lineChartData = ref([]);
const areaGradientColor = ref([
  ["rgba(255, 146, 53, 0.3)", "rgba(49, 150, 250, 0)"],
  ["rgba(16, 143, 234, 0.3)", "rgba(49, 150, 250, 0)"],
  ["rgba(62, 193, 140, 0.3)", "rgba(49, 150, 250, 0)"],
]);
const linexAxisData = ref([]);

const legendFormatter = (name) => {
  const findItem = unref(chartData).findIndex((item) => item.name === name);
  const _item = unref(chartData)[findItem] as any;
  const _name = `{title|${name}}`;
  const percentage = `{subtitle|${_item.value}}`;
  return _name + percentage;
};
const tooltipValueFormatter = (val) => {
  return val;
};
const ipList = ref([]);
/**
 * @description 近三个月网站扫描类型态势
 */
const getThreeMonthsScanTypeData = async () => {
  let res = await getThreeMonthsScanType();
  const { code, data } = res || {};
  if (code === 200 && data && data.length > 0) {
    linexAxisData.value = res.data[0].xaxisData;
    let arr = res.data.map((item) => {
      return {
        name: item.typeName,
        data: item.data,
      };
    });
    lineChartData.value = arr;
  }
};
const chartData2 = ref([]);
/**
 * @description 近一周扫描类型数据统计
 */
const getTypeDistributionData = async () => {
  let res = await getTypeDistribution();
  const { code, data } = res || {};
  if (code === 200 && data?.length) {
    chartData2.value = res.data.map((item) => {
      return {
        name: item.name,
        value: item.num,
      };
    });
  }
};
/**
 * @description 获取近一周网站监控事件数量-TOP10
 */
const getMonitoringEventData = async () => {
  let res = await getMonitoringEvent();
  const { code, data } = res || {};
  if (code === 200 && data?.length) {
    ipList.value = data.map((item) => {
      return {
        name: item.name,
        value: item.num,
        percentage: item.per,
      };
    });
  }
};
/**
 * @description 近一周网站漏洞等级及数量统计-TOP10
 */
const getVulnerabilityTypeData = async () => {
  let res = await getVulnerabilityType();
  console.log(res, "res");
  const { code, data } = res || {};
  if (code === 200 && data?.length) {
    if (res.data.length > 0) {
      xAxisData.value = res.data[0].xdata;
    }
    chartData.list = res.data.map((item) => {
      item.type = "bar";
      item.barGap = "8%";
      item.showBackground = true;
      item.backgroundStyle = {
        color: "rgba(180, 180, 180, 0.1)",
      };
      item.barMinWidth = 20;
      item.name = item.level;
      item.data = item.numList;
      return item;
    });
  }
};
/**
 * @description 近一周网站事件类型分布
 */
const getSiteEventTypeData = async () => {
  let res = await getSiteEventType();
  const { code, data } = res || {};
  if (code === 200 && data?.length) {
    chartData1.value = res.data.map((item) => {
      return {
        name: item.name,
        value: item.num,
        valueFormat: item.per + "%",
      };
    });
  }
};
const tooltipValueFormatter1 = (params) => {
  let _resHtml = "";
  const { color, seriesName, value, name, percent } = params;
  _resHtml += `<div class="rose-linechart-tooltip-content-item">
              <div class="rose-linechart-tooltip-content-item-value">${percent}%
              </div>
          </div>`;
  return `<div class="rose-linechart-tooltip">
        <div style="display: flex;">
          <div class="rose-linechart-tooltip-content-item-icon" style="background: ${color};top:6px;position:relative"></div>
          <div class="ya-content" style='margin-left: 5px'>
            <div class="rose-linechart-tooltip-subtitle">${name}</div>
            <div class="rose-linechart-tooltip-content">
              ${_resHtml}
            </div>
          </div>
        </div>
      </div>`;
};
const tooltipFormatter2 = (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">${bigNumberTransform(
      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 tooltipFormatter3 = (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">${bigNumberTransform(
      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 = () => {
  getThreeMonthsScanTypeData();
  getTypeDistributionData();
  getMonitoringEventData();
  getVulnerabilityTypeData();
  getSiteEventTypeData();
};
onMounted(() => {
  init();
});
</script>
<template>
  <div style="height: 100%">
    <ElRow :gutter="16" justify="space-between" style="height: 100%">
      <ElCol :md="19" :lg="18" :xl="18">
        <div class="ya-border-color ya-top" style="height: 20%">
          <CommonCardVue title="近一周扫描类型结果数据统计" class="custom-row-item" unit="个">
            <ElRow style="height: 100%">
              <ElCol :span="12" v-for="(item, index) in chartData2">
                <div class="flex-st" :class="index == 1 ? 'border-right-none' : ''">
                  <div>
                    <img v-if="index == 0" src="../../../assets/image/icon_monitor.png" alt="" />
                    <img v-if="index == 1" src="../../../assets/image/icon_scan.png" alt="" />
                  </div>
                  <div>
                    <div class="flex-st-num flex-st-num1">
                      {{ item.value || 0 }}
                    </div>
                    <div class="flex-st-name">{{ item.name }}</div>
                  </div>
                </div>
              </ElCol>
            </ElRow>
          </CommonCardVue>
        </div>
        <div class="ya-border-color top-content padding-top12" style="height: 40%">
          <CommonCardVue title="近三个月网站扫描类型次数趋势统计" class="custom-row-item">
            <LineChart v-if="lineChartData.length" :colors="getThemeColor().colorList || ['#FF9235', '#108FEA', '#3EC18C']
              " :isShowSide="true" :gridBottom="24" :chartData="lineChartData" :xAxisData="linexAxisData"
              :showSymbol="true" title="单位：次" :areaGradientColor="[
                ['rgba(2, 125, 183, .4)', 'rgba(2, 125, 183, 0)'],
                ['rgba(89, 185, 157, .4)', 'rgba(252, 247, 143, 0)'],
                ['rgba(69, 134, 222, .4)', 'rgba(69, 134, 222, 0)'],
              ]" />
            <ya-empty v-else></ya-empty>
          </CommonCardVue>
        </div>
        <div class="ya-border-color top-content1 padding-top12" style="height: 39.5%">
          <CommonCardVue title="近一周网站漏洞等级及数量统计-TOP10" class="custom-row-item">
            <CrossBarChart v-if="xAxisData.length > 0" :tooltipValueFormatter="(val) => val"
              :isShowSide="xAxisData.length > 5 ? true : false" :xname="''" yname="单位：次" xAxisType="category"
              :tootbackgroundColor="'#ffffff'" :xAxisData="xAxisData" :chartData="chartData.list" />
            <ya-empty v-else></ya-empty>
          </CommonCardVue>
        </div>
      </ElCol>
      <ElCol :md="5" :lg="6" :xl="6">
        <div class="custom-row">
          <div class="ya-border-color right-top">
            <CommonCardVue title="近一周网站事件类型分布" class="custom-row-item">
              <CircularDiagram v-if="chartData1.length" :otherType="'three'" class="yaTypes" :colorBg="getThemeColor().colorList || ['#4BC795', '#FF9235', '#387CF2']
                " legendWidth="35%" :pieCenter="['40%', '50%']" :chartData="chartData1" legendTop="auto"
                :legendFormatter="legendFormatter" />
              <ya-empty v-else></ya-empty>
            </CommonCardVue>
          </div>
          <div class="ya-border-color padding-top12 right-bottom progress-box">
            <CommonCardVue title="近一周网站监控事件数量-TOP10" class="custom-row-item" unit="个">
              <div v-if="ipList.length" style="height: 100%; padding-top: 20px; box-sizing: border-box">
                <NumberProgressBarItem v-for="(item, index) in ipList" :key="`${item.name}-${item.value}`"
                  :value="item.value" :name="item.name" :number="index + 1" :percentage="item.percentage" />
              </div>
              <ya-empty v-else></ya-empty>
            </CommonCardVue>
          </div>
        </div>
      </ElCol>
    </ElRow>
  </div>
</template>
<style lang="scss" scoped>
.yaTypes {
  padding-left: 13%;
}

.custom-row {
  height: 100%;

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

.ya-top {
  height: 200px;
  border: 1px solid #fff;
  border-radius: 4px;
  border: none;
}

.top-content {
  height: 310px;
}

.top-content1 {
  height: 310px;
}

.padding-top12 {
  padding-top: 12px;
  box-sizing: border-box;
}

.right-top {
  height: 33%;
}

.right-bottom {
  height: 67%;
}

.progress-box {
  overflow-y: auto;
}

// ::v-deep .chart-flex {
//   width: 65%;
//   margin-left: 20px;
// }
.flex-st {
  display: flex;
  align-items: center;
  color: #96a2b5;
  font-weight: 400;
  font-size: 14px;
  justify-content: center;
  height: 100%;
  // margin-top: 40px;
  border-right: 1px solid #32496d;

  img {
    margin-right: 24px;
  }

  .flex-st-content {
    margin-right: 164px;
  }

  .flex-st-num {
    font-weight: 500;
    color: #4bc795;
    font-size: 32px;
  }

  .flex-st-num1 {
    font-family: YouSheBiaoTiHei;
    color: #9aefff;
  }

  .flex-st-name {
    color: #5bcbe2;
  }
}

.border-right-none {
  border-right: none;
}
</style>
