<template>
  <div class="container">
    <div id="amap-container"></div>
    <div class="controller">
      <div class="in_transit_information">
        <span class="item_details">起始点:</span>
        <el-select v-model="startPoint" style="width: 150px;" class="inputStyle" filterable placeholder="请选择起点">
          <el-option
            v-for="item in vertexs"
            :key="item.vertexId"
            :label="item.addressName"
            :value="item.vertexId">
          </el-option>
        </el-select>
        <!--<el-input style="width: 120px;" class="inputStyle" v-model.trim="startPoint"> </el-input>-->
        <span class="item_details">终点:</span>
        <el-select v-model="endPoint" style="width: 150px;" class="inputStyle" filterable placeholder="请选择终点">
         <el-option
            v-for="item in vertexs"
            :key="item.vertexId"
            :label="item.addressName"
            :value="item.vertexId">
          </el-option>
        </el-select>
        <!--<el-input style="width: 120px;" class="inputStyle" v-model.trim="endPoint"> </el-input>-->
        <el-button type="primary" class="searchstyle" @click="initData2">查询</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { shallowRef } from "@vue/reactivity";
import { lazyAMapApiLoaderInstance } from "vue-amap";
import { sjTime, stringToDate } from "@/utils/sharedJsFile";
import Slider from "./slider.vue";
Vue.use(Slider);
import Vue from "vue";
export default {
  name: "PathView",
  setup() {
    const map = shallowRef(null);
    return {
      map
    };
  },
 
  data() {
    return {
      lineList:[],
      startPoint:"",
      endPoint:"",
      //地图组件
      map:null,
      //顶点
      vertexs:"",
    };
  },
  created() {
    let that =this;
    that.initMap(105.602725,37.076636);
  },
  mounted() {},
  methods: {
    //初始化数据
    initData() {
      let that = this;
      that.axios
        .get("/api/v1/otms/mapvertexs/findAllAvailableVertex")
        .then(res => {
          console.log(res);
          that.vertexs=res.data.data;
          console.log(that.vertexs);
          that.map.setCenter([res.data.data[0].longitude,res.data.data[0].latitude]);
          //画车
          res.data.data.forEach(element => {
             that.initMarkes( 20,25, require("@/assets/img/end.png"),element.longitude,element.latitude,element.addressName);
          });
        });
          
    },
   //查询路线
   initData2(){
      let that = this;
      if(that.lineList!=null){
        that.map.remove(that.lineList);
      }
      that.axios
        .get("/api/v1/otms/mapvertexs/getObtainTheOptimalPath?startPoint="+that.startPoint+"&endPoint="+that.endPoint)
        .then(res => {
          console.log(res);
          let path=[];
          res.data.data.forEach((item,index)=>{
            console.log(item)
            console.log(item.latitude)
            console.log(item.longitude)
            let point=[item.longitude,item.latitude];
            path.push(point);
          })
          console.log()
         that.initPolyline(path, "#FF0000");
        });
   },
   
    //初始化预计轨迹
    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.lineList.push(endLine);
      that.map.setFitView([[endLine]]);
    },
    //初始化地图
    initMap(lon,lat) {
      lazyAMapApiLoaderInstance.load().then(() => {
        let that = this;
        that.map = new AMap.Map("amap-container", {
          //设置地图容器id
          viewMode: "2D", //是否为2D地图模式
          zoom: 20, //初始化地图级别
          center: [lon,lat] //初始化地图中心点位置105.602725,37.076636
        });
        that.initData()
      });
    },

     //创建简单的标记
    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(2, 10), // 图像相对展示区域的偏移量，适于雪碧图等
        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);
      console.log("成功绘制一个标记");
    },
   
    //初始化窗体
    initCustomMarkes(title, details, lon, lat) {
      let that = this;
      //自定义窗体内容
      var content = [
        "<div  style='top:1px;width: 180px; background-color: rgba(0, 0, 0, 1);' ><font color='white'>" +
          title +
          "</font>",
        "<div style='background-color:rgba(255, 255, 255, 0.5);'><font color='white'>" +
          details +
          "</font></div></div>"
      ];
      // 创建 infoWindow 实例
      var infoWindow = new AMap.InfoWindow({
        content: content.join("<br>"),//传入 dom 对象，或者 html 字符串
        offset:new AMap.Pixel(0,-20)//修改信息差窗体偏移
      });
      // 打开信息窗体
      infoWindow.open(that.map, [lon, lat]);
    },
  
  }
};
</script>
<style>
.inputStyle {
  position: absolute;
  width: 200px;
  left: 50px;
}

.controller {
  width: 100%;
  height: 70px;
  background: white;
  position: absolute;
  z-index: 99;
  top: 0;
  left: 0;
}
.in_transit_information {
  width: 600px;
  float: left;
  height: 40px;
}

.container {
  width: 100%;
  height: 100%;
}
span.item_details2 {
  position: relative;
  left: 20px;
  top: 20px;
}
.date_picker_style {
  position: relative;
  left: 50px;
}
.item_details {
  position: relative;
  top: 5px;
  height: 0px;
  left: 50px;
}
#amap-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  font-family: "微软雅黑";
}

/* 进度条 */
.mySlider {
  width: 150px;
  height: 20px;
  display: inline-block;
  position: relative;
  left: 32px;
}
/* 进度条 */
.mySlider2 {
  width: 400px;
  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;
  width: 40px;
}
.searchstyle {
  position: relative;
  left: 45px;
}
.map-control {
  float: left;
  width: 270px;
}
.driving_information {
  height: 40px;
  width: 240px;
  float: left;
}
</style>
