<template>
  <div class="container">
    <div id="amap-container"></div>
    <div class="mapcontroller">
      <div class="in_transit_information">
        <label class="item_details">起点:{{ startPointName }}</label>
        <br />
        <label class="item_details">收货地址:{{ endPointName }}</label>
        <br />
      </div>
      <div class="driving_information2">
        <label class="item_details">时间:{{ runRoute.gtm }}</label>
        <br />
        <label class="item_details">车速:{{ runRoute.spd }}千米/小时</label>
        <br />
        <br />
        <!--控制条-->
        <div class="map-control" v-show="isActual">
          <!--播放暂停按钮-->
          <Icon
            v-if="!isPlay"
            class="play-icon play"
            type="ios-play"
            @click="
              isPlay = true;
              play();
              navgControl(playIcon);
            "
          />
          <Icon
            v-else
            class="play-icon pause"
            type="ios-pause"
            @click="
              isPlay = false;
              stop();
              navgControl('pause');
            "
          />
          <Icon class="play-icon quickly" type="ios-play" @click="addIndex()" />
          <!--已播放时间-->
          <!--进度条-->
          <div class="mySlider">
            <Slider
              class="map-slider"
              v-model="sliderVal"
              :tip-format="hideFormat"
              :step="0.0001"
            ></Slider>
          </div>
        </div>
      </div>
    </div>
    <el-row>
      <el-button type="primary" @click="slow">慢速</el-button>
      <el-button type="success" @click="middle">中速</el-button>
      <el-button type="danger" @click="fast">快速</el-button>
      <el-button type="success" @click="addIndex" plain>快进</el-button>
      <el-button type="danger" @click="stop" plain>暂停</el-button>
      <el-button type="success" @click="play" plain>开始</el-button>
      <el-select
        style="width:100px"
        @change="changeParkingTime"
        v-model="parkingTime"
        placeholder="停车"
      >
        <el-option
          v-for="item in parkingOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        style="width:100px"
        @change="changeLeaveTime"
        v-model="leaveTime"
        placeholder="离线"
      >
        <el-option
          v-for="item in parkingOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-row>
    <div class="btnx">
      <el-button type="primary" class="" @click="openInfo"
        >打开信息窗体</el-button
      >
      <el-button type="primary" class="" @click="closeinfo"
        >关闭信息窗口</el-button
      >
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from "@vue/reactivity";
import { Loading } from "element-ui";
import { lazyAMapApiLoaderInstance } from "vue-amap";
import Slider from "./slider.vue";
Vue.use(Slider);
import AMapJS from "amap-js";
import Vue from "vue";
var infoWindow;
export default {
  name: "PathView",
  props: {
    orderNumber: "",
    capacityNumber: "",
    startPointName: "",
    endPointName: "",
    startTime: "",
    endTime: ""
  },
  setup() {
    const map = shallowRef(null);
    return {
      map
    };
  },
  watch: {
    //监听车牌号变化
    orderNumber: {
      deep: true,
      handler(val, oldVal) {
        console.log(val);
        this.initData(val);
      }
    }
  },
  data() {
    return {
      ///che
      isTimesChoose: false,
      isActual: true,
      isPlay: false,
      passedTime: "12:02:10",
      sliderVal: 0,
      times: 1,
      totalTime: "11",
      speed: 10000,
      startTime:"",
      endTime:"",
      //选择停车时长
      parkingTime: null,
      //停车时长选择区间
      parkingOptions: [
        {
          value: 600000,
          label: "10分钟"
        },
        {
          value: 1200000,
          label: "20分钟"
        },
        {
          value: 1800000,
          label: "30分钟"
        },
        {
          value: 2400000,
          label: "40分钟"
        },
        {
          value: 3000000,
          label: "50分钟"
        },
        {
          value: 3600000,
          label: "60分钟"
        },
        {
          value: 36000000,
          label: "关闭"
        }
      ],
      //离线图标
      leaveMark: [],
      //停车图标
      parkMark: [],
      //选择离线时长
      leaveTime: null,
      //离线时长选择区间
      leaveOptions: [
        {
          value: 600000,
          label: "10分钟"
        },
        {
          value: 1200000,
          label: "20分钟"
        },
        {
          value: 1800000,
          label: "30分钟"
        },
        {
          value: 2400000,
          label: "40分钟"
        },
        {
          value: 3000000,
          label: "50分钟"
        },
        {
          value: 3600000,
          label: "60分钟"
        },
        {
          value: 36000000,
          label: "关闭"
        }
      ],
      //已行驶轨迹
      runRoute: {
        agl: "",
        gtm: "",
        hgt: "",
        lat: "",
        lon: "",
        mil: "",
        spd: ""
      },
      point: "",
      pointNext: "",
      loading: null,
      navgtrSpeed: 1,
      //地图中心位置
      centerPoint: {
        pointLat: "",
        pointLon: ""
      },
      //自定义窗体信息
      ctmarkes: {
        lat: "33.015888071433764",
        lon: "115.96995235868168",
        title: "豫SE8888",
        details: "安徽省阜阳市颍东区阜阳舜岳水泥公司,西北方向,155.1米"
      },
      //运输详情
      transportDetail: {
        //车牌号
        capacityNumber: "",
        //规划路线
        estimateRoute: [
          {
            lat: "33.015888071433764",
            lon: "115.96995235868168"
          }
        ],
        //规划线路
        estimatePath: [[114.03046212985384, 32.49786984660489]],
        //已行驶轨迹
        runRoute: [
          {
            agl: "44",
            gtm: "2022年03月09日 16:47:24",
            hgt: "13",
            lat: "32.906411535084985",
            lon: "115.76177868692135",
            mil: "429409.2",
            spd: "17.0"
          }
        ],
        runPath: [[114.03922119568348, 32.49746162481379]],
        //当前位置
        currentPointName: "中国达州市通川区",
        //当前位置经纬度
        currentPoint: {
          lat: "",
          lon: ""
        },
        //起点位置
        startPointName: "中国达州市通川区",
        //起点位置经纬度
        startPoint: {
          lon: "114.03922119568348",
          lat: "32.49746162481379"
        },
        //终点位置
        endPointName: "中国成都萧山",
        //终点位置经纬度
        endPoint: {
          lon: "115.96995737755431",
          lat: "33.01595479752097"
        },
        //自定义标记
        content: [],
        //异常位置
        abnormalLocation: []
      },
      listPath: [],
      //组件
      pathSimplifierIns: {},
      pathNavigator: {},
      //地图解析
      geocoder: null,
      currentPointName: ""
    };
  },
  created() {
    let that = this;
    that.initData(that.orderNumber);
  },
  mounted() {},
  methods: {
    //停车时间改变
    changeParkingTime() {
      let that = this;
      //清除之前的停车点
      that.hideParkingMark();
      //计算时间的点
      let calculationPoint = null;
      that.listPath[0].runRoute.forEach(function(item, indexOf) {
        if (indexOf + 1 < that.listPath[0].runRoute.length) {
          //判断calculationPoint是否为空，如果是空的说明当前没有在计算停车时间
          if (calculationPoint == null && item.spd == "0.0") {
            calculationPoint = item;
          } else if (calculationPoint != null && item.spd != "0.0") {
            let beforeTime = that.stringToDate(calculationPoint.gtm);
            let item2 = that.listPath[0].runRoute[indexOf];
            let afterTime = that.stringToDate(item2.gtm);
            let second = afterTime - beforeTime;
            if (second > that.parkingTime) {
              let message = "停车:" + second / 60000;
              that.initParkingMarkes(
                20,
                35,
                require("@/assets/img/park.png"),
                calculationPoint.lon,
                calculationPoint.lat,
                message.split(".")[0] + "分钟"
              );
            }
            calculationPoint = null;
          }
        }
      });
    },
    //字符串转为Date
    stringToDate(dateString) {
      console.log(dateString);
      let dateStr = dateString
        .replace("年", "-")
        .replace("月", "-")
        .replace("日", "");
      return Date.parse(dateStr);
    },
    //停车所有离线图标
    hideParkingMark() {
      let that = this;

      that.parkMark.forEach(function(item, indexOf) {
        item.hide();
      });
    },
    //离线时间改变时获得超过时间的点信息
    changeLeaveTime() {
      let that = this;
      //关闭所有图标
      that.hideLeaveMark();
      that.listPath[0].runRoute.forEach(function(item, indexOf) {
        if (indexOf + 1 < that.listPath[0].runRoute.length) {
          let beforeTime = that.stringToDate(item.gtm);
          let item2 = that.listPath[0].runRoute[indexOf + 1];
          let afterTime = that.stringToDate(item2.gtm);
          let second = afterTime - beforeTime;
          if (second > that.leaveTime) {
            let message = "离线:" + second / 60000;
            that.initLeaveMarkes(
              20,
              35,
              require("@/assets/img/leave.png"),
              item2.lon,
              item2.lat,
              message.split(".")[0] + "分钟"
            );
          }
        }
      });
    },
    //关闭所有离线图标
    hideLeaveMark() {
      let that = this;
      that.leaveMark.forEach(function(item, indexOf) {
        item.hide();
      });
    },
    slow() {
      console.log("slow");
      let that = this;
      that.pathNavigator.setSpeed(1000);
    },
    middle() {
      console.log("middle");
      let that = this;
      that.pathNavigator.setSpeed(10000);
    },
    fast() {
      console.log("fast");
      let that = this;
      that.pathNavigator.setSpeed(100000);
    },
    play() {
      let that = this;
      that.pathNavigator.resume();
    },
    stop() {
      let that = this;
      that.pathNavigator.pause();
    },
    addIndex() {
      let that = this;
      let increment = that.listPath[0].runPath.length * 0.1;
      that.pathNavigator.start(
        (that.point + increment) % that.listPath[0].runPath.length
      );
    },
    ///che
    navgControl() {},
    hideFormat(value) {
      let that = this;
      that.sliderVal = value;
    },
    initParkingMarkes(weight, height, image, lon, lat, title) {
      let that = this;
      //图标标记点
      let pointicon = new AMap.Icon({
        size: new AMap.Size(weight, height), // 图标尺寸
        image: image, // Icon的图像
        imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
      });
      // 创建一个 Marker 实例：
      var pointmarker = new AMap.Marker({
        position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        icon: pointicon,
        title: title
      });
      that.parkMark.push(pointmarker);
      // 将创建的点标记添加到已有的地图实例：
      that.map.add(pointmarker);
    },
    //创建离线和停车的标记
    initLeaveMarkes(weight, height, image, lon, lat, title) {
      let that = this;
      //图标标记点
      let pointicon = new AMap.Icon({
        size: new AMap.Size(weight, height), // 图标尺寸
        image: image, // Icon的图像
        imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
      });
      // 创建一个 Marker 实例：
      var pointmarker = new AMap.Marker({
        position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        icon: pointicon,
        title: title
      });
      that.leaveMark.push(pointmarker);
      // 将创建的点标记添加到已有的地图实例：
      that.map.add(pointmarker);
    },
    initData(orderNumber) {
      let that = this;
      that.axios
        .post("/api/v1/otms/fullPath?orderNumber=" + orderNumber)
        .then(res => {
          console.log(res.data);
          if (res.data.data == "-1") {
            this.$message.error("运输订单未关闭的自提车辆无权查看!");
          } else if (res.data.data.startAndEndRoutes != null) {
            that.listPath = res.data.data.startAndEndRoutes;
            that.startTime=res.data.data.startAndEndRoutes[0].runRoute[0].gtm;
            that.endTime=res.data.data.startAndEndRoutes[0].runRoute[res.data.data.startAndEndRoutes[0].runRoute.length-1].gtm;
            that.initMap();
          } else {
            that.listPath = [];
            this.$message.error("车辆没有开启GPS");
          }
        });
    },
    endline() {
      let that = this;
      that.initPolyline(that.listPath[0].estimatePath, "#FF0000");
    },
    //创建起点终点当前点
    threeMarker() {
      let that = this;
      that.listPath.forEach((element, index) => {
        //开始标记点
        if (element.startPoint.lon != "" && element.startPoint.lat != "") {
          that.initMarkes(
            20,
            35,
            require("@/assets/img/start.png"),
            element.startPoint.lon,
            element.startPoint.lat,
            "起点"
          );
        }
        //当前点
        that.getCurrentPointName([
          element.runRoute[element.runRoute.length - 1].lon,
          element.runRoute[element.runRoute.length - 1].lat
        ]);
        //结束标记点
        if (element.endPoint.lon != "" && element.endPoint.lat != "") {
          that.initMarkes(
            20,
            35,
            require("@/assets/img/end.png"),
            element.endPoint.lon,
            element.endPoint.lat,
            "终点"
          );
        }
      });
    },
    //获得结束地址
    getCurrentPointName(lnglatXY) {
      let that = this;
      that.geocoder.getAddress(lnglatXY, function(status, result) {
        if (status === "complete" && result.info === "OK") {
          that.currentPointName = result.regeocode.formattedAddress;
          that.initCustomMarkes(
            that.capacityNumber,
            "位置：" +
              that.currentPointName +
              "<br/>" +
              "距离：" +
              that.listPath[0].miled+
              "<br/>" +
              "时间范围：" +
              that.startTime+' 至 '+that.endTime,

            lnglatXY[0],
            lnglatXY[1]
          );
        }
      });
    },
    //defualt数据
    defaultDate() {
      // let that=this;
      // that.pathNavigator.start(that.listPath[0].runPath.length)
      // that.pathNavigator.pause();
    },
    //初始化地图
    initMap() {
      lazyAMapApiLoaderInstance.load().then(() => {
        let that = this;
        that.map = new AMap.Map("amap-container", {
          //设置地图容器id
          viewMode: "2D", //是否为2D地图模式
          zoom: 10, //初始化地图级别
          center: [105.602725, 37.076636] //初始化地图中心点位置
        });
        that.initGeocoder();
        that.initPathSimplifier();
        that.threeMarker();
        //that.initCustomMarkes(that.capacityNumber+"("+that.listPath[0].miled+")",that.listPath[0].currentPointName,that.listPath[0].currentPoint.lon,that.listPath[0].currentPoint.lat)
        that.endline();
      });
    },
    initCustomMarkes(title, details, lon, lat) {
      let that = this;
      //自定义窗体内容
      var content = [
        "<div  style='top:1px;width: 200px; background-color: rgba(22, 160, 133, 1);' ><font color='white'>" +
          title +
          "</font>",
        "<div style='background-color:(22, 160, 133, 1); ;'><font color='white'>" +
          details +
          "</font></div></div>"
      ];
      // 创建 infoWindow 实例
      infoWindow = new AMap.InfoWindow({
        content: content.join("<br>") //传入 dom 对象，或者 html 字符串
      });
      // 打开信息窗体
      infoWindow.open(that.map, [lon, lat]);
    },
    // 关闭信息窗口
    closeinfo() {
      infoWindow.close();
    },
    openInfo() {
      let lon = null;
      let lat = null;
      console.log(this.listPath);
      this.listPath.forEach(e => {
        if (e.endPoint != {} && e.endPoint != "" && e.endPoint != null) {
          lon = e.endPoint.lon;
          lat = e.endPoint.lat;
        } else {
          lon = e.runRoute[e.runRoute.length - 1].lon;
          lat = e.runRoute[e.runRoute.length - 1].lat;
        }
      });
      infoWindow.open(this.map, [lon, lat]);
    },
    initPolyline(path, color) {
      let that = this;
      //预计轨迹
      var endLine = new AMap.Polyline({
        map: that.map,
        path: path,
        isOutline: true,
        outlineColor: color,
        borderWeight: 0,
        strokeColor: "#FF0000",
        strokeOpacity: 1,
        strokeWeight: 5,
        // 折线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5],
        lineJoin: "round",
        lineCap: "round",
        zIndex: 50
      });
      that.map.setFitView([[endLine]]);
    },
    //创建简单的标记
    initMarkes(weight, height, image, lon, lat, title) {
      let that = this;
      //图标标记点
      let pointicon = new AMap.Icon({
        size: new AMap.Size(weight, height), // 图标尺寸
        image: image, // Icon的图像
        imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        imageSize: new AMap.Size(weight, height) // 根据所设置的大小拉伸或压缩图片
      });
      // 创建一个 Marker 实例：
      var pointmarker = new AMap.Marker({
        position: new AMap.LngLat(lon, lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        icon: pointicon,
        title: title
      });
      // 将创建的点标记添加到已有的地图实例：
      that.map.add(pointmarker);
    },
    //创建轨迹和巡航器
    initPathSimplifier() {
      let that = this;
      // ...你的操作
      new AMapUI.load(["ui/misc/PathSimplifier"], PathSimplifier => {
        if (!PathSimplifier.supportCanvas) {
          alert("当前环境不支持 Canvas！");
          return;
        }
        //创建轨迹和巡航器
        // 创建组件实例
        that.pathSimplifierIns = new PathSimplifier({
          map: that.map,
          zIndex: 100, // 图层叠加顺序
          data: that.listPath, // 巡航路径
          // 获取巡航路径中的路径坐标数组
          getPath: (pathData, pathIndex) => {
            return pathData.runPath;
          },
          //鼠标悬浮停时显示消息
          getHoverTitle: function(pathData, pathIndex, pointIndex) {
            //返回鼠标悬停时显示的信息
            if (pointIndex >= 0) {
              if (pathData.runRoute[pointIndex].gtm !== "undefined") {
                //鼠标悬停在某个轨迹节点上
                return (
                  pathData.runRoute[pointIndex].gtm +
                  "，速度" +
                  pathData.runRoute[pointIndex].spd +
                  "千米/小时"
                );
              }
            }
          },
          //设置轨迹样式
          renderOptions: {
            //轨迹线的样式
            pathLineStyle: {
              strokeStyle: "black",
              lineWidth: 6,
              dirArrowStyle: true
            }
          }
        });
        // 创建巡航器
        that.pathNavigator = that.pathSimplifierIns.createPathNavigator(0, {
          loop: true, // 是否循环
          speed: that.speed, // 速度(km/h)
          pathNavigatorStyle: {
            width: 20,
            height: 40,
            content: PathSimplifier.Render.Canvas.getImageContent(
              require("@/assets/img/smallcar.png"),
              onload,
              onerror
            ),
            strokeStyle: null,
            fillStyle: null
          }
        });
        //开启巡航
        that.pathNavigator.start();
        that.defaultDate();

        //开始事件
        that.pathNavigator.on("start resume", function() {
          // that.navgtr._startTime = Date.now();
          // that.navgtr._startDist = this.getMovedDistance();
        });
        //暂停
        that.pathNavigator.on("stop pause", function() {
          // that.navgtr._movedTime = Date.now() - that.navgtr._startTime;
          // that.navgtr._movedDist = this.getMovedDistance() - that.navgtr._startDist;
        });
        that.pathNavigator.on("move", function(data, value) {
          that.updateLable(value);
        });
      });
    },
    updateLable(value) {
      let that = this;
      that.point = value.dataItem.pointIndex;
      that.runRoute = value.dataItem.pathData.runRoute[that.point];
      that.sliderVal =
        (value.dataItem.pointIndex / value.dataItem.pathData.runRoute.length) *
        100;
    },
    changeSpeed(value) {
      // console.log(value)
      // let that=this;
      // that.times=value;
    },
    playIcon() {
      console.log("nihoa");
    },
    //逆解码函数
    initGeocoder() {
      let that = this;
      console.log("initGeocoder");
      AMap.plugin("AMap.Geocoder", function() {
        that.geocoder = new AMap.Geocoder({
          radius: 1000,
          extensions: "all"
        });

        console.log(that.geocoder);
      });
    }
  }
};
</script>
<style>
.mapcontroller {
  width: 250px;
  height: 260px;
  background: white;
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
}
.container {
  width: 100%;
  height: 100%;
}
.item_details {
  display: block;
  margin-top: 20px;
  position: relative;
  left: 30px;
  width: 200px;
  height: 0px;
}
#amap-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  font-family: "微软雅黑";
}
.driving_information2 {
  position: relative;
  top: 70px;
}
.driving_information3 {
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
  position: relative;
  top: 50px;
}

/* 进度条 */
.mySlider {
  width: 150px;
  height: 20px;
  display: inline-block;
  position: relative;
  left: 32px;
}
.play {
  position: relative;
  left: 28px;
}
.quickly {
  float: right;
  position: relative;
  left: -20px;
  top: 10px;
}
.pause {
  position: relative;
  left: 28px;
}
.passed-time {
  position: relative;
  left: 5px;
}
.end-time {
  position: relative;
  left: 5px;
}
.map-times {
  position: relative;
  background-color: red;
  width: 40px;
}
</style>
<style lang="scss" scoped>
.btnx {
  z-index: 1000;
  position: fixed;
  bottom: 10px;
  right: 10px;
}
</style>
