<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/AttackComponents/attackTypeDistribution.vue
 * @Date: 2022-09-06 08:31:19
 * @Description: 
 * @LastEditTime: 2023-09-01 18:27:46
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { ref, onMounted, watch, reactive, unref } from 'vue'
import { useGetChartData } from "../../../components/chart/logic";
import { useGlobalAttackMap } from "../logic/useGlobalAttackMap";
import RoseChart from "../../../components/chart/RoseChart/RoseChart.vue";
import { mapMapping } from "../../../assets/map/provinceData";
const mapData = reactive(mapMapping());
const { currentCity } = useGlobalAttackMap();

const chartData = ref([]) as any;

const handleChartRes = (res) => {
  return res.map((item) => {
    return {
      name: item.attackType,
      value: item.count,
      unit: item.unit,
      percent: item.ratio,
    };
  });
};
const getChartData = async () => {
  const params = {} as any;
  if (unref(currentCity) !== mapData?.name) {
    params.attackDestRegion = unref(currentCity);
  }
  const _data = await useGetChartData(
    "bigScreen/netAttack/attackTypeStat",
    handleChartRes,
    params
  );
  chartData.value = _data || [];
};

const labelFormatter = (params) => {
  return (
    "{name|" +
    params.name +
    "}\n\n{value|" +
    params.data.realValue +
    "}\n\n{percent|" +
    params.data.percent +
    "%}"
  );
};

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

const init = () => {
  getChartData();
};

onMounted(() => {
  init();
});
</script>

<template>
  <div class="block-con">
    <RoseChart v-if="chartData.length" :colors="[
      'RGBA(4, 186, 207, 1)',
      'RGBA(92, 216, 166, 1)',
      'RGBA(91, 144, 250, 1)',
      'RGBA(110, 200, 235, 1)',
      'RGBA(93, 112, 145, 1)',
      'RGBA(146, 111, 201, 1)',
      'RGBA(232, 105, 73, 1)',
      'RGBA(255, 157, 76, 1)',
      'RGBA(246, 189, 22, 1)',
      'RGBA(255, 152, 197, 1)',
    ]" name="攻击事件TOP10" :chartData="chartData" :legendShow="false" theme="dark" :labelFormatter="labelFormatter" />
    <ya-empty v-else></ya-empty>
  </div>
</template>

<style lang="scss" scoped>
.block-con {
  width: 100%;
  height: 298px;
  margin-top: 10px;
}
</style>
