<!-- 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 } from 'vue';
const props = defineProps({
  vehicle: {
    type: Object,
    required: true
  }
});
// mock数据
const batteryData = {
  voltage: 588.8,
  current: 491.4,
  soc: 89,
  chargeTotal: 289,
  dischargeTotal: 289,
  tempRange: '20~45',
  maxCellVoltage: 4.19,
  minCellVoltage: 3.98,
  bmsStatus: '高压上电状态',
  chargeStatus: '充电中',
  workStatus: '工作',
  updateTime: '2024/7/12 14:50:15',
  location: '无人车主控8001东200米',
  power: 102.3,
  mileage: 213.4,
  avgSpeed: '56.7km/h',
  socStr: '28.9kwh',
  chargeTimes: 8,
  dischargeTimes: 7,
  range: 275,
  maxPower: '299PS',
  maxTorque: '220kw',
  dcStatus: '工作',
  health: '良好',
  brand: '磷酸铁锂电池',
};
const blocks = [
  {
    no: '01',
    title: '电池基本参数',
    items: [
      { no: '1.1', label: '额定电压', value: '588.8V' },
      { no: '1.2', label: '额定电流', value: '491A' },
      { no: '1.3', label: '标定容量', value: '289' },
      { no: '1.4', label: '电池类型', value: '磷酸铁锂电池' },
      { no: '1.5', label: '累计充电量', value: '289kwh' },
      { no: '1.6', label: '累计放电量', value: '289kwh' },
    ]
  },
  {
    no: '02',
    title: '状态监测',
    items: [
      { no: '2.1', label: 'BMS状态', value: '高压上电状态' },
      { no: '2.2', label: '车辆状态', value: '在线' },
      { no: '2.3', label: 'DC-DC状态', value: '工作' },
      { no: '2.4', label: '当前充电状态', value: '充电中' },
      { no: '2.5', label: '最新更新时间', value: '2024/7/12 14:50:15' },
      { no: '2.6', label: '最新位置', value: '无人车主控8001东200米' },
    ]
  },
  {
    no: '03',
    title: '实时运行数据',
    items: [
      { no: '3.1', label: '总电量', value: '102.3W' },
      { no: '3.2', label: '总里程', value: '213.4A' },
      { no: '3.3', label: 'SOC', value: '28.9kwh' },
      { no: '3.4', label: '充电次数', value: '8' },
      { no: '3.5', label: '放电次数', value: '7' },
      { no: '3.6', label: '平均车速', value: '56.7km/h' },
      { no: '3.7', label: '剩余可行驶里程', value: '275km' },
      { no: '3.8', label: '最高充电倍率', value: '3' },
    ]
  },
  {
    no: '04',
    title: '动力性能',
    items: [
      { no: '4.1', label: '最大马力', value: '299PS' },
      { no: '4.2', label: '最大功率', value: '220kw' },
    ]
  }
];
</script>

<style scoped>
.battery-overview-flex {
  display: flex;
  gap: 24px;
}
.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 {
    flex-direction: column;
  }
  .left-panel {
    width: 100%;
    margin-bottom: 18px;
  }
  .battery-overview-grid {
    flex-direction: column;
    gap: 18px;
  }
  .right-panel {
    width: 100%;
  }
}
</style>