<template>
  <div 
    class="badge-card" 
    :class="{ unlocked, locked: !unlocked }"
    @click="handleClick"
  >
    <div class="badge-icon">
      <el-icon :size="iconSize">
        <component :is="iconComponent" />
      </el-icon>
    </div>
    <div class="badge-info">
      <div class="badge-name">{{ name }}</div>
      <div class="badge-desc">{{ description }}</div>
      <div class="badge-reward" v-if="expReward > 0 && !unlocked">
        +{{ expReward }} 经验
      </div>
      <div class="badge-unlock-time" v-if="unlocked && unlockedAt">
        {{ formatDate(unlockedAt) }}解锁
      </div>
    </div>
    <div class="badge-status" v-if="!unlocked">
      <el-icon><Lock /></el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { 
  Lock, Medal, Star, Reading, Collection, Files, 
  Select, Finished, Trophy, TrendCharts, Clock, 
  Timer, Stopwatch, Operation, Calendar, Rank, 
  Headset, StarFilled 
} from '@element-plus/icons-vue'

interface Props {
  code: string
  name: string
  description: string
  icon: string
  category: string
  expReward?: number
  unlocked?: boolean
  unlockedAt?: string | null
  size?: 'small' | 'medium' | 'large'
}

const props = withDefaults(defineProps<Props>(), {
  expReward: 0,
  unlocked: false,
  unlockedAt: null,
  size: 'medium'
})

const emit = defineEmits<{
  (e: 'click', badge: Props): void
}>()

// 图标映射
const iconMap: Record<string, any> = {
  Medal, Star, Reading, Collection, Files, Select,
  Finished, Trophy, TrendCharts, Clock, Timer,
  Stopwatch, Operation, Calendar, Rank,
  Headset, StarFilled, Lock
}

const iconComponent = computed(() => {
  return iconMap[props.icon] || Medal
})

const sizeMap = {
  small: 24,
  medium: 32,
  large: 48
}

const iconSize = computed(() => sizeMap[props.size])

const formatDate = (dateStr: string) => {
  const date = new Date(dateStr)
  return `${date.getMonth() + 1}/${date.getDate()}`
}

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

<style scoped lang="scss">
.badge-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #EBEEF5;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  &.unlocked {
    .badge-icon {
      background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
      color: #fff;
    }
  }
  
  &.locked {
    opacity: 0.6;
    
    .badge-icon {
      background-color: #F5F7FA;
      color: #C0C4CC;
    }
    
    .badge-name {
      color: #909399;
    }
  }
  
  .badge-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .badge-info {
    flex: 1;
    min-width: 0;
    
    .badge-name {
      font-size: 14px;
      font-weight: 600;
      color: #303133;
      margin-bottom: 4px;
    }
    
    .badge-desc {
      font-size: 12px;
      color: #909399;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .badge-reward {
      font-size: 12px;
      color: #E6A23C;
      margin-top: 4px;
    }
    
    .badge-unlock-time {
      font-size: 12px;
      color: #67C23A;
      margin-top: 4px;
    }
  }
  
  .badge-status {
    color: #C0C4CC;
    font-size: 20px;
  }
}
</style>
