<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/SafeComponents/NetEventAttackTop10.vue
 * @Date: 2022-09-07 09:38:52
 * @Description: 
 * @LastEditTime: 2023-09-01 18:47:18
 * @LastEditors: 曹文丽
-->
<template>
  <div class="block">
    <div class="ya-left">
      <div class="ya-item" v-for="item in list">
        <img v-if="item.threatGrade == '高危'" src="../../../assets/image/screen/icon_highrisk.png" alt="" />
        <img v-if="item.threatGrade == '中危'" src="../../../assets/image/screen/icon_middlerisk.png" alt="" />
        <img v-if="item.threatGrade == '低危'" src="../../../assets/image/screen/icon_lowrisk.png" alt="" />
        <div class="ya-item-desc">
          <div class="level">{{ item.threatGrade }}</div>
          <div class="num">{{ item.gradeNum || 0 }}</div>
        </div>
      </div>
    </div>
    <div class="ya-right">
      <div class="ya-boll">
        <canvas class="ya-highlevel" style="width: 80px; height: 80px" id="highlevel"></canvas>
      </div>
      <div class="ya-boll">
        <canvas class="ya-middlelevel" style="width: 80px; height: 80px" id="middlelevel"></canvas>
      </div>
      <div class="ya-boll">
        <canvas class="ya-lowlevel" style="width: 80px; height: 80px" id="lowlevel"></canvas>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted, watch } from 'vue'

import { useGetChartData } from "../../../components/chart/logic";
import { useGlobalSafeScreen } from "../logic/useGlobalSafeScreen";
import { bigNumberTransform } from "../../../utils/utils";
import { mapMapping } from "../../../assets/map/provinceData";
import { getThemeColor } from "../../../components/chart/options/theme";
import { initCanvas } from "../../../utils/canvas";
import { queryThreatIncidentGrade } from "../../../api/screen/attackSituationScreen";
const mapData = reactive(mapMapping());
const { currentCity, currentDate } = useGlobalSafeScreen();
const list = ref([
  { threatGrade: "高危" },
  { threatGrade: "中危" },
  { threatGrade: "低危" },
]);
const getData = async () => {
  let res = await queryThreatIncidentGrade({
    type: currentDate.value,
    region: currentCity.value?.indexOf("省") > 0 ? null : currentCity.value,
  });

  list.value = [
    { threatGrade: "高危" },
    { threatGrade: "中危" },
    { threatGrade: "低危" },
  ];
  const { code, data } = res || {};
  if (code === 200 && data) {
    data.forEach((item) => {
      let index = list.value.findIndex(
        (child) => item.threatGrade === child.threatGrade
      );
      item.gradeNum = bigNumberTransform(item.gradeNum);
      list.value[index] = item;
    });
    // list.value = data;
    list.value.map((item) => {
      if (item.threatGrade == "高危") {
        initCanvas(
          document.getElementById("highlevel"),
          item.gradePercent?.split("%")[0] || 0,
          "rgba(212,102,94)",
          "rgba(212,102,94,0.35)"
        );
      } else if (item.threatGrade == "中危") {
        initCanvas(
          document.getElementById("middlelevel"),
          item.gradePercent?.split("%")[0] || 0,
          "rgba(247,209,75)",
          "rgba(247,209,75,0.35)"
        );
      } else {
        initCanvas(
          document.getElementById("lowlevel"),
          item.gradePercent?.split("%")[0] || 0,
          "rgba(43,219,245)",
          "rgba(43,219,245,0.35)"
        );
      }
    });
  }
};
watch(currentCity, () => {
  getData();
});

watch(currentDate, () => {
  getData();
});
onMounted(() => {
  getData();
});
</script>
<style lang="scss" scoped>
.block {
  padding: 50px 10px 10px;
  display: flex;

  // min-height: 265px;
  .ya-left {
    display: flex;
    flex-direction: column;
    max-width: 115px;

    .ya-item {
      display: flex;
      padding-bottom: 30px;

      img {
        width: 50px;
        height: 54px;
        margin-right: 15px;
      }

      .ya-item-desc {
        display: flex;
        flex-direction: column;
        font-size: 20px;
        color: #9aefff;

        .level {
          color: #8cecff;
          font-size: 16px;
        }

        .num {
          font-family: YouSheBiaoTiHei;
          white-space: nowrap;
          width: 100px;
        }
      }
    }
  }

  .ya-right {
    position: relative;
    flex: 1;
    margin-left: 38px;

    .ya-boll {
      position: absolute;
      left: 10px;
      top: -25px;
      background-image: url("../../../assets/image/screen/icon_process_red.png");
      background-size: 100% 100%;
      width: 120px;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;

      &:nth-child(2) {
        left: 105px;
        top: 25px;
        background-image: url("../../../assets/image/screen/icon_process_yellow.png");
      }

      &:nth-child(3) {
        left: 18px;
        top: 120px;
        background-image: url("../../../assets/image/screen/icon_process_blue.png");
      }
    }
  }
}
</style>
