<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/screen/SafeComponents/SecurityEventTop10.vue
 * @Date: 2022-09-07 09:33:33
 * @Description: 
 * @LastEditTime: 2023-09-01 15:30:41
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { reactive, ref, onMounted, watch, unref, computed, defineProps, defineAsyncComponent } from 'vue'
import { useGetChartData } from "../../../components/chart/logic";
import { useGlobalSafeScreen } from "../logic/useGlobalSafeScreen";
import RoseChart from "../../../components/chart/RoseChart/RoseChart.vue";
const { currentDate, currentCity } = useGlobalSafeScreen();
import { mapMapping } from "../../../assets/map/provinceData";
const mapData = mapMapping();
const chartData = ref([]) as any;

const handleInterFaceData = (res) => {
  return res.map((item) => {
    return {
      name: item.securityEventType,
      unit: item.unit,
      value: item.num,
      percent: item.ratio,
    };
  });
};

const getChartData = async () => {
  const params = {
    type: unref(currentDate),
  } as any;
  if (unref(currentCity) !== mapData?.name) {
    params.region = unref(currentCity);
  }
  const res = await useGetChartData(
    "largeScreen/comprehensiveSituation/querySecurityEventNum",
    handleInterFaceData,
    params
  );
  chartData.value = res || [];
};

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

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

watch(currentDate, () => {
  getChartData();
});

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

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

<template>
  <div class="block">
    <RoseChart class="safe-block-height1-chart" v-if="chartData.length" name="告警事件TOP10" :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)',
    ]" :chartData="chartData" :legendShow="false" theme="dark" :labelFormatter="labelFormatter" />
    <ya-empty v-else></ya-empty>
  </div>
</template>

<style lang="scss" scoped>
.block {
  width: 100%;
  // height: 100%;
  flex: 1;
  // padding-top: 16px;
}
</style>
