<script setup lang="ts">
import { onMounted, ref, reactive, unref, watch } from "vue";
import CommonCardVue from "../../../components/CommonCard/CommonCard.vue";
import RoundTab from "../../../components/RoundTab/RoundTab.vue";
import RoseChart from "../../../components/chart/RoseChart/RoseChart.vue";
import BarChart from "../../../components/chart/BarChart/BarChart.vue";
import FunnelChart from "../../../components/chart/FunnelChart/FunnelChart.vue";
import NumberProgressBarItem from "../../../components/ProgressBar/NumberProgressBarItem.vue";
import CircularDiagram from "../../../components/chart/CircularDiagram/CircularDiagram.vue";
import LineChart from "../../../components/chart/LineChart/LineChart.vue";
import lineCircle2 from "../../../assets/image/screen/threat-event/line-2.png";
import { ElScrollbar } from "element-plus";
import { bigNumberTransform } from "../../../utils/utils";
import { dateSwitchOptions } from "../../../settings";
import { getThemeColor } from "../../../components/chart/options/theme";
import {
  querySumTendency,
  queryMaliciousCodeFileType,
  queryMaliciousCode,
  queryDiffuseIPNum,
  queryVirusCode,
} from "../../../api/monitoring/maliciousFile/totalSituation";
const currentTab = ref(2);
const xInterval = ref(0);
const options = ref(dateSwitchOptions);
const options1 = JSON.parse(JSON.stringify(options.value));
options1[0].name = "昨日";
const chartData = ref([]);
const xAxisData = ref([]);

const ipList = ref([]);
const typeList = ref([]);
const codeNumList = ref([]);
const famliyCodeNumList = ref([]);
/**
 * @description 监听日期切换
 */
watch(currentTab, () => {
  if (currentTab.value == 1) {
    xInterval.value = 1;
  } else if (currentTab.value == 3) {
    xInterval.value = 2;
  } else {
    xInterval.value = 0;
  }
  getList(1);
});
/**
 * @description 重置数据
 */
const resetData = (type, res) => {
  let arr = [];
  if (res.code == 200) {
    if (res.data && res.data.length > 0) {
      arr = res.data.map((item, index) => {
        return {
          name: item.codeName,
          value: item.codeNum,
          percentage: item.codePercentage,
          nPercentage: item.codePercentage
            ? Number(item.codePercentage.replace("%", ""))
            : "",
          rank: index + 1,
          // unit: "（个）",
        };
      });
    }
    return arr;
  }
};
const barXAxisData1 = ref([]);
const barChartData1 = ref([]);
/**
 * @description 获取数据
 */
const getList = async (type) => {
  let res;
  switch (type) {
    case 1:
      xAxisData.value = [];
      chartData.value = [];
      res = await querySumTendency({ type: unref(currentTab) });
      if (res.code == 200) {
        if (res.data && res.data.length > 0) {
          xAxisData.value = res.data[0]?.eventTime.split(",");
          chartData.value = res.data.map((item) => {
            return {
              name: item.eventName,
              data: item.eventNum.split(","),
            };
          });
        }
      }
      break;
    case 2:
      res = await queryMaliciousCodeFileType();
      typeList.value = resetData(type, res);
      break;
    // case 3:
    //   res = await queryMaliciousCode();
    //   codeNumList.value = resetData(type, res);
    //   break;
    case 4:
      res = await queryDiffuseIPNum();
      console.log(res);
      barXAxisData1.value = res.data.map((item) => {
        return item.codeName;
      });

      let data = res.data.map((item) => {
        return item.codeNum;
      });
      barChartData1.value = [
        {
          name: "感染主机个数",
          data: data,
        },
      ];
      // ipList.value = resetData(type, res);
      break;
    case 5:
      res = await queryVirusCode();
      famliyCodeNumList.value = resetData(type, res);
      break;
  }
};
/**
 * @description 页面初始化请求
 */
const init = () => {
  for (var i = 0; i < 5; i++) {
    getList(i + 1);
  }
};
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>`;
};

const tooltipValueFormatter2 = (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">${value}
              </div>
          </div>`;
  return `<div class="rose-linechart-tooltip">
        <div style="display: flex;align-items: center;">
          <div class="rose-linechart-tooltip-content-item-icon" style="background: ${color};position: relative;top: 0px;margin-right:5px"></div>
          <div style="display: flex;align-items: center;justify-content: space-between;flex: 1">
            <div class="rose-linechart-tooltip-subtitle">${name}</div>
            <div class="rose-linechart-tooltip-content-item-value">${value}
              </div>
          </div>
        </div>
      </div>`;
};
const tooltipFormatter1 = (params) => {
  let _resHtml = "";
  const axisValue = params[0]?.axisValue;
  const _unit = "";
  params.forEach((item) => {
    console.log(item);
    if (item.componentSubType != "pictorialBar") {
      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>`;
};
</script>
<template>
  <div>
    <ElRow :gutter="16" justify="space-between" style="height: 36%">
      <ElCol :md="24" :lg="16" :xl="16" style="height: 100%">
        <div class="content-item ya-bg-colors">
          <CommonCardVue title="恶意代码总体趋势">
            <template v-slot:headerSlot>
              <RoundTab v-model="currentTab" :options="options1"></RoundTab>
            </template>
            <LineChart v-if="xAxisData" :xInterval="xInterval" :legendRight="0" title="单位：个" :titleLeft="0" :gridTop="50"
              :colors="[getThemeColor().colorList[0]]" :areaGradientColor="getThemeColor().lineGradient[0]"
              :showSymbol="true" :yAxisAxisLineShow="true" :xAxisSplitLineShow="false" :yAxisSplitLineShow="false"
              :xAxisData="xAxisData" :chartData="chartData" :xFontSize="10" :tooltipFormatter="tooltipFormatter" />
            <ya-empty class="empty" v-else></ya-empty>
          </CommonCardVue>
        </div>
      </ElCol>
      <ElCol :md="24" :lg="8" :xl="8" style="height: 100%">
        <div class="content-item ya-bg-colors">
          <CommonCardVue class="ya-maliciou-code" title="近一周恶意代码传播类型分布" unit="个">
            <CircularDiagram :legendTop="'auto'" otherType="one" v-if="typeList.length" legendRight="15px"
              chartClass="ya-circle-chart" :borderRadius="0" :pieCenter="['40%', '50%']" :legendShow="true"
              :labelLineShow="false" :labelShow="false" :chartData="typeList" />
            <ya-empty class="empty" v-else></ya-empty>
          </CommonCardVue>
        </div>
      </ElCol>
    </ElRow>
    <ElRow :gutter="16" justify="space-between" style="height: 64%">
      <ElCol :md="24" :lg="16" :xl="16" style="height: 100%">
        <div class="bottom-content-item ya-bg-colors">
          <CommonCardVue title="近一周恶意代码数量 TOP10" unit="个">
            <BarChart :pictorialBar="true" :isShowSide="true" :gridBottom="24" title="单位：个"
              v-if="barXAxisData1.length > 0" :barGradientColor="[
                'rgba(112, 216, 255, 1)',
                'rgba(17, 47, 70, 1)',
              ]" :xAxisData="barXAxisData1" :chartData="barChartData1" />
            <ya-empty v-else></ya-empty>
          </CommonCardVue>
        </div>
      </ElCol>
      <ElCol :md="24" :lg="8" :xl="8" style="height: 100%">
        <div class="bottom-content-item ya-bg-colors">
          <CommonCardVue title="近一周病毒家族恶意代码数量 TOP10" unit="个">
            <ElScrollbar class="ya-border-color" v-if="famliyCodeNumList.length">
              <div class="progress" style="margin-top: 10px">
                <NumberProgressBarItem v-for="(item, index) in famliyCodeNumList" :type="'otherTwo'"
                  :key="`${item.name}-${index}`" :name="item.name" :number="item.rank" :value="item.value"
                  :percentage="item.nPercentage" />
              </div>
            </ElScrollbar>
            <ya-empty v-else></ya-empty>
          </CommonCardVue>
        </div>
      </ElCol>
    </ElRow>
  </div>
</template>
<style lang="scss" scoped>
.content-item {
  position: relative;
  // background: #fff;
  // border: 1px solid #fff;
  height: 100%;
}

.empty {
  position: relative;
  top: -20px;
}

.bottom-content-item {
  padding-top: 16px;
  box-sizing: border-box;
  // background: #fff;
  height: 100%;
  // border: 1px solid #fff;
}

.progress {
  padding: 0 24px;

  ::v-deep .progress-bar-box {
    width: auto;
    margin-bottom: 8px;
    padding: 12px 16px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: linear-gradient(90deg,
        rgba(0, 149, 255, 0) 0%,
        rgba(0, 149, 255, 0.05) 100%);
  }

  ::v-deep .progress-bar-box:nth-child(1) {
    background: linear-gradient(90deg,
        rgba(255, 91, 93, 0) 0%,
        rgba(255, 91, 93, 0.05) 100%);
  }

  ::v-deep .progress-bar-box:nth-child(2) {
    background: linear-gradient(90deg,
        rgba(241, 131, 1, 0) 0%,
        rgba(241, 131, 1, 0.05) 100%);
  }
}

::v-deep .progress-bar .tracker-bar {
  // width: 100% !important;
}

// ::v-deep .el-scrollbar {
//   height: 90%;
// }
.height100 {
  height: 100%;
}

::v-deep .progress {
  padding: 0;
}

.rose-linechart-tooltip1 {
  padding: 6px 10px;
  box-sizing: border-box;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

::v-deep .ya-circle-chart {
  width: 90% !important;
}

.ya-maliciou-code {
  ::v-deep .title-center {
    width: 350px;
    margin: 0 auto;
  }
}
</style>
