<template>
  <div class="resource-overview-card">
    <div class="resource-stats-row">
      <div class="stat-item" v-for="item in stats" :key="item.title">
        <span class="stat-title">
          {{ item.title }}
          <small>{{ item.unit }}</small>
        </span>
        <span class="stat-value" :style="{ color: item.color }">{{ item.total }}</span>
        <span class="stat-desc">{{ item.label1 }} {{ item.value1 }} · {{ item.label2 }} {{ item.value2 }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { listTeam } from '@/api/resource/team'
import { listVehicle } from '@/api/resource/vehicle'
import { listWarehouse } from '@/api/resource/warehouse'
import { listExpert } from '@/api/resource/expert'

export default {
  name: 'ResourceOverviewCard',
  data() {
    return {
      loading: true,
      stats: this.buildDefaultStats(),
      refreshTimer: null
    }
  },
  mounted() {
    this.loadStats()
    this.refreshTimer = setInterval(() => {
      if (!this.loading) {
        this.loadStats()
      }
    }, 60000)
  },
  beforeDestroy() {
    if (this.refreshTimer) {
      clearInterval(this.refreshTimer)
      this.refreshTimer = null
    }
  },
  methods: {
    buildDefaultStats() {
      return [
        { title: '队伍', total: 0, value1: 0, value2: 0, label1: '可用', label2: '在途', unit: '支', color: '#67C23A' },
        { title: '车辆', total: 0, value1: 0, value2: 0, label1: '可用', label2: '在途', unit: '辆', color: '#8B5CF6' },
        { title: '仓库', total: 0, value1: 0, value2: 0, label1: '正常', label2: '停用', unit: '座', color: '#909399' },
        { title: '专家', total: 0, value1: 0, value2: 0, label1: '启用', label2: '停用', unit: '人', color: '#F56C6C' }
      ]
    },
    async loadStats() {
      this.loading = true
      try {
        // Fetch all resource statistics in parallel
        const [teamStats, vehicleStats, warehouseStats, expertStats] = await Promise.all([
          this.fetchTeamStats(),
          this.fetchVehicleStats(),
          this.fetchWarehouseStats(),
          this.fetchExpertStats()
        ])

        this.stats = [
          { title: '队伍', ...teamStats, label1: '可用', label2: '在途', unit: '支', color: '#67C23A' },
          { title: '车辆', ...vehicleStats, label1: '可用', label2: '在途', unit: '辆', color: '#8B5CF6' },
          { title: '仓库', ...warehouseStats, label1: '正常', label2: '停用', unit: '座', color: '#909399' },
          { title: '专家', ...expertStats, label1: '启用', label2: '停用', unit: '人', color: '#F56C6C' }
        ]
      } catch (error) {
        console.error('加载资源概览失败:', error)
        this.stats = this.buildDefaultStats()
      } finally {
        this.loading = false
      }
    },
    async fetchTeamStats() {
      const params = { pageNum: 1, pageSize: 1000 }
      const res = await listTeam(params)
      const rows = this.extractRows(res)
      return {
        total: rows.length,
        value1: rows.filter(item => item.status === 'available').length,
        value2: rows.filter(item => item.status === 'busy').length
      }
    },
    async fetchVehicleStats() {
      const params = { pageNum: 1, pageSize: 1000 }
      const res = await listVehicle(params)
      const rows = this.extractRows(res)
      return {
        total: rows.length,
        value1: rows.filter(item => item.status === 'available').length,
        value2: rows.filter(item => item.status === 'busy').length
      }
    },
    async fetchWarehouseStats() {
      const params = { pageNum: 1, pageSize: 1000 }
      const res = await listWarehouse(params)
      const rows = this.extractRows(res)
      return {
        total: rows.length,
        value1: rows.filter(item => item.status === '0').length,
        value2: rows.filter(item => item.status === '1').length
      }
    },
    async fetchExpertStats() {
      const params = { pageNum: 1, pageSize: 1000 }
      const res = await listExpert(params)
      const rows = this.extractRows(res)
      return {
        total: rows.length,
        value1: rows.filter(item => item.status === 'active').length,
        value2: rows.filter(item => item.status === 'inactive').length
      }
    },
    extractRows(res) {
      if (res && res.code === 200) {
        return Array.isArray(res.rows) ? res.rows : []
      }
      return []
    }
  }
}
</script>

<style lang="scss" scoped>
.resource-overview-card {
  margin-bottom: 16px;
}

.resource-stats-row {
  display: flex;
  gap: 12px;
}

.stat-item {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-title {
  font-size: 13px;
  color: #909399;
}

.stat-title small {
  font-size: 11px;
  margin-left: 2px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
}

.stat-desc {
  font-size: 12px;
  color: #a8abb2;
}
</style>