<template>
  <div
    class="screen-common-component"
    style="
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    "
  >
    <ScreenComHeader :module-id="moduleId" title="设备监控" />
    <div ref="chartRef" style="width: 85%; height: 80%"></div>
  </div>
</template>

<script lang="ts" setup>
import ScreenComHeader from "@/views/screens/configs/screenComHeader.vue";
import * as echarts from "echarts";
import { chartLegend } from "@/views/screens/configs/chartsConfig";
import { deviceMonitor } from "@/api/screens";

const props = defineProps({
  moduleId: {
    type: String,
    required: true,
  },
});

const chartRef = ref(null);
const bigScreenData: any = inject("bigScreenData");
onMounted(async () => {
  const chart = echarts.init(chartRef.value);

  let result: any = await deviceMonitor();

  const options = {
    color: ["#4caf50", "#ffc107", "#b61945", "#607d8b"],
    tooltip: {
      trigger: "item",
      textStyle: {
        fontSize: bigScreenData.value.fontSize * 1.8,
      },
    },
    textStyle: {
      fontSize: bigScreenData.value.fontSize * 2,
    },
    legend: chartLegend,
    series: [
      {
        name: "设备监控",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: "center",
          color: "#fff",
          fontSize: bigScreenData.value.fontSize * 3,
          formatter: function () {
            return `设备总数：${result.data.total}`;
          },
        },
        data: [
          { value: result.data.runNum, name: "运行" },
          { value: result.data.offLineNum, name: "离线" },
          { value: result.data.faultNum, name: "故障" },
          { value: result.data.repairNum, name: "维修" },
        ],
      },
    ],
  };

  chart.setOption(options);
});
</script>

<style lang="scss" scoped></style>
