<template>
  <el-card class="currency-info-card" v-loading="loading">
    <template #header>
      <div class="card-header">
        <span class="card-title">今日货币信息</span>
        <el-button 
          type="primary" 
          link 
          :icon="Refresh" 
          @click="handleRefresh"
          :loading="loading"
        >
          刷新
        </el-button>
      </div>
    </template>
    
    <div class="stats-grid">
      <!-- 第一行：钻石 -->
      <div class="stat-item">
        <div class="stat-label">今日发放钻石</div>
        <div class="stat-value add">{{ formatNumber(data.todayAddMoney) }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">今日消费钻石</div>
        <div class="stat-value use">{{ formatNumber(data.todayUseMoney) }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">昨日发放钻石</div>
        <div class="stat-value add">{{ formatNumber(data.yesterdayAddMoney) }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">昨日消费钻石</div>
        <div class="stat-value use">{{ formatNumber(data.yesterdayUseMoney) }}</div>
      </div>
      
      <!-- 第二行：HH币 -->
      <div class="stat-item">
        <div class="stat-label">今日发放HH币</div>
        <div class="stat-value add">{{ formatNumber(data.todayAddIntegral) }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">今日消费HH币</div>
        <div class="stat-value use">{{ formatNumber(data.todayUseIntegral) }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">昨日发放HH币</div>
        <div class="stat-value add">{{ formatNumber(data.yesterdayAddIntegral) }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">昨日消费HH币</div>
        <div class="stat-value use">{{ formatNumber(data.yesterdayUseIntegral) }}</div>
      </div>
      
      <!-- 第三行：达达券 -->
      <div class="stat-item">
        <div class="stat-label">今日发放达达券</div>
        <div class="stat-value add">{{ formatNumber(data.todayAddMoney2) }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">今日消费达达券</div>
        <div class="stat-value use">{{ formatNumber(data.todayUseMoney2) }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">昨日发放达达券</div>
        <div class="stat-value add">{{ formatNumber(data.yesterdayAddMoney2) }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">昨日消费达达券</div>
        <div class="stat-value use">{{ formatNumber(data.yesterdayUseMoney2) }}</div>
      </div>
    </div>
    
    <!-- 错误提示 -->
    <div v-if="error" class="error-message">
      <el-icon><WarningFilled /></el-icon>
      <span>{{ error }}</span>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Refresh, WarningFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getCurrencyInfoStats, type CurrencyInfoStats } from '@/api/business/statistics'
import { formatNumber } from '@/utils/format'

// ==================== 状态定义 ====================

const loading = ref(false)
const error = ref<string | null>(null)

// 默认数据（降级展示）
const defaultData: CurrencyInfoStats = {
  todayAddMoney: 0,
  todayUseMoney: 0,
  yesterdayAddMoney: 0,
  yesterdayUseMoney: 0,
  todayAddIntegral: 0,
  todayUseIntegral: 0,
  yesterdayAddIntegral: 0,
  yesterdayUseIntegral: 0,
  todayAddMoney2: 0,
  todayUseMoney2: 0,
  yesterdayAddMoney2: 0,
  yesterdayUseMoney2: 0
}

const data = reactive<CurrencyInfoStats>({ ...defaultData })

// ==================== 数据加载 ====================

/**
 * 加载货币信息统计数据
 */
async function loadData() {
  loading.value = true
  error.value = null
  
  try {
    const response = await getCurrencyInfoStats()
    if (response.code === 0 && response.data) {
      Object.assign(data, response.data)
    } else {
      error.value = response.message || '获取数据失败'
      Object.assign(data, defaultData)
    }
  } catch (err: unknown) {
    console.error('加载货币信息数据失败:', err)
    
    // 根据错误类型显示不同提示
    if (err instanceof Error) {
      if (err.message.includes('403') || err.message.includes('权限')) {
        error.value = '无权限访问此页面'
      } else if (err.message.includes('network') || err.message.includes('Network')) {
        error.value = '网络连接失败，请检查网络'
      } else {
        error.value = '服务器繁忙，请稍后重试'
      }
    } else {
      error.value = '获取数据失败'
    }
    
    // 降级展示默认值
    Object.assign(data, defaultData)
  } finally {
    loading.value = false
  }
}

/**
 * 刷新数据
 */
function handleRefresh() {
  loadData()
  ElMessage.info('正在刷新数据...')
}

// ==================== 生命周期 ====================

onMounted(() => {
  loadData()
})

// ==================== 暴露方法 ====================

defineExpose({
  refresh: loadData
})
</script>

<style scoped>
.currency-info-card {
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stat-item {
  padding: 12px;
  background: var(--el-fill-color-light);
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-item:hover {
  background: var(--el-fill-color);
  transform: translateY(-2px);
}

.stat-label {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin-bottom: 8px;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.stat-value.add {
  color: var(--el-color-success);
}

.stat-value.use {
  color: var(--el-color-warning);
}

.error-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px;
  background: var(--el-color-danger-light-9);
  border-radius: 4px;
  color: var(--el-color-danger);
  font-size: 14px;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .stat-value {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>
