<template>
  <el-card class="today-order-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">{{ formatNumber(data.initiateOrderCount) }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">支付订单数</div>
        <div class="stat-value">{{ formatNumber(data.paidOrderCount) }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">消费人数</div>
        <div class="stat-value">{{ formatNumber(data.userCount) }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">订单总金额</div>
        <div class="stat-value currency">{{ formatCurrency(data.orderZheTotal) }}</div>
      </div>
      
      <!-- 第二行 -->
      <div class="stat-item">
        <div class="stat-label">出货总金额</div>
        <div class="stat-value currency">{{ formatCurrency(data.goodsTotalAmount) }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">优惠券抵扣</div>
        <div class="stat-value currency">{{ formatCurrency(data.useCoupon) }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">RMB支付</div>
        <div class="stat-value currency">{{ formatCurrency(data.price) }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">钻石支付</div>
        <div class="stat-value">{{ formatNumber(data.useMoney) }}</div>
      </div>
      
      <!-- 第三行 -->
      <div class="stat-item">
        <div class="stat-label">HH币支付</div>
        <div class="stat-value">{{ formatNumber(data.useIntegral) }}</div>
      </div>
      <div class="stat-item">
        <div class="stat-label">达达券支付</div>
        <div class="stat-value">{{ formatNumber(data.useMoney2) }}</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 { getTodayOrderStats, type TodayOrderStats } from '@/api/business/statistics'
import { formatCurrency, formatNumber } from '@/utils/format'

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

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

// 默认数据（降级展示）
const defaultData: TodayOrderStats = {
  initiateOrderCount: 0,
  paidOrderCount: 0,
  userCount: 0,
  orderZheTotal: 0,
  goodsTotalAmount: 0,
  useCoupon: 0,
  price: 0,
  useMoney: 0,
  useIntegral: 0,
  useMoney2: 0
}

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

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

/**
 * 加载今日订单统计数据
 */
async function loadData() {
  loading.value = true
  error.value = null
  
  try {
    const response = await getTodayOrderStats()
    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>
.today-order-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.currency {
  color: var(--el-color-success);
}

.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>
