<template>
  <div class="exp-progress">
    <div class="progress-header">
      <span class="label">经验值</span>
      <span class="value">{{ currentExp }} / {{ targetExp }}</span>
    </div>
    <div class="progress-bar">
      <div 
        class="progress-fill" 
        :style="{ width: progressPercent + '%', backgroundColor: color }"
      ></div>
    </div>
    <div class="progress-footer" v-if="showFooter">
      <span class="exp-to-next">距下一级还需 {{ expToNext }} 经验</span>
      <span class="total-exp" v-if="showTotal">累计 {{ totalExp }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  currentExp: number
  targetExp: number
  totalExp?: number
  color?: string
  showFooter?: boolean
  showTotal?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  totalExp: 0,
  color: '#409EFF',
  showFooter: true,
  showTotal: false
})

const progressPercent = computed(() => {
  if (props.targetExp <= 0) return 100
  const percent = (props.currentExp / props.targetExp) * 100
  return Math.min(percent, 100)
})

const expToNext = computed(() => {
  return Math.max(0, props.targetExp - props.currentExp)
})
</script>

<style scoped lang="scss">
.exp-progress {
  .progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    
    .label {
      font-size: 14px;
      color: #606266;
    }
    
    .value {
      font-size: 14px;
      font-weight: 600;
      color: #303133;
    }
  }
  
  .progress-bar {
    height: 8px;
    background-color: #EBEEF5;
    border-radius: 4px;
    overflow: hidden;
    
    .progress-fill {
      height: 100%;
      border-radius: 4px;
      transition: width 0.3s ease;
    }
  }
  
  .progress-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    
    .exp-to-next {
      font-size: 12px;
      color: #909399;
    }
    
    .total-exp {
      font-size: 12px;
      color: #909399;
    }
  }
}
</style>
