<template>
  <div class="pie-container vue-echarts-3d-components-pie" :class="`legend-${legendPosition}`">
    <PieEcharts class="pie-3d-chart" :pieStyle="pieStyle" :pieData="processedData" :pieImageConfig="pieImageConfig"
      :pieImageStyle="pieImageStyle" :sortOrder="sortOrder" :pieHeight="pieHeight"></PieEcharts>
    <!-- 引入公共图例组件 -->
    <PieLegend :legend-data="processedData" :legend-position="legendPosition" :legend="legend" :legend-text="legendText"
      :legend-text-color="legendTextColor" :legend-text-size="legendTextSize" :legend-value="legendValue"
      :legend-value-size="legendValueSize" :legend-percent="legendPercent" :legend-percent-size="legendPercentSize" />
  </div>
</template>

<script>
import PieEcharts from './PieEcharts.vue'
import PieLegend from './PieLegend.vue'
export default {
  name: 'PieEchartsWrapper',
  components: {
    PieEcharts,
    PieLegend
  },
  props: {
    // 饼图宽高
    pieStyle: {
      type: Object,
      default: () => ({
        width: '232px',
        height: '160px',
      })
    },
    // 饼图背景图片相关配置
    pieImageConfig: {
      type: Object,
      default: () => ({
        top: '12%',
        left: '5%',
        bounding: 'raw',
        origin: [0.5, 0.5],
        scale: [1.05, 1.05],
      })
    },
    // 背景图样式相关配置
    pieImageStyle: {
      type: Object,
      default: () => ({
        image: null,
        opacity: 0.8,
        width: 200,
        height: 150,
        rotate: -12
      })
    },
    // 饼图数据
    pieData: {
      type: Array,
      default: () => []
    },
    // 图例位置，可选值: 'top', 'bottom', 'left', 'right'
    legendPosition: {
      type: String,
      default: 'right',
      validator: (value) => {
        return ['top', 'bottom', 'left', 'right'].includes(value);
      }
    },
    // 是否显示图例文本（分类名称）
    legend: {
      type: Boolean,
      default: true,
      description: '控制legend标签的显示'
    },
    // 是否显示图例文本（分类名称）
    legendText: {
      type: Boolean,
      default: true,
      description: '控制是否显示图例中的文本标签'
    },
    // 图例文本字体颜色
    legendTextColor: {
      type: String,
      default: '#333333',
      description: '控制图例文本的字体颜色'
    },
    // 图例文本字体大小
    legendTextSize: {
      type: [Number, String],
      default: 16,
      description: '控制图例文本的字体大小',
      validator: (value) => {
        if (typeof value === 'number') {
          return value > 0;
        }
        if (typeof value === 'string') {
          // 支持 '16px', '1rem' 等格式
          return /^\d+(\.\d+)?(px|rem|em|%)?$/.test(value);
        }
        return false;
      }
    },
    // 是否显示图例数值（原始数据值）
    legendValue: {
      type: Boolean,
      default: true,
      description: '控制是否显示图例中的数值'
    },
    // 图例数值字体颜色
    legendValueColor: {
      type: String,
      default: '#1A1A1A',
      description: '控制图例数值的字体颜色'
    },
    // 图例数值字体大小
    legendValueSize: {
      type: [Number, String],
      default: 20,
      description: '控制图例数值的字体大小',
      validator: (value) => {
        if (typeof value === 'number') {
          return value > 0;
        }
        if (typeof value === 'string') {
          return /^\d+(\.\d+)?(px|rem|em|%)?$/.test(value);
        }
        return false;
      }
    },
    // 是否显示图例百分比
    legendPercent: {
      type: Boolean,
      default: true,
      description: '控制是否显示图例中的百分比'
    },
    // 图例百分比字体颜色
    legendPercentColor: {
      type: String,
      default: '#1A1A1A',
      description: '控制图例百分比的字体颜色'
    },
    // 图例百分比字体大小
    legendPercentSize: {
      type: [Number, String],
      default: 20,
      description: '控制图例百分比的字体大小',
      validator: (value) => {
        if (typeof value === 'number') {
          return value > 0;
        }
        if (typeof value === 'string') {
          return /^\d+(\.\d+)?(px|rem|em|%)?$/.test(value);
        }
        return false;
      }
    },
    // 颜色列表
    colorList: {
      type: Array,
      default: () => [
        '#0A89FF', '#28FFD9', '#7366FF', '#FFDC2F', '#FF6F11',
        '#FF3A1F', '#06FE94', '#83A8FF', '#9FE4FF', '#CA9DFF',
        '#FFBC8E', '#FFF073', '#C3FF8E', '#FF9D4F', '#FF6F4F'
      ]
    },
    // 数据排序方式
    // - 'asc': 按数值从小到大升序排列
    // - 'desc': 按数值从大到小降序排列
    sortOrder: {
      type: String,
      default: 'desc',
      description: '控制饼图数据的排序方式',
      validator: (value) => {
        return ['asc', 'desc'].includes(value);
      }
    },
    // 饼图高度
    pieHeight: {
      type: Number,
      description: '饼图高度'
    },
  },
  data() {
    return {
      // 其他数据可以放在这里
    }
  },
  mounted() {
  },
  methods: {
    // 处理饼图数据，避免在模板中直接计算百分比
    processPieData() {
      // 颜色配置列表
      const total = this.pieData.reduce((sum, item) => sum + item.value, 0);
      return this.pieData.map((item, index) => ({
        ...item,
        percent: item.percent ? item.percent : total > 0 ? Math.round((item.value / total) * 100) : 0,
        color: item.color || item.itemStyle?.color || this.colorList[index % this.colorList.length]
      }));
    },

  },
  computed: {
    processedData() {
      // 获取处理后的数据并根据sortOrder参数决定升序或降序排序
      const data = this.processPieData();
      return data.sort((a, b) => {
        const valueA = a.value || 0;
        const valueB = b.value || 0;
        return this.sortOrder === 'asc' ? valueA - valueB : valueB - valueA;
      });
    }
  }
}
</script>

<style>
/* 外层容器基础样式 */
.vue-echarts-3d-components-pie.pie-container {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  /* 确保有足够高度 */
}

/* 基础样式已在PieLegend组件中定义 */

/* 图例在右侧的样式（默认） */
.vue-echarts-3d-components-pie.legend-right {
  flex-direction: row;
}

/* 右侧布局样式已在PieLegend组件中定义 */

/* 图例在左侧的样式 */
.vue-echarts-3d-components-pie.legend-left {
  flex-direction: row;
}

.vue-echarts-3d-components-pie.legend-left .pie-3d-chart {
  order: 2;
  margin-left: 32px;
}

/* 左侧布局样式已在PieLegend组件中定义 */

/* 图例在上部的样式 */
.vue-echarts-3d-components-pie.legend-top {
  flex-direction: column;
  align-items: center;
}

.vue-echarts-3d-components-pie.legend-top .pie-3d-chart {
  order: 2;
  margin-top: 20px;
}

/* 顶部布局样式已在PieLegend组件中定义 */

/* 图例在下部的样式 */
.vue-echarts-3d-components-pie.legend-bottom {
  flex-direction: column;
  align-items: center;
}

.vue-echarts-3d-components-pie.legend-bottom .pie-3d-chart {
  order: 1;
}

/* 底部布局样式已在PieLegend组件中定义 */
</style>