<template>
  <div>
    <div class="index">
      <div id="map" style="width: 100%; height: 400px;"></div>
    </div>

    <el-descriptions title="实时数据" direction="vertical" :column="4" :model="VehicleInfo" border>
      <el-descriptions-item label="vin">{{VehicleInfo.vin}}</el-descriptions-item>
      <el-descriptions-item label="时间">{{VehicleInfo.time}}</el-descriptions-item>
      <el-descriptions-item label="经度">{{VehicleInfo.longitude}}</el-descriptions-item>
      <el-descriptions-item label="纬度">{{VehicleInfo.latitude}}</el-descriptions-item>
      <el-descriptions-item label="车速">{{VehicleInfo.speed}}</el-descriptions-item>
      <el-descriptions-item label="总里程">{{VehicleInfo.totalMileage}}</el-descriptions-item>
      <el-descriptions-item label="总电压">{{VehicleInfo.totalVoltage}}</el-descriptions-item>
      <el-descriptions-item label="总电流">{{VehicleInfo.totalCurrent}}</el-descriptions-item>
<!--      <el-descriptions-item label="绝缘电阻">{{VehicleInfo.insulationResistance}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="档位">{{VehicleInfo.gears}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="加速踏板行程值">{{VehicleInfo.acceleratorPedal}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="制动踏板行程值">{{VehicleInfo.brakePedal}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="燃料消耗率">{{VehicleInfo.fuelConsumptionRate}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="电机控制器温度">{{VehicleInfo.MotorControllerTemperature}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="电机转速">{{VehicleInfo.motorSpeed}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="电机转矩">{{VehicleInfo.motorTorque}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="电机温度">{{VehicleInfo.motorTemperature}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="电机电压">{{VehicleInfo.motorVoltage}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="电机电流">{{VehicleInfo.motorCurrent}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="动力电池剩余电量SOC">{{VehicleInfo.remainingPower}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="当前状态允许的最大反馈功率">{{VehicleInfo.maximumFeedbackPower}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="当前状态允许最大放电功率">{{VehicleInfo.maximumDischargePower}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="BMS自检计数器">{{VehicleInfo.selfTestCounter}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="动力电池充放电电流">{{VehicleInfo.batteryChargeOrDischargeCurrent}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="动力电池负载端总电压V3">{{VehicleInfo.totalVoltageV3}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="单次最大电压">{{VehicleInfo.maximumVoltage}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="单体电池最低电压">{{VehicleInfo.minimumBatteryVoltage}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="单体电池最高温度">{{VehicleInfo.maximumBatteryTemperature}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="单体电池最低温度">{{VehicleInfo.minimumBatteryTemperature}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="动力电池可用容量">{{VehicleInfo.usableBatteryCapacity}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="车辆状态">{{VehicleInfo.vehicleStatus}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="充电状态">{{VehicleInfo.chargeStatus}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="运行状态">{{VehicleInfo.operationalStatus}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="SOC">{{VehicleInfo.soc}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="可充电储能装置工作状态">{{VehicleInfo.energyStorageDeviceWorkingStatus}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="驱动电机状态">{{VehicleInfo.driveMotorStatus}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="定位是否有效">{{VehicleInfo.positioningIsOrNotEffective}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="EAS">{{VehicleInfo.eas}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="PTC">{{VehicleInfo.ptc}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="EPS">{{VehicleInfo.eps}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="ABS">{{VehicleInfo.abs}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="MCU">{{VehicleInfo.mcu}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="动力电池加热状态">{{VehicleInfo.batteryHeatingStatus}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="动力电池当前状态">{{VehicleInfo.batteryCurrentStatus}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="动力电池保温状态">{{VehicleInfo.batteryInsulationStatus}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="DCDC">{{VehicleInfo.dcdc}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="CHG">{{VehicleInfo.chg}}</el-descriptions-item>-->
<!--      <el-descriptions-item label="校验位">{{VehicleInfo.checkDigit}}</el-descriptions-item>-->

    </el-descriptions>
  </div>
</template>

<script>
import { read, open, close } from "@/api/goods/car";

// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
// 例如：import 《组件名称》 from '《组件路径》,
export default {
  // import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {
    paths: {}, //编辑
  },
  data() {
    // 这里存放数据"
    return {
      map: null, // 地图实例
      path: [], //当前绘制多边形经纬度数组
      VehicleInfo: {
        // vin
        vin: '',
        // 时间
        time: '',
        // 经度
        longitude: '',
        // 纬度
        latitude: '',
        // 车速
        speed: '',
        // 总里程
        totalMileage: '',
        // 总电压
        totalVoltage: '',
        // 总电流
        totalCurrent: '',
        // 绝缘电阻
        insulationResistance: '',
        // 档位
        gears: '',
        // 加速踏板行程值
        acceleratorPedal: '',
        // 制动踏板行程值
        brakePedal: '',
        // 燃料消耗率
        fuelConsumptionRate: '',
        // 电机控制器温度
        MotorControllerTemperature: '',
        // 电机转速
        motorSpeed: '',
        // 电机转矩
        motorTorque: '',
        // 电机温度
        motorTemperature: '',
        // 电机电压
        motorVoltage: '',
        // 电机电流
        motorCurrent: '',
        // 动力电池剩余电量SOC
        remainingPower: '',
        // 当前状态允许的最大反馈功率
        maximumFeedbackPower: '',
        // 当前状态允许最大放电功率
        maximumDischargePower: '',
        // BMS自检计数器
        selfTestCounter: '',
        // 动力电池充放电电流
        batteryChargeOrDischargeCurrent: '',
        // 动力电池负载端总电压V3
        totalVoltageV3: '',
        // 单次最大电压
        maximumVoltage: '',
        // 单体电池最低电压
        minimumBatteryVoltage: '',
        // 单体电池最高温度
        maximumBatteryTemperature: '',
        // 单体电池最低温度
        minimumBatteryTemperature: '',
        // 动力电池可用容量
        usableBatteryCapacity: '',
        // 车辆状态
        vehicleStatus: '',
        // 充电状态
        chargeStatus: '',
        // 运行状态
        operationalStatus: '',
        // SOC
        soc: '',
        // 可充电储能装置工作状态
        energyStorageDeviceWorkingStatus: '',
        // 驱动电机状态
        driveMotorStatus: '',
        // 定位是否有效
        positioningIsOrNotEffective: '',
        // EAS
        eas: '',
        // PTC
        ptc: '',
        // EPS
        eps: '',
        // ABS
        abs: '',
        // MCU
        mcu: '',
        // 动力电池加热状态
        batteryHeatingStatus: '',
        // 动力电池当前状态
        batteryCurrentStatus: '',
        // 动力电池保温状态
        batteryInsulationStatus: '',
        // DCDC
        dcdc: '',
        // CHG
        chg: '',
        // 校验位
        checkDigit: '',
      },
      vin: this.$route.query.vin,
      carMarker: null, // 车辆标记实例
      carPath: null, // 车辆行驶路径（注意：此处代码并未初始化路径）
      carPosition: { // 车辆当前位置
        longitude: 116.663817, // 经度
        latitude: 39.53177, // 纬度
      },
    }
  },
  // 计算属性 类似于data概念",
  computed: {},
  // 监控data中的数据变化",
  watch: {},
  // 方法集合",
  methods: {
    // 地图初始化
    initMap() {
      // 初始化地图，设置初始中心点和缩放级别
      this.map = new AMap.Map('map', {
        zoom: 15, // 缩放级别
        center: [this.carPosition.longitude, this.carPosition.latitude], // 中心点经纬度
      });
    },
    createCar() {
      // 创建车辆标记，设置车辆图标、位置等
      const icon = new AMap.Icon({
        size: new AMap.Size(50, 50), // 图标尺寸
        image: 'https://s1.4sai.com/src/img/png/37/3760fd545ff848c2b241b7cf400b3dd7.png?imageView2/2/w/256&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:F5xvrYJwsejuj9uCJhs70CQ7-mg=', // 图标图片链接
        imageSize: new AMap.Size(50, 50), // 图标所用图片尺寸
      });

      this.carMarker = new AMap.Marker({
        map: this.map, // 标记添加到哪个地图上
        position: [this.carPosition.longitude, this.carPosition.latitude], // 标记位置
        icon: icon, // 使用的图标
        offset: new AMap.Pixel(-26, -13), // 相对于定位点的偏移量
      });
    },
    startSimulation() {
      // 开始模拟车辆移动，每秒调用一次 moveCar 方法
      setInterval(() => {
        this.moveCar();
      }, 1000);
    },
    moveCar() {
      // 模拟车辆移动，随机改变经纬度
      const newLng = this.VehicleInfo.longitude; // 经度增加0.001
      // const newLng = this.carPosition.longitude + 0.001; // 经度增加0.001
      const newLat = this.VehicleInfo.latitude; // 纬度随机增加0.0005到0.001
      // const newLat = this.carPosition.latitude + 0.001 * Math.random() * 0.5; // 纬度随机增加0.0005到0.001
      // 注意：此处 carPath 并未初始化或用于显示路径，可能会报错
      // 如果你需要记录或显示行驶路径，请初始化 carPath 并使用 AMap.Polyline 等相关 API
      // this.carPath.push([newLng, newLat]); // 假设 carPath 是一个 Polyline 实例
      this.carMarker.setPosition([newLng, newLat]); // 设置车辆标记的新位置
      this.carPosition = { longitude: newLng, latitude: newLat }; // 更新车辆位置
    },
    open() {
      open().then(res =>{
        console.log(res)
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.open()
    this.timer = setInterval(() => {
      read().then(res => {
        this.VehicleInfo = res.data
      })
    },2000)
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
    this.initMap(); // 初始化地图
    this.createCar(); // 创建车辆标记
    this.startSimulation(); // 开始模拟车辆移动
    this.intAmap(() => {
      if (this.paths) {
        this.editRectangle(this.paths);
      }
    })
  },
  beforeCreate() {
  }, // 生命周期 - 创建之前",
  beforeMount() {
  }, // 生命周期 - 挂载之前",
  beforeUpdate() {
  }, // 生命周期 - 更新之前",
  updated() {
  }, // 生命周期 - 更新之后",
  beforeDestroy() {
    // 组件销毁前清理资源
    if (this.carPath) {
      this.carPath.setMap(null); // 如果 carPath 是 Polyline 实例，则移除它
    }
    if (this.carMarker) {
      this.carMarker.setMap(null); // 移除车辆标记
    }
    if (this.map) {
      this.map.destroy(); // 销毁地图实例
    }
    //定时器
    if (this.timer) {
      close().then(res => {
        console.log(res)
      })
      clearInterval(this.timer)
    }
  }, // 生命周期 - 销毁之前",
  destroyed() {
  }, // 生命周期 - 销毁完成",
  activated() {
  } // 如果页面有keep-alive缓存功能，这个函数会触发",
}
</script>
<style lang="scss" scoped>
#amapContainer {
  height: 400px;
  width: 1200px;
}

</style>
