<!-- 统计卡片组件 -->
<template>
  <div class="stats-container">
    <div class="stat-cards">
      <!-- 在线卡片 -->
      <div class="stat-card online">
        <div class="stat-icon">
          <!-- <el-icon class="icon"><CircleCheckFilled /></el-icon> -->
            <img src="../../assets/images/car1.png" alt="车辆监控">
        </div>
        <div class="stat-info">
          <div class="stat-title">车辆监控</div>
          <div class="stat-bottom">
            <div class="stat-value">{{ statistics.total }}</div>
            <div class="stat-change">
              <span class="percent">+30%</span>
              <el-icon><ArrowUp /></el-icon>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 任务中卡片 -->
      <div class="stat-card task">
        <div class="stat-icon">
          <!-- <el-icon class="icon"><Loading /></el-icon> -->
            <img src="../../assets/images/car2.png" alt="在线">
        </div>
        <div class="stat-info">
          <div class="stat-title">在线</div>
          <div class="stat-bottom">
            <div class="stat-value">{{ statistics.online }}</div>
            <div class="stat-change">
              <span class="percent">+20%</span>
              <el-icon><ArrowUp /></el-icon>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 故障卡片 -->
      <div class="stat-card error">
        <div class="stat-icon">
          <!-- <el-icon class="icon"><WarningFilled /></el-icon> -->
            <img src="../../assets/images/car3.png" alt="离线">
        </div>
        <div class="stat-info">
          <div class="stat-title">离线</div>
          <div class="stat-bottom">
            <div class="stat-value">{{ statistics.offline }}</div>
            <div class="stat-change error-change">
              <span class="percent">-10%</span>
              <el-icon><ArrowDown /></el-icon>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 离线卡片 -->
      <div class="stat-card offline">
        <div class="stat-icon">
          <!-- <el-icon class="icon"><CloseBold /></el-icon> -->
            <img src="../../assets/images/car4.png" alt="故障">
        </div>
        <div class="stat-info">
          <div class="stat-title">故障</div>
          <div class="stat-bottom">
            <div class="stat-value">0</div>
            <div class="stat-change error-change">
              <span class="percent">-5%</span>
              <el-icon><ArrowDown /></el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ArrowUp, ArrowDown, CircleCheckFilled, WarningFilled, CloseBold, Loading } from '@element-plus/icons-vue';

const props = defineProps({
  stats: {
    type: Array,
    required: true
  }
});

// 统计数据
const statistics = computed(() => {
  return {
    total: (props.stats.find(item => item.title === '车辆总数')?.count) 
      ?? ((props.stats.find(item => item.title === '在线')?.count || 0)
       + (props.stats.find(item => item.title === '离线')?.count || 0)
       + (props.stats.find(item => item.title === '故障')?.count || 0)),
    online: props.stats.find(item => item.title === '在线')?.count || 0,
    error: props.stats.find(item => item.title === '故障')?.count || 0,
    offline: props.stats.find(item => item.title === '离线')?.count || 0 
  };
});
</script>

<style lang="scss" scoped>
.stats-container {
  width: 100%;
  
}

.stat-cards {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 20px;
}

.stat-card {
  flex: 1;
  background-color: #292c38;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  color: #fff;
  height: 100%;
  transition: all 0.3s ease;
  min-width: 200px;
  
 
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  
  .icon {
    font-size: 24px;
  }
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #96a0b5;
  margin-bottom: 8px;
}

.stat-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.stat-change {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #67c23a;
  
  &.error-change {
    color: #f56c6c;
  }
  
  .percent {
    margin-right: 4px;
  }
}

// 媒体查询，处理响应式布局
@media (max-width: 1200px) {
  .stat-cards {
    flex-wrap: wrap;
  }
  
  .stat-card {
    min-width: calc(50% - 10px);
    margin-bottom: 16px;
  }
}

@media (max-width: 768px) {
  .stat-cards {
    flex-direction: column;
  }
  
  .stat-card {
    min-width: 100%;
  }
}
</style>
