<template>
  <el-button
    :class="['custom-color-button']"
    :style="buttonStyles"
    v-bind="$attrs"
  >
    <slot></slot>
  </el-button>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  /**
   * 按钮主题颜色，如 #0076ff
   */
  color: {
    type: String,
    default: '#0076ff',
    validator: (value) => {
      // 验证是否为有效的颜色值（hex、rgb、rgba）
      return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(value) || 
             /^rgb/.test(value) || 
             /^rgba/.test(value)
    }
  }
})

/**
 * 将颜色转换为 rgba（支持 hex、rgb、rgba）
 * @param {String} color - 颜色值，如 #0076ff、rgb(0, 118, 255)、rgba(0, 118, 255, 1)
 * @param {Number} alpha - 透明度，0-1（仅在 color 为 hex 或 rgb 时使用）
 * @returns {String} rgba 颜色值
 */
const colorToRgba = (color, alpha = 1) => {
  // 如果已经是 rgba 格式，直接返回
  if (color.startsWith('rgba')) {
    return color
  }
  
  // 如果是 rgb 格式，转换为 rgba
  if (color.startsWith('rgb')) {
    return color.replace('rgb', 'rgba').replace(')', `, ${alpha})`)
  }
  
  // 如果是 hex 格式，转换为 rgba
  if (color.startsWith('#')) {
    const cleanHex = color.replace('#', '')
    
    // 处理 3 位 hex 颜色
    const fullHex = cleanHex.length === 3
      ? cleanHex.split('').map(char => char + char).join('')
      : cleanHex
    
    const r = parseInt(fullHex.substring(0, 2), 16)
    const g = parseInt(fullHex.substring(2, 4), 16)
    const b = parseInt(fullHex.substring(4, 6), 16)
    
    return `rgba(${r}, ${g}, ${b}, ${alpha})`
  }
  
  // 如果都不匹配，返回原值（可能是 CSS 颜色名称）
  return color
}

/**
 * 计算按钮样式（使用 CSS 变量，便于在 CSS 中使用）
 */
const buttonStyles = computed(() => {
  const baseColor = props.color
  const lightBgColor = colorToRgba(baseColor, 0.1)
  
  return {
    '--custom-color': baseColor,
    '--custom-bg': lightBgColor,
    '--custom-border': baseColor,
    '--custom-text': baseColor,
    transition: 'all 0.3s ease',
  }
})
</script>

<style lang="scss" scoped>
.custom-color-button {
  // 默认状态：边框和文字使用主题色，背景使用浅色
  color: var(--custom-text) !important;
  background-color: var(--custom-bg) !important;
  border-color: var(--custom-border) !important;
  
  // 悬浮状态：文字白色，背景纯色
  &:not(.is-disabled):hover {
    color: #ffffff !important;
    background-color: var(--custom-color) !important;
    border-color: var(--custom-color) !important;
    opacity: 1 !important;
  }
  
  // 禁用状态
  &.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}
</style>
