/*
 *@description:订单轨迹
 *@author: hudw
 *@date: 2022-09-16 09:17:47
*/
<template>
  <div id="waybillMap" style="height: 600px; width: 100%"></div>
</template>
<script>
import { getLine, goods_quantity_statistics, line_quantity_statistics } from './api.js'
import mokeLineArr from './data.js'
export default {
  props: {
    ids: {
      type: Array,
      default: () => [],
    },
  },
  watch: {},
  data() {
    return {
      selectIndex: -1,
      myMap: '',
      SimpleMarker: '',
      SimpleInfoWindow: '',
      pathSimplifierIns: '',
      PathSimplifier: '',
      lineArr:[],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let _this = this
      this.myMap = new AMap.Map('waybillMap', {
        resizeEnable: true,
        viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
        zoom: 1,
        mapStyle: 'amap://styles/light',
        center: [116.397428, 39.90923], //初始化地图中心点
      })

      AMapUI.loadUI(['overlay/SimpleMarker', 'overlay/SimpleInfoWindow'], (SimpleMarker, SimpleInfoWindow) => {
        //启动页面
        this.SimpleMarker = SimpleMarker
        this.SimpleInfoWindow = SimpleInfoWindow
      })
      AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
        if (!PathSimplifier.supportCanvas) {
          return alert('当前环境不支持 Canvas！')
        }
        this.PathSimplifier = PathSimplifier
        this.initPageLine()
      })
    //  this.goods_quantity_statistics()
    },

    // 点击弹窗 pathIndex-哪条线路 pointIndex-线路上哪个点
    infoWindow(pathIndex, pointIndex) {
      let pathData = this.lineArr[pathIndex]

      let pointData = pathData.path[pointIndex]

      let infoBody = '<p>车牌号:' + pathData.name + '</p>'
      // infoBody += '<p>第' + (pointIndex + 1) + '站</p>'
      // infoBody += '<p>发货地：' + pathData.shipperUnitName + '</p>'
      // infoBody += '<p>收货方：' + pathData.consigneeUnitName + '</p>'
      // infoBody += '<p>收货地址：' + pathData.consigneeAddress + '</p>'

      let infoWindow = new this.SimpleInfoWindow({
        infoBody,
        offset: new AMap.Pixel(0, -15),
      })

      infoWindow.open(this.myMap, [pointData[0], pointData[1]])
    },

    lineChlick(index) {
      this.selectIndex = index
      this.infoWindow(index, 0)
      this.pathSimplifierIns.setSelectedPathIndex(index)
    },

    goods_quantity_statistics() {
      goods_quantity_statistics(this.ids).then((res) => {
        this.form = { ...res.data }
      })
    },
    line_quantity_statistics() {
      line_quantity_statistics(this.ids).then((res) => {
        this.lineArr = res.data.map((item) => {
          item.marker = ''
          return item
        })
      })
    },
    initPageLine() {
      let _this = this
      //创建组件实例
      this.pathSimplifierIns = new this.PathSimplifier({
        zIndex: 100,
        map: this.myMap, //所属的地图实例
        getPath: function (pathData, pathIndex) {
          //返回轨迹数据中的节点坐标信息，[AMap.LngLat, AMap.LngLat...] 或者 [[lng|number,lat|number],...]
          return pathData.path
        },
        getHoverTitle: function (pathData, pathIndex, pointIndex) {
          //返回鼠标悬停时显示的信息
          if (pointIndex >= 0) {
            //鼠标悬停在某个轨迹节点上
            // return pathData.name + '，点:' + pointIndex + '/' + pathData.path.length
            return '第' + pointIndex + '站'
          }
          //鼠标悬停在节点之间的连线上
          return pathData.name + '，点数量' + pathData.path.length
        },
        renderOptions: {
          keyPointTolerance: 1,
          //轨迹线的样式
          pathLineStyle: {
            strokeStyle: '#f7b538',
            lineWidth: 3,
          },
          pathLineSelectedStyle: {
            strokeStyle: '#c11534',
            lineWidth: 6,
            dirArrowStyle: true,
          },
        },
      })

     return getLine(this, { shipbillId: this.ids.join() }).then((res) => {
        if (res.success) {
          let lineList = {
            name: '',
            shipperUnitName: '',
            consigneeAddress:'',
            path:[]
          }
          res.data.map((item, index) => {
            //纬度，精度
            const { latitude, longitude, vehiclePlateNumber } = item;
            lineList.name = vehiclePlateNumber;
            lineList.path.push([longitude,latitude]);
          });

          // console.log('lineList',[lineList])
            this.lineArr=[lineList]
            this.pathSimplifierIns.setData( this.lineArr)
            this.pathSimplifierIns.on('pathClick pointClick', (e, info)=> {
              _this.infoWindow(info.pathIndex, info.pointIndex || 0)
              _this.selectIndex = info.pathIndex
            })
          this.initPage()
          this.myMap.setFitView() // 根据覆盖物调整地图范围


        }
      })



    },

    initPage() {
      let _this = this
      this.lineArr.forEach((item, index) => {
        // 绘制点
        if (item.path.length) {
          item.marker = new _this.SimpleMarker({
            iconTheme: 'numv1', //图标主题
            //iconStyle: 'blue-' + (index + 1), //背景图标样式
            iconStyle: 'start', //背景图标样式
            map: this.myMap,
            position: [item.path[0][0], item.path[0][1]],
          })
          item.marker.on('click', function () {
            _this.infoWindow(index, 0)
            _this.pathSimplifierIns.setSelectedPathIndex(index)
            _this.selectIndex = index
          })
        }
      })

      // 终点
      if (this.lineArr[0].path.length) {
        let lnglat = this.lineArr[0].path
        let lng=lnglat[lnglat.length-1][0]
        let lat = lnglat[lnglat.length - 1][1]

        new this.SimpleMarker({
          iconTheme: 'numv1', //图标主题
          iconStyle: 'end', //背景图标样式
          map: this.myMap,
          position: [lng,lat],
        })
      }
    },
  },
}
</script>
<style lang='less'>
</style>