<template>
  <div class="stats-card">
    <a-row :gutter="16">
      <a-col :span="6" v-for="(stat, index) in stats" :key="index">
        <a-card :bordered="false" class="stat-item">
          <a-statistic
            :title="stat.title"
            :value="stat.value"
            :prefix="stat.prefix"
            :suffix="stat.suffix"
            :value-style="{ color: stat.color }"
          />
          <div class="stat-extra">
            <span :class="['trend', stat.trend]">
              {{ stat.trend === 'up' ? '↗' : '↘' }} {{ stat.change }}%
            </span>
            <span class="compare">较昨日</span>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { cattleAPI, financeAPI, tradingAPI, mallAPI } from '../services/api.js';

const stats = ref([
  { title: '总牛只数量', value: 0, suffix: '头', color: '#3f8600', trend: 'up', change: 0 },
  { title: '总产值', value: 0, prefix: '¥', suffix: '万', color: '#cf1322', trend: 'up', change: 0 },
  { title: '活跃交易', value: 0, suffix: '笔', color: '#1890ff', trend: 'up', change: 0 },
  { title: '在线用户', value: 0, suffix: '人', color: '#722ed1', trend: 'up', change: 0 },
]);

// 加载统计数据
const loadStats = async () => {
  try {
    // 并发请求各模块数据
    const [cattleData, financeData, tradingData, mallData] = await Promise.allSettled([
      cattleAPI.getStatistics(),
      financeAPI.getStatistics(),
      tradingAPI.getStatistics(),
      mallAPI.getStatistics(),
    ]);

    // 更新统计数据
    if (cattleData.status === 'fulfilled' && cattleData.value.success) {
      const data = cattleData.value.data;
      stats.value[0].value = data.total_cattle || 0;
      stats.value[0].change = Math.random() * 10; // 模拟变化率
    }

    if (financeData.status === 'fulfilled' && financeData.value.success) {
      const data = financeData.value.data;
      stats.value[1].value = Math.round((data.total_loan_amount || 0) / 10000);
      stats.value[1].change = Math.random() * 8;
    }

    if (tradingData.status === 'fulfilled' && tradingData.value.success) {
      const data = tradingData.value.data;
      stats.value[2].value = data.total_transactions || 0;
      stats.value[2].change = Math.random() * 12;
    }

    if (mallData.status === 'fulfilled' && mallData.value.success) {
      const data = mallData.value.data;
      stats.value[3].value = data.active_users || 0;
      stats.value[3].change = Math.random() * 5;
    }
  } catch (error) {
    console.error('加载统计数据失败:', error);
  }
};

onMounted(() => {
  loadStats();
  // 每30秒更新一次数据
  setInterval(loadStats, 30000);
});
</script>

<style scoped>
.stats-card {
  margin-bottom: 24px;
}

.stat-item {
  text-align: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  color: white;
}

.stat-item :deep(.ant-card-body) {
  padding: 16px;
}

.stat-item :deep(.ant-statistic-title) {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  margin-bottom: 8px;
}

.stat-item :deep(.ant-statistic-content) {
  color: white;
  font-size: 24px;
  font-weight: bold;
}

.stat-extra {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.trend {
  font-weight: bold;
}

.trend.up {
  color: #52c41a;
}

.trend.down {
  color: #ff4d4f;
}

.compare {
  color: rgba(255, 255, 255, 0.7);
}
</style>