<template>
  <el-tag 
    :type="type" 
    :size="size" 
    :effect="effect"
    :class="['clickable-tag', { 'has-action': actualRightIcon !== null}]"
    :style="{ width: width ? `${width}px` : 'auto' }"
    @click="handleClick">
    <!-- 左侧图标：支持 Vue 组件（Element 图标，线条）或字符串（如 FontAwesome class，可实心） -->
    <i v-if="leftIcon && isLeftIconString" :class="leftIcon" class="left-icon left-icon--fa"></i>
    <el-icon v-else-if="leftIcon" :size="size" class="left-icon">
      <component :is="leftIcon" />
    </el-icon>
    <!-- 主要内容 -->
    <slot></slot>
    
    <!-- 中间图标：支持 Vue 组件或字符串（如 FontAwesome class） -->
    <i v-if="middleIcon && isMiddleIconString" :class="middleIcon" class="middle-icon middle-icon--fa"></i>
    <el-icon v-else-if="middleIcon" :size="size" class="middle-icon">
      <component :is="middleIcon" />
    </el-icon>
    
    <!-- 右侧图标 -->
    <el-icon 
      v-if="actualRightIcon !== null" 
      :size="size" 
      class="right-icon">
      <component :is="actualRightIcon" />
    </el-icon>
  </el-tag>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { InfoFilled, Right } from '@element-plus/icons-vue'

interface Props {
  type?: 'success' | 'info' | 'warning' | 'danger' | 'primary'
  size?: 'large' | 'default' | 'small'
  effect?: 'dark' | 'light' | 'plain'  // 主题，与 el-tag 一致
  leftIcon?: any  // 左侧图标：Vue 组件（Element 图标）或字符串（如 FontAwesome class 'fa-solid fa-circle-xmark'）
  middleIcon?: any  // 中间图标：Vue 组件或字符串（如 FontAwesome class）
  rightIcon?: any  // 右侧图标：默认 InfoFilled（表示「可查看详情」）；传 null 不显示；也可用 Right（跳转）、View（查看）等
  width?: string | number  // 自定义宽度
}

const props = withDefaults(defineProps<Props>(), {
  type: 'primary',
  size: 'default',
  effect: 'light',
  leftIcon: undefined,
  middleIcon: undefined,
  rightIcon: undefined,
  width: undefined
})

// 左侧/中间图标为字符串时（如 FontAwesome class）用 <i> 渲染，与 AuditState 实心一致
const isLeftIconString = computed(() => typeof props.leftIcon === 'string')
const isMiddleIconString = computed(() => typeof props.middleIcon === 'string')

// 获取实际的右侧图标：未传值时使用默认图标，传 null 则不显示
const actualRightIcon = computed(() => {
  if (props.rightIcon === null) return null
  return props.rightIcon || Right
})

const emit = defineEmits<{
  click: []
}>()

const handleClick = () => {
  emit('click')
}
</script>

<script lang="ts">
export default {
  name: 'ClickableTag'
}
</script>

<style scoped lang="scss">
.clickable-tag {
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  .left-icon {
    margin-right: 4px;
  }
  
  // 覆盖 el-tag 的内部结构
  :deep(.el-tag__content) {
    display: flex !important;
    align-items: center !important;
    gap: 4px;
  }
  
  // 有交互功能时才显示手型光标和悬停效果
  &.has-action {
    cursor: pointer;
    &:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);   
      .right-icon {
        transform: translateX(2px);
      }
    }
  }
  .middle-icon {
    animation: pulse 1.5s ease-in-out infinite;
  }
  .right-icon {
    opacity: 0.7;
    transition: all 0.2s;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
</style>
