<template>
  <div class="legend" :class="`${legendPosition}-legend`" v-if="legend">
    <div v-for="item in legendData" :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}, ${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}, ${lightenColor(item.color, 30)}, ${item.color})`,
        WebkitBackgroundClip: 'text',
        backgroundClip: 'text',
        color: 'transparent'
      }">
        {{ item.percent }}%
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PieLegend',
  props: {
    // 图例数据
    legendData: {
      type: Array,
      required: true,
      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;
      }
    }
  },
  methods: {
    // 颜色变亮函数
    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);
    }
  }
}
</script>

<style scoped>
/* 图例基础样式 */
.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);
}

/* 图例在右侧的样式（默认） */
.right-legend {
  width: 60%;
  padding-left: 32px;
}

.right-legend .legend-item {
  margin-left: 16px;
}

/* 图例在左侧的样式 */
.left-legend {
  width: 60%;
  padding-right: 32px;
}

.left-legend .legend-item {
  margin-left: 16px;
}

/* 图例在上部的样式 */
.top-legend {
  width: 100%;
  max-height: 80px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: #ddd #f5f5f5;
}

.top-legend::-webkit-scrollbar {
  height: 6px;
}

.top-legend::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 3px;
}

.top-legend::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

.top-legend .legend-item {
  margin-right: 20px;
  margin-bottom: 0;
  margin-left: 16px;
  white-space: nowrap;
}

/* 图例在下部的样式 */
.bottom-legend {
  width: 100%;
  max-height: 80px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: #ddd #f5f5f5;
}

.bottom-legend::-webkit-scrollbar {
  height: 6px;
}

.bottom-legend::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 3px;
}

.bottom-legend::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 3px;
}

.bottom-legend .legend-item {
  margin-right: 20px;
  margin-bottom: 0;
  margin-left: 16px;
  white-space: nowrap;
}
</style>