<template>
  <div class="container">
    <div class="title">实时轨迹</div>
    <div id="map" style="width: 100%; height: 500px;"></div>
    <br>
    <br>
    <el-descriptions direction="vertical" :column="4" :model="data" border>
      <el-descriptions-item label="vin码">{{ data.carVin }}</el-descriptions-item>
      <el-descriptions-item label="时间戳">{{ data.startTime }}</el-descriptions-item>
      <el-descriptions-item label="经度">{{ data.longitude }}</el-descriptions-item>
      <el-descriptions-item label="纬度">{{ data.latitude }}</el-descriptions-item>
      <el-descriptions-item label="车速">{{ data.speed }}</el-descriptions-item>
      <el-descriptions-item label="总里程">{{ data.totalMileage }}</el-descriptions-item>
      <el-descriptions-item label="总电压">{{ data.totalVoltage }}</el-descriptions-item>
      <el-descriptions-item label="总电流">{{ data.combinedCurrent }}</el-descriptions-item>
      <el-descriptions-item label="绝缘电阻">{{ data.insulationResistance }}</el-descriptions-item>
      <el-descriptions-item label="档位">{{ data.gearPosition }}</el-descriptions-item>
      <el-descriptions-item label="加速踏板行程值">{{ data.acceleratorPedalTravelValue }}</el-descriptions-item>
      <el-descriptions-item label="制动踏板行程值">{{ data.brakePedalTravelValue }}</el-descriptions-item>
      <el-descriptions-item label="燃料消耗率">{{ data.specificFuelConsumption }}</el-descriptions-item>
      <el-descriptions-item label="电机控制器温度">{{ data.motorControllerTemperature }}</el-descriptions-item>
      <el-descriptions-item label="电机转速">{{ data.motorSpeed }}</el-descriptions-item>
      <el-descriptions-item label="电机转矩">{{ data.motorTorque }}</el-descriptions-item>
      <el-descriptions-item label="电机温度">{{ data.motorTemperature }}</el-descriptions-item>
      <el-descriptions-item label="电机电压">{{ data.motorVoltage }}</el-descriptions-item>
      <el-descriptions-item label="电机电流">{{ data.motorCurrent }}</el-descriptions-item>
      <el-descriptions-item label="动力电池剩余电量SOC">{{ data.powerBatteryRemainingSOC }}
      </el-descriptions-item>
      <el-descriptions-item label="当前状态允许的最大反馈功率">{{ data.maximumPower }}</el-descriptions-item>
      <el-descriptions-item label="当前状态允许最大放电功率">{{ data.maximumDischargePower }}
      </el-descriptions-item>
      <el-descriptions-item label="BMS自检计数器">{{ data.bmsselfCheckCounter }}</el-descriptions-item>
      <el-descriptions-item label="动力电池充放电电流">{{ data.electricCurrent }}</el-descriptions-item>
      <el-descriptions-item label="动力电池负载端总电压V3">{{ data.totalVoltageV3 }}</el-descriptions-item>
      <el-descriptions-item label="单次最大电压">{{ data.singleMaximumVoltage }}</el-descriptions-item>
      <el-descriptions-item label="单体电池最低电压">{{ data.minimumVoltageOfABattery }}</el-descriptions-item>
      <el-descriptions-item label="单体电池最高温度">{{ data.maximumBatteryTemperature }}</el-descriptions-item>
      <el-descriptions-item label="单体电池最低温度">{{ data.minimumBatteryTemperature }}</el-descriptions-item>
      <el-descriptions-item label="动力电池可用容量">{{ data.powerBatteryAvailableCapacity }}
      </el-descriptions-item>
      <el-descriptions-item label="车辆状态">{{ data.vehicleStatus }}</el-descriptions-item>
      <el-descriptions-item label="充电状态">{{ data.chargingState }}</el-descriptions-item>
      <el-descriptions-item label="运行状态">{{ data.runningState }}</el-descriptions-item>
      <el-descriptions-item label="SOC">{{ data.soc }}</el-descriptions-item>
      <el-descriptions-item label="可充电储能装置工作状态">{{ data.workStatus }}</el-descriptions-item>
      <el-descriptions-item label="驱动电机状态">{{ data.driveMotorCondition }}</el-descriptions-item>
      <el-descriptions-item label="定位是否有效">{{ data.orientation }}</el-descriptions-item>
      <el-descriptions-item label="EAS">{{ data.eas }}</el-descriptions-item>
      <el-descriptions-item label="PTC">{{ data.ptc }}</el-descriptions-item>
      <el-descriptions-item label="EPS">{{ data.eps }}</el-descriptions-item>
      <el-descriptions-item label="ABS">{{ data.abs }}</el-descriptions-item>
      <el-descriptions-item label="MCU">{{ data.mcu }}</el-descriptions-item>
      <el-descriptions-item label="动力电池加热状态">{{ data.heatingState }}</el-descriptions-item>
      <el-descriptions-item label="动力电池当前状态">{{ data.currentStatus }}</el-descriptions-item>
      <el-descriptions-item label="动力电池保温状态">{{ data.insulationState }}</el-descriptions-item>
      <el-descriptions-item label="DCDC">{{ data.dcdc }}</el-descriptions-item>
      <el-descriptions-item label="CHG">{{ data.chg }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>

import { getDataByRedis } from "@/api/car/ListManager";

export default {
  data() {
    return {
      map: null,
      polyline: null,
      carMarker: null,
      carVin: this.$route.query.carVin || null,
      intervalId: null,
      data: {}, // 数据存储变量
    };
  },
  created() {
    // 创建定时器，每隔一定时间间隔调用fetchData方法
    this.intervalId = setInterval(this.fetchData, 10000); // 10000毫秒（10秒）
  },
  methods: {
    async fetchData() {
      try {
        const res = await getDataByRedis(this.carVin);
        this.data = res.data;
        alert(res.data.longitude);

        // 更新车辆位置
        this.updateCarMarker();
      } catch (error) {
        console.error("Error fetching vehicle data:", error);
      }
    },
    initMap() {
      this.map = new AMap.Map('map', {
        center: [116.397428, 39.90923], // 初始化地图中心点
        zoom: 20, // 地图缩放级别
      });
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: [], // 初始为空
        strokeColor: '#3366FF',
        strokeWeight: 5,
      });

      // 初始化车辆模型标记
      this.carMarker = new AMap.Marker({
        map: this.map,
        position: [116.397428, 39.90923], // 初始位置
        icon: 'https://webapi.amap.com/images/car.png',
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
      });
    },
    updateCarMarker() {
      if (this.data.longitude && this.data.latitude) {
        const newPoint = [this.data.longitude, this.data.latitude];

        // 更新车辆模型位置
        this.carMarker.setPosition(newPoint);

        // 更新路径线条坐标
        const path = this.polyline.getPath();
        path.push(new AMap.LngLat(this.data.longitude, this.data.latitude));
        this.polyline.setPath(path);

        // 调整地图视野
        this.map.setCenter(newPoint);
      }
    },
  },
  mounted() {
    this.initMap();
  },
  beforeDestroy() {
    // 清除定时器
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  }
};

</script>
