<template>
  <div class="pie-container" :class="`legend-${legendPosition}`">
    <PieEcharts class="pie-3d-chart" :pieData="pieData" :pieImage="pieImage" :pieImageOpacity="pieImageOpacity"
      :pieImageWidth="pieImageWidth" :pieImageHeight="pieImageHeight" :pieImageRotate="pieImageRotate"></PieEcharts>
    <div class="legend" :class="`${legendPosition}-legend`" v-if="legend">
      <div v-for="item in processedData" :key="item.name" class="legend-item">
        <div class="legend-color" :style="{ background: item.color }"></div>
        <span v-if="legendText" class="legend-item-text"
          :style="{ color: legendTextColor, fontSize: typeof legendTextSize === 'number' ? legendTextSize + 'px' : legendTextSize }">{{
            item.name }}</span>
        <span v-if="legendValue" class="legend-item-value" :style="{
          fontSize: typeof legendValueSize === 'number' ? legendValueSize + 'px' : legendValueSize,
          background: `linear-gradient(90deg, ${item.color}, ${this.lightenColor(item.color, 30)}, ${item.color})`,
          WebkitBackgroundClip: 'text',
          backgroundClip: 'text',
          color: 'transparent'
        }">
          {{ item.value }}
        </span>
        <span v-if="legendPercent" class="legend-item-percent" :style="{
          fontSize: typeof legendPercentSize === 'number' ? legendPercentSize + 'px' : legendPercentSize,
          background: `linear-gradient(90deg, ${item.color}, ${this.lightenColor(item.color, 30)}, ${item.color})`,
          WebkitBackgroundClip: 'text',
          backgroundClip: 'text',
          color: 'transparent'
        }">
          {{ item.percent }}%
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import PieEcharts from './PieEcharts.vue'
export default {
  name: 'PieEchartsWrapper',
  components: {
    PieEcharts
  },
  props: {
    // 自定义饼图背景图片
    pieImage: {
      type: String,
      default: null,
      description: '自定义饼图背景图片'
    },
    // 背景图透明度
    pieImageOpacity: {
      type: Number,
      default: 0.8,
      description: '饼图背景图片透明度'
    },
    // 背景图宽度
    pieImageWidth: {
      type: Number,
      default: 200,
      description: '饼图背景图片宽度'
    },
    // 背景图高度
    pieImageHeight: {
      type: Number,
      default: 130,
      description: '饼图背景图片高度'
    },
    // 背景图旋转角度
    pieImageRotate: {
      type: Number,
      default: -5,
      description: '饼图背景图片旋转角度'
    },
    // 饼图数据
    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;
      }
    }
  },
  data() {
    return {
      // 其他数据可以放在这里
    }
  },
  mounted() {
  },
  methods: {
    // 处理饼图数据，避免在模板中直接计算百分比
    processPieData() {
      // 颜色配置列表
      const colorList = [
        '#0A89FF', '#28FFD9', '#7366FF', '#FFDC2F', '#FF6F11',
        '#FF3A1F', '#06FE94', '#83A8FF', '#9FE4FF', '#CA9DFF',
        '#FFBC8E', '#FFF073', '#C3FF8E', '#FF9D4F', '#FF6F4F'
      ];
      const total = this.pieData.reduce((sum, item) => sum + item.value, 0);
      return this.pieData.map((item, index) => ({
        ...item,
        percent: total > 0 ? Math.round((item.value / total) * 100) : 0,
        color: colorList[index % colorList.length]
      }));
    },
    // 颜色变亮函数
    lightenColor(color, percent) {
      // 将十六进制颜色转换为RGB
      const num = parseInt(color.slice(1), 16);
      const amt = Math.round(2.55 * percent);
      const R = (num >> 16) + amt;
      const G = (num >> 8 & 0x00FF) + amt;
      const B = (num & 0x0000FF) + amt;
      return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
        (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
        (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
    }
  },
  computed: {
    processedData() {
      return this.processPieData();
    }
  },
  watch: {

  }
}
</script>

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

/* 图例基础样式 */
.legend {
  max-height: 100%;
  overflow: auto;


}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 12px;


}

.legend-color {
  width: 9px;
  height: 8px;
  transform: skewX(-20deg);
  display: inline-block;
  margin-right: 8px;
}

.legend-item-value,
.legend-item-percent {
  font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  margin-left: 16px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 饼图基础样式 */
.pie-3d-chart {
  width: 232px;
  height: 157px;
}

/* 图例在右侧的样式（默认） */
.legend-right {
  flex-direction: row;


}

.right-legend {
  width: 60%;
  padding-left: 32px;
}

/* 图例在左侧的样式 */
.legend-left {
  flex-direction: row;


}

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

.left-legend {
  width: 60%;
  order: 1;
  padding-right: 32px;
}

/* 图例在上部的样式 */
.legend-top {
  flex-direction: column;
  align-items: center;

}

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

.top-legend {
  order: 1;
  width: 100%;
  max-height: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;


}

.legend-item {
  margin-right: 20px;
  margin-bottom: 8px;
}

/* 图例在下部的样式 */
.legend-bottom {
  flex-direction: column;
  align-items: center;

}

.pie-3d-chart {
  order: 1;
}

.bottom-legend {
  order: 2;
  width: 100%;
  max-height: 100px;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

}

.legend-item {
  margin-right: 20px;
  margin-bottom: 8px;
}
</style>