<template>
    <div 
      class="svg-icon-wrapper"
      :style="{ width: size + 'px', height: size + 'px' }"
      @click="handleClick"
      @mouseenter="isHovered = true"
      @mouseleave="isHovered = false"
    >
      <div 
        class="svg-icon"
        v-html="svgContent"
        :style="{
          '--icon-color': isHovered ? hoverColor : color,
          '--icon-hover-color': hoverColor
        }"
      ></div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'SvgIcon',
    props: {
      // SVG文件路径（必须）
      path: {
        type: String,
        required: true,
        validator: value => value.endsWith('.svg')
      },
      // 图标大小（像素）
      size: {
        type: Number,
        default: 24
      },
      // 默认颜色
      color: {
        type: String,
        default: '#333333'
      },
      // 悬停颜色
      hoverColor: {
        type: String,
        default: '#409EFF'
      },
      // 禁用状态
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        svgContent: '',
        isHovered: false
      }
    },
    watch: {
      path: {
        immediate: true,
        handler: 'loadSvg'
      }
    },
    methods: {
      async loadSvg() {
        try {
          // 使用动态import加载SVG文件
          const response = await fetch(this.path)
          if (!response.ok) throw new Error('SVG加载失败')
          this.svgContent = await response.text()
          
          // 如果SVG中有fill属性，替换为currentColor以便CSS控制
          this.svgContent = this.svgContent.replace(/fill="[^"]*"/g, 'fill="currentColor"')
        } catch (error) {
          console.error('加载SVG图标失败:', error)
          this.svgContent = ''
        }
      },
      handleClick(event) {
        if (!this.disabled) {
          this.$emit('click', event)
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .svg-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .svg-icon-wrapper:hover {
    opacity: 0.8;
  }
  
  .svg-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color);
    transition: color 0.3s;
  }
  
  .svg-icon:hover {
    color: var(--icon-hover-color);
  }
  
  .svg-icon-wrapper[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
  }
  
  .svg-icon >>> path {
    fill: currentColor;
  }
  
  .svg-icon >>> circle {
    fill: currentColor;
  }
  </style>