<template>
  <!-- 图表容器 -->
  <div class="chart-container">
    <div class="chart-header">
      <h2>设备状态分布</h2>
      <div class="chart-actions">
        <img src="@/assets/demo/more.png" alt="">
      </div>
    </div>
    <!-- 使用ref引用以便在JS中获取该DOM元素来渲染图表 -->
    <div ref="chartRef" class="chart-content" />
  </div>
</template>
<script setup>
import * as echarts from "echarts";
// 导入Vue的ref和onMounted响应式API和生命周期钩子
import { ref, onMounted } from "vue";

// 创建图表容器的ref引用，用于获取DOM元素
const chartRef = ref(null);

// 定义props
const props = defineProps({
  chartData: {
    type: Object,
    default: () => ({
      "正常运行": { value: 40, color: '#43CF7C' },
      "轻微异常": { value: 30, color: '#FFC300' },
      "故障": { value: 20, color: '#FF5733' },
      "维护中": { value: 10, color: '#2A82E4' }
    })
  }
});

// 组件挂载后执行的初始化逻辑
onMounted(() => {
  // 确保DOM元素已渲染完成
  if (chartRef.value) {
    // 使用ECharts初始化图表实例
    var myChart3 = echarts.init(chartRef.value);

    // 使用从props获取的数据
    const statusData = props.chartData;

    // 计算数据总和
    const totalSum = Object.values(statusData).reduce((sum, item) => sum + item.value, 0);

    // 定义空白占位区域的样式配置
    const placeItemStyle = {
      label: { show: false }, // 不显示标签
      labelLine: { show: false }, // 不显示标签线
      itemStyle: { color: "#cbccd0" }, // 设置占位区域的颜色为灰色
      emphasis: { // 鼠标悬停时的样式
        label: { show: false },
        labelLine: { show: false }
      }
    };

    // 设置图表配置项
    myChart3.setOption({
      // 提示框配置（默认显示）
      tooltip: {
        formatter: function (params) {
          // 计算当前数据占总和的百分比
          const percentage = ((params.value / totalSum) * 100).toFixed(1);
          return `${params.name}: ${percentage}%`;
        }
      },
      // 图例配置
    legend: {
      top: 'middle',
      orient: 'vertical',
      right:'20%', // 调整图例位置，使其更靠近左侧
        data: Object.keys(statusData), // 使用props数据的键作为图例数据项
      // 图例格式化函数，用于自定义图例的显示内容
      formatter: function (name) {
        // 计算当前状态占总和的百分比
        const percentage = ((statusData[name].value / totalSum) * 100).toFixed(1);
        // 返回格式化后的图例文本（状态名称+百分比）
        return `${name} ${percentage}%`;
      }
    },
      // 图表系列配置（多个环形图组成的嵌套饼图）
      series: [
        // 外层环：正常运行状态（绿色）
        {
          name: "设备状态", // 系列名称
          label: {
            show: false
          },
          type: "pie", // 图表类型为饼图
          center: ['30%', '50%'], // 饼图中心位置，往左移
          radius: ["55%", "60%"], // 设置圆环的内半径和外半径（占容器百分比）
          zlevel: 1, // 设置图层级别，值越大越在顶层
          hoverAnimation: false, // 禁用鼠标悬停动画效果
          data: [
            { // 正常运行部分
              value: statusData["正常运行"].value, // 使用实际数值
              name: "正常运行", // 名称
              itemStyle: { color: '#43CF7C' } // 设置绿色
            },
            { // 空白占位部分（使圆环显示为圆弧）
              value: totalSum - statusData["正常运行"].value, // 计算值，使总百分比为总和
              name: "", // 无名称
              ...placeItemStyle // 应用占位区域样式
            }
          ]
        },
        // 第二环：轻微异常状态（黄色）
        {
          name: "设备状态",
          label: {
            show: false
          },
          type: "pie",
          center: ['30%', '50%'], // 饼图中心位置，往左移
          radius: ["45%", "50%"], // 比外层环稍小
          zlevel: 2,
          hoverAnimation: false,
          data: [
            { // 轻微异常部分
              value: statusData["轻微异常"].value,
              name: "轻微异常",
              itemStyle: { color: '#FFC300' } // 设置黄色
            },
            { // 空白占位部分
              value: totalSum - statusData["轻微异常"].value,
              name: "",
              ...placeItemStyle
            }
          ]
        },
        // 第三环：故障状态（红色）
        {
          name: "设备状态",
          label: {
            show: false
          },
          type: "pie",
          center: ['30%', '50%'], // 饼图中心位置，往左移
          radius: ["35%", "40%"], // 更小的环
          zlevel: 3,
          hoverAnimation: false,
          data: [
            { // 故障部分
              value: statusData["故障"].value,
              name: "故障",
              itemStyle: { color: '#FF5733' } // 设置红色
            },
            { // 空白占位部分
              value: totalSum - statusData["故障"].value,
              name: "",
              ...placeItemStyle
            }
          ]
        },
        // 内层环：维护中状态（蓝色）
        {
          name: "设备状态",
          label: {
            show: false
          },
          type: "pie",
          center: ['30%', '50%'], // 饼图中心位置，往左移
          radius: ["25%", "30%"], // 最内层环
          zlevel: 4,
          hoverAnimation: false,
          data: [
            { // 维护中部分
              value: statusData["维护中"].value,
              name: "维护中",
              itemStyle: { color: '#2A82E4' } // 设置蓝色
            },
            { // 空白占位部分
              value: totalSum - statusData["维护中"].value,
              name: "",
              ...placeItemStyle
            }
          ]
        }
      ]
    });

    // 响应窗口大小变化
    const handleResize = () => {
      if (myChart3) {
        myChart3.resize();
      }
    };

    window.addEventListener('resize', handleResize);

    // 清理函数
    return () => {
      window.removeEventListener('resize', handleResize);
      if (myChart3) {
        myChart3.dispose();
      }
    };
  }
});
</script>


<style scoped>
/* 设置图表容器的尺寸 */
.chart-container {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  height: 400px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.chart-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.chart-actions img {
  cursor: pointer;
  width: 20px;
  height: 20px;
}

.chart-content {
  width: 100%;
  height: calc(100% - 70px);
  padding: 10px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .chart-container {
    height: 350px;
  }

  .chart-content {
    height: calc(100% - 70px);
  }
}

@media (max-width: 480px) {
  .chart-container {
    height: 300px;
  }

  .chart-content {
    height: calc(100% - 70px);
  }
}
</style>