<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import {deleteRecord, getList, historyMap} from "@/api/table";

export default {
  components: {},
  props: {},
   data() {
     return{
       duration:2000,
       AMap: null,
       map: null,
       historyList:[],
       recordId:null,
       recordCar:{
         vin:null,
         startTime:null,
         endTime:null
       },
       arr:[],
       lineArr:null,
       carMsg:[],
     }
   },
   mounted() {

   },
   created() {
    this.getList()
   },
   methods: {
     deleteRecord(recordId){
       this.recordId = recordId
       deleteRecord(this.recordId).then(res=>{
         this.$message.success("删除成功！")
         location.reload()
       })
     },
    getList(){
      getList().then(res=>{
        this.historyList = res.data
      })
    },
     doDo(recordCar){
       this.recordCar.vin = recordCar.vin
       this.recordCar.startTime = recordCar.startTime
       this.recordCar.endTime = recordCar.endTime
       historyMap(this.recordCar).then(res=>{
         console.log(res)
         // this.carMsg = res.data
         res.data.forEach(item=>{
           this.carMsg = item
           this.arr.push(item.longitude.replace(/"/g, "") +","+item.latitude.replace(/"/g, ""))
           this.lineArr = this.arr.map(item => item.trim().replace(/'/g, '').split(','))
           console.log(this.lineArr)
         })
       })
       this.initMap()
       this.startAnimation()
     },
     initMap() {
       AMapLoader.load({
         key: "0b5f26b194361cbc9571101bc2856962", // 申请好的Web端开发者Key，首次调用 load 时必填
         version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
         plugins: [
           "AMap.Scale",
           "AMap.HawkEye",
           "AMap.ToolBar",
           "AMap.AutoComplete",
           "AMap.PlaceSearch",
           "AMap.ControlBar",
           "AMap.MouseTool",
           "AMap.DragRoute",
           "AMap.MoveAnimation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
       }).then((AMap) => {
         // 获取到作为地图容器的DOM元素，创建地图实例
         this.map = new AMap.Map("container", { //设置地图容器id
           resizeEnable: true,
           viewMode: "2D", // 使用3D视图
           zoomEnable: true, // 地图是否可缩放，默认值为true
           dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
           doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
           zoom: 13, //初始化地图级别
           center: this.lineArr[0], // 初始化中心点坐标 北京
           // mapStyle: "amap://styles/darkblue", // 设置颜色底层
         })

         this.marker = new AMap.Marker({
           position: this.lineArr[0],
           icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
           offset: new AMap.Pixel(-13, -26),
         });
         this.map.add(this.marker)

         // 绘制轨迹
         this.polyline = new AMap.Polyline({
           path: this.lineArr,
           showDir: true,
           strokeColor: "#28F",  //线颜色
           // strokeOpacity: 1,     //线透明度
           strokeWeight: 6,      //线宽
           // strokeStyle: "solid"  //线样式
         });
         this.map.add(this.polyline)

         // 走过的路径
         this.passedPolyline = new AMap.Polyline({
           strokeColor: "#AF5",  //线颜色
           strokeWeight: 6,      //线宽
         });
         this.map.add(this.passedPolyline)

         // 监听marker移动
         this.marker.on('moving', (e) => {
           this.passedPolyline.setPath(e.passedPath); // 设置路径样式
           this.map.setCenter(e.target.getPosition(), true) // 设置地图中心点
         });

         this.map.setFitView(); // 根据覆盖物自适应展示地图

       })
     },
     startAnimation () {
       setTimeout(()=>{
         AMap.plugin('AMap.MoveAnimation', () => {
           console.log('开始回放')
           this.marker.moveAlong(this.lineArr, {
             // 每一段的时长
             duration: this.duration,//可根据实际采集时间间隔设置
             // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
             autoRotation: true,
           });
         })
       },2000)
     },
   },
 }
</script>

<template>
  <div>
    <div v-for="car in carMsg" :key="car.id">
        <p>主键id:{{car.id}}</p>
        <p>VIN:{{car.vin}}</p>
        <p>时间戳:{{car.createTime}}</p>
        <p>经度:{{car.longitude}}</p>
        <p>维度:{{car.latitude}}</p>
        <p>速度:{{car.speed}}</p>
        <p>里程:{{car.mileage}}</p>
        <p>总电压:{{car.voltage}}</p>
        <p>总电流:{{car.current}}</p>
        <p>绝缘电阻:{{car.resistance}}</p>
        <p>档位:{{car.gear}}</p>
        <p>加速踏板行程值:{{car.accelerationPedal}}</p>
        <p>制动踏板行程值:{{car.brakePedal}}</p>
        <p>燃料消耗率:{{car.fuelConsumptionRate}}</p>
        <p>电机控制器温度:{{car.motorControllerTemperature}}</p>
        <p>电机转速:{{car.motorSpeed}}</p>
        <p>电机转矩:{{car.motorTorque}}</p>
        <p>电机温度:{{car.motorTemperature}}</p>
        <p>电机电压:{{car.motorVoltage}}</p>
        <p>电机电流:{{car.motorCurrent}}</p>
        <p>动力电池剩余电量SOC:{{car.remainingBattery}}</p>
        <p>当前状态允许的最大反馈功率:{{car.maximumFeedbackPower}}</p>
        <p>当前状态允许最大放电功率:{{car.maximumDischargePower}}</p>
        <p>BMS自检计数器:{{car.selfCheckCounter}}</p>
        <p>动力电池充放电电流:{{car.totalBatteryCurrent}}</p>
        <p>动力电池负载端总电压V3:{{car.totalBatteryVoltage}}</p>
        <p>单次最大电压:{{car.singleBatteryMaxVoltage}}</p>
        <p>单体电池最低电压:{{car.singleBatteryMinVoltage}}</p>
        <p>单体电池最高温度:{{car.singleBatteryMaxTemperature}}</p>
        <p>单体电池最低温度:{{car.singleBatteryMinTemperature}}</p>
        <p>动力电池可用容量:{{car.availableBatteryCapacity}}</p>
        <p>车辆状态:{{car.vehicleStatus}}</p>
        <p>充电状态:{{car.chargingStatus}}</p>
        <p>运行状态:{{car.operatingStatus}}</p>
        <p>SOC:{{car.socStatus}}</p>
        <p>可充电储能装置工作状态:{{car.chargingEnergyStorageStatus}}</p>
        <p>驱动电机状态:{{car.driveMotorStatus}}</p>
        <p>定位是否有效:{{car.positionStatus}}</p>
        <p>EAS(汽车防盗系统)状态:{{car.easStatus}}</p>
        <p>PTC(电动加热器)状态:{{car.ptcStatus}}</p>
        <p>EPS(电动助力系统)状态:{{car.epsStatus}}</p>
        <p>ABS(防抱死)状态:{{car.absStatus}}</p>
        <p>MCU(电机/逆变器)状态:{{car.mcuStatus}}</p>
        <p>动力电池加热状态:{{car.heatingStatus}}</p>
        <p>动力电池当前状态:{{car.batteryStatus}}</p>
        <p>动力电池保温状态:{{car.batteryInsulationStatus}}</p>
    </div>
    <div>

      <el-form>
        <table style="width: 100% ">
          <tr>
            <td>VIN</td>
            <td><el-input  placeholder="请输入车辆VIN"></el-input></td>
            <td>开始时间</td>
            <td><el-input  placeholder="请输入开始时间"></el-input></td>
            <td>结束时间</td>
            <td><el-input  placeholder="请输入结束时间"></el-input></td>
            <td>
              <el-button type="primary">搜索</el-button>
              <el-button type="danger">重置</el-button>
            </td>
          </tr>
        </table>
      </el-form>
      <el-table :data="historyList">
        <el-table-column label="历史轨迹ID">
          <template slot-scope="scope">
            {{scope.row.recordId}}
          </template>
        </el-table-column>

        <el-table-column label="VIN">
          <template slot-scope="scope">
            {{scope.row.vin}}
          </template>
        </el-table-column>
        <el-table-column label="开始时间">
          <template slot-scope="scope">
            {{scope.row.startTime}}
          </template>
        </el-table-column>
        <el-table-column label="结束时间">
          <template slot-scope="scope">
            {{scope.row.endTime}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="doDo(scope.row)" type="text">历史轨迹</el-button>
            <el-button type="info" @click="deleteRecord(scope.row.recordId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="container"></div>
  </div>

</template>

<style scoped lang="scss">
#container{
  width: 50%;
  height: 400px;
}
</style>
