<template>
  <div class="car-alarm-container">
    <div class="car-item">
      <img src="../../../assets/images/online_car.png" class="car-icon" />
      <div class="car-text">
        <div class="car-count">
          {{ onlineCount }}<span class="unit">辆</span>
        </div>
        <div class="car-label">在线车辆</div>
      </div>
    </div>
    <div class="car-item">
      <img src="../../../assets/images/offline_car.png" class="car-icon" />
      <div class="car-text">
        <div class="car-count">
          {{ offlineCount }}<span class="unit">辆</span>
        </div>
        <div class="car-label">离线车辆</div>
      </div>
    </div>
    <div class="car-item">
      <img src="../../../assets/images/fault_car.png" class="car-icon" />
      <div class="car-text">
        <div class="car-count">
          0<span class="unit">辆</span>
        </div>
        <div class="car-label">故障车辆</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import request from '@/utils/request';

// 定义props，可以从外部传入数据
const props = defineProps({
  onlineCountProp: {
    type: Number,
    default: 206,
  },
  offlineCountProp: {
    type: Number,
    default: 25,
  },
  faultCountProp: {
    type: Number,
    default: 27,
  },
});

// 响应式数据，用于显示车辆数量
const onlineCount = ref(props.onlineCountProp);
const offlineCount = ref(props.offlineCountProp);
const faultCount = ref(props.faultCountProp);

// 暴露方法，允许父组件更新数据
defineExpose({
  updateCounts,
});

// 更新车辆数量的方法
function updateCounts(online, offline, fault) {
  onlineCount.value = online !== undefined ? online : onlineCount.value;
  offlineCount.value = offline !== undefined ? offline : offlineCount.value;
  faultCount.value = fault !== undefined ? fault : faultCount.value;
}

// 组件挂载时的逻辑
onMounted(() => {
  console.log("车辆报警信息组件已加载");
  fetchVehicleStats();
});

async function fetchVehicleStats() {
  try {
    const res = await request({
      url: '/api/vehicle-manager/vehicles/summary',
      method: 'get'
    });
    const data = res && res.data !== undefined ? res.data : res || {};
    updateCounts(
      Number(data.onlineCount) || 0,
      Number(data.offlineCount) || 0,
      Number(data.faultCount) || 0
    );
  } catch (e) {
    updateCounts(
      onlineCount.value ?? 0,
      offlineCount.value ?? 0,
      faultCount.value ?? 0
    );
  }
}
</script>

<style scoped>
.car-alarm-container {
  position: absolute;
  left: 20px;
  top: 5%;
  display: flex;
  align-items: center;
  gap:24px;
  z-index: 1000;
}

.car-item {
  display: flex;
  align-items: center;

  gap:8px;

  
}

.car-icon {
  width: 60px;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
}


.car-text {
  display: flex;
  text-align: left;
  flex-direction: column;
  gap:5px 0;
  color:#4E718F;
}

.car-count {
  display: inline-flex;
  align-items: flex-end;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}

.unit {
  font-size: 14px;
  font-weight: normal;
  margin-left: 2px;
  line-height: 1;
  vertical-align: baseline;
}

.online .car-count {
  color: #4794ff;
}


.car-label {
  font-size: 14px;
  color: #4E718F;
  margin-top: 2px;
}

.split-line {
  width: 1px;
  height: 30px;
  background-color: #ddd;
  margin: 0 15px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .car-alarm-container {
    flex-direction: column;
    padding: 10px;
    left: 10px;
    top: 120px;
  }

  .car-item {
    margin-bottom: 8px;
  }

  .split-line {
    width: 80%;
    height: 1px;
    margin: 8px 0;
  }
}
</style>
