<template>
  <el-card>
    <div id="main2" />
  </el-card>
</template>

<script setup>
import { onBeforeUnmount, onMounted } from "vue";
import * as echarts from "echarts";
import { getRiskManagement } from "@/request/large_screen_data_display.js";

let myChart2;
const fnGetData = async () => {
  const { riskAll } = await getRiskManagement();
  fnInitEcharts(riskAll);
};
const fnInitEcharts = (data) => {
  myChart2 = echarts.init(document.querySelector("#main2"));
  let acount = 0;
  let bcount = 0;
  let ccount = 0;
  let dcount = 0;
  for (let i = 0; data.length > i; i++) {
    if (data[i].LEVELID) {
      if (data[i].LEVELID === "levelA") acount = data[i].COUNT;
      if (data[i].LEVELID === "levelB") bcount = data[i].COUNT;
      if (data[i].LEVELID === "levelC") ccount = data[i].COUNT;
      if (data[i].LEVELID === "levelD") dcount = data[i].COUNT;
    }
  }
  const option = {
    title: {
      text: "风险分级统计",
      textStyle: {
        fontSize: "14",
        color: "#fff",
        fontWeight: "700",
      },
    },
    color: ["#10b9f8", "#ffc600", "#f49545", "#ec2c26"],
    tooltip: {
      trigger: "item",
    },
    grid: {},
    legend: {
      orient: "vertical",
      left: "6%",
      top: "20%",
      textStyle: {
        color: "#fff",
      },
    },
    series: [
      {
        name: "风险类型",
        type: "pie",
        radius: ["30%", "70%"],
        center: ["64%", "49%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: "rgb(8, 24, 58)",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "18",
            fontWeight: "bold",
            color: "#fff",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: dcount,
            name: "低风险",
          },
          {
            value: ccount,
            name: "一般风险",
          },
          {
            value: bcount,
            name: "较大风险",
          },
          {
            value: acount,
            name: "重大风险",
          },
        ],
      },
    ],
  };
  myChart2.setOption(option);
};
onMounted(() => {
  fnGetData();
  window.onresize = function () {
    myChart2 && myChart2.resize();
  };
});
onBeforeUnmount(() => {
  myChart2 = null;
});
</script>

<style scoped lang="scss">
#main2 {
  width: 100%;
  height: 305px;
}
</style>
