<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/threatComponents/SecurityThreatEventAnalysis.vue
 * @Date: 2022-09-09 10:06:21
 * @Description: 
 * @LastEditTime: 2023-09-01 16:25:37
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { Teleport, reactive, ref, unref, onMounted, watch } from "vue";
import { useGlobalThreatEvent } from "../logic/useGlobalThreatEvent";
import CircularProgress from "../../../components/chart/RingProcessChart/CircularProgress.vue";
import { useGetChartData } from "../../../components/chart/logic";
import { getThemeColor } from "../../../components/chart/options/theme";
import { mapMapping } from "../../../assets/map/provinceData";
import { bigNumberTransform } from "../../../utils/utils";
const mapData = mapMapping();
const { currentCity, currentDate } = useGlobalThreatEvent();

const list = ref([]) as any;

const colorMap = {
  风险总数: "#08EAFF",
  木马数量: "#FF070C",
  僵尸数量: "#FDF77E",
  蠕虫数量: "#AE5DA1",
  病毒数量: "#F2782B",
  漏洞数量: "#26E2C9",
};

const keyToStrMap = {
  total: "风险总数",
  vulnerabilityNum: "漏洞数量",
  zombieNum: "僵尸数量",
  wornNum: "蠕虫数量",
  virusNum: "病毒数量",
  trojanHorseNum: "木马数量",
};

const handleResData = (res) => {
  return res;
  return res.map((item, i) => {
    // const precent =
    //   item.name === "total"
    //     ? item.num === 0
    //       ? 0
    //       : 100
    //     : item.pre && item.pre.replace("%", "");
    return {
      name: item.name,
      // color:
      //   (getThemeColor().colorList && getThemeColor().colorList[i]) ||
      //   colorMap[keyToStrMap[item.name]],
      value: item.num,
      // unit: item.unit,
      // precent: precent,
    };
  });
};
const init = async () => {
  const params = {
    type: unref(currentDate),
  } as any;
  if (unref(currentCity) !== mapData?.name) {
    params.region = unref(currentCity);
  }
  const res = await useGetChartData(
    "threatIncidentScreen/searchSecurityThreatIncident",
    handleResData,
    params
  );
  // console.log("res", res);
  list.value = res || []; // 数据完善后可以放开
  list.value.forEach((item) => {
    item.num = bigNumberTransform(item.num);
  });
};

onMounted(() => {
  init();
});

watch(currentCity, () => {
  init();
});

watch(currentDate, () => {
  init();
});
</script>

<template>
  <div style="flex: 1">
    <div class="module-block" v-if="list.length > 0">
      <div class="item" v-for="(item, i) in list" :key="i">
        <div class="flex-st">
          <div>
            <img src="../../../assets/image/screen/threat-event/risk1.png" v-if="item.name == '木马'" alt="" />
            <img src="../../../assets/image/screen/threat-event/risk2.png" v-if="item.name == '僵尸'" alt="" />
            <img src="../../../assets/image/screen/threat-event/risk3.png" v-if="item.name == '蠕虫'" alt="" />
            <img src="../../../assets/image/screen/threat-event/risk4.png" v-if="item.name == '漏洞'" alt="" />
          </div>
          <div class="info">
            <div class="number">{{ item.num }}</div>
            <div>{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <ya-empty v-else></ya-empty>
  </div>
</template>

<style lang="scss" scoped>
.positionRelative {
  margin-top: 64px;
  margin-bottom: 63px;
}

.module-block {
  width: 100%;
  // height: 170px;
  display: flex;
  flex-wrap: wrap;
  padding: 20px 0;
  box-sizing: border-box;
  justify-content: space-between;

  .item {
    width: 50%;
    display: flex;
    text-align: center;
    font-weight: 400;
    color: #8cecff;
    font-size: 15px;
    margin-bottom: 15px;

    img {
      width: 51px;
      height: 53px;
    }

    .number {
      color: #ffffff;
      font-size: 18px;
      font-family: YouSheBiaoTiHei;
    }
  }
}

.flex-st {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.info {
  text-align: left;
  margin-left: 8px;
}
</style>
