<!-- BatteryOverview.vue（电池概况） -->
<template>
  <div class="battery-overview-flex">
    <div class="left-panel">
      <div class="battery-overview-grid">
        <div class="battery-block" v-for="block in blocks" :key="block.no">
          <div class="block-title">
            <span class="block-no">{{ block.no }}</span>
            <span class="block-name">{{ block.title }}</span>
          </div>
          <ul class="block-list">
            <li v-for="item in block.items" :key="item.no">
              <span class="item-no">{{ item.no }}</span>
              <span class="item-label">{{ item.label }}</span>
              <span v-if="item.value !== undefined" class="item-value">：{{ item.value }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="right-panel">
      <img src="../../../assets/images/map.png" alt="地图" class="map-image">
      <!-- <div class="map-title">车辆位置</div>
      <div class="map-container">
    
        <div class="map-placeholder">[地图区域]</div>
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, computed, onMounted, watch } from 'vue';
import request from '@/utils/request';
const props = defineProps({
  vehicle: {
    type: Object,
    required: true
  }
});
const batteryMain = ref({});
const ts = ref(0);
function fmtTime(t) {
  if (!t) return '';
  const d = new Date(Number(t));
  const y = d.getFullYear();
  const m = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  const hh = String(d.getHours()).padStart(2, '0');
  const mm = String(d.getMinutes()).padStart(2, '0');
  const ss = String(d.getSeconds()).padStart(2, '0');
  return `${y}/${m}/${day} ${hh}:${mm}:${ss}`;
}
function chargeText(s) {
  if (s === 'CHARGING' || s === 1) return '充电中';
  if (s === 'DISCHARGING' || s === 2) return '放电中';
  return '空闲';
}
function fmtUnit(v, unit) {
  if (v === undefined || v === null) return '—';
  const num = Number(v);
  if (Number.isNaN(num)) return '—';
  return `${num}${unit}`;
}
function coalesce(...vals) {
  for (const v of vals) {
    if (v !== undefined && v !== null) return v;
  }
  return undefined;
}
async function fetchBattery() {
  const id = props.vehicle?.carId;
  if (!id) return;
  try {
    const res = await request({
      url: `/api/vehicle-manager/vehicles/${encodeURIComponent(id)}/battery`,
      method: 'get'
    });
    const data = res && res.data !== undefined ? res.data : res || {};
    const bs = data?.data?.batteryStatus ?? data?.batteryStatus ?? data?.data ?? {};
    const main = bs?.mainBattery ?? bs?.battery ?? {};
    batteryMain.value = {
      voltage: coalesce(main?.voltage, bs?.voltage, data?.voltage),
      current: coalesce(main?.current, bs?.current, data?.current),
      temperature: coalesce(main?.temperature, bs?.temperature, data?.temperature),
      chargingStatus: coalesce(main?.chargingStatus, bs?.chargingStatus, data?.chargingStatus)
    };
    ts.value = coalesce(data?.timestamp, bs?.timestamp, data?.data?.timestamp) || 0;
  } catch (e) {
    batteryMain.value = {};
    ts.value = 0;
  }
}
onMounted(fetchBattery);
watch(() => props.vehicle?.carId, () => fetchBattery());
const blocks = computed(() => {
  const voltage = fmtUnit(batteryMain.value?.voltage, 'V');
  const current = fmtUnit(batteryMain.value?.current, 'A');
  const temperature = fmtUnit(batteryMain.value?.temperature, '℃');
  const chargingStatus = chargeText(batteryMain.value?.chargingStatus);
  const latestTime = fmtTime(ts.value);
  const vehicleStatus = props.vehicle?.status || '—';
  const location = props.vehicle?.location || '—';
  return [
    {
      no: '01',
      title: '电池当前参数',
      items: [
        { no: '1.1', label: '电压', value: voltage },
        { no: '1.2', label: '电流', value: current },
        { no: '1.3', label: '温度', value: temperature }
      ]
    },
    {
      no: '02',
      title: '状态监测',
      items: [
        { no: '2.1', label: '车辆状态', value: vehicleStatus },
        { no: '2.2', label: '当前充电状态', value: chargingStatus },
        { no: '2.3', label: '最新更新时间', value: latestTime },
        { no: '2.4', label: '最新位置', value: location }
      ]
    }
  ];
});
</script>

<style scoped>
.battery-overview-flex {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.left-panel {

  display: flex;

  padding:24px 32px;
  background-color: #343744;
  border-radius: 8px;
 
}
.battery-overview-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
 
}
.battery-block {
  background: #343744;
  border-radius: 8px;
  /* padding: 18px 24px; */
  width: calc(50% - 6px);

  /* min-width: 180px; */
  margin-bottom: 0;
  color: #fff;
  box-sizing: border-box;
 
}
.block-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.block-no {
  background: #409eff;
  color: #fff;
  border-radius: 4px;
  font-size: 15px;
  font-weight: bold;
  
  padding: 2px 8px;
  margin-right: 10px;
 
}
.block-name {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  padding-bottom: 2px;
  
  border-bottom: 2px solid rgba(109, 184, 255, 0.5);
}
.block-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.block-list li {
  font-size: 14px;
  color: #e0e0e0;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  flex-wrap: no-wrap;

}
.item-no {
  color: #BDC1C6;
  font-size: 13px;
  min-width: 2em;

  display: inline-block;

 
}
.item-label {

  color: #b0b8c9;
  
}
.item-value {
  color: #fff;
}
.right-panel {
  /* flex: 1; */

  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.map-title {
  color: #4ea1ff;
  font-weight: bold;
  margin-bottom: 8px;
}
.map-container {
  flex: 1;
  background: #1e2233;
  border-radius: 8px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-placeholder {
  color: #888;
  font-size: 18px;
}
@media (max-width: 900px) {
  .battery-overview-flex {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .left-panel {
    margin-bottom: 18px;
  }
  .battery-overview-grid {
    flex-direction: column;
    gap: 18px;
  }
}
</style>
