
<template>
  <div>
    <a-card :bordered="false" style="margin-bottom: 10px;">
      <div class="table-page-search-wrapper" style="height: 8vh; width: 100%">
        <a-steps
          type="navigation"
          :current="stepArr.length"
        >
          <a-step v-for="(item, index) in stepArr" :key="index" :title="item.title" :status="item.status" >
            <a-icon slot="icon" type="interation" />
          </a-step>
        </a-steps>
      </div>
    </a-card>
    <a-card :bordered="false" class="table-card">
      <div style="height: 80vh; width: 100%" id="container"></div>
      <div id="toolControl">
        <!--                <div class="toolItem" id="markers" title="开始" @click="beginMove"></div>-->
        <!--        <div class="toolItem active" id="marker" title="点标记" @click="selectDragType('marker')"></div>-->
        <div class="toolItem" id="polyline" title="折线" @click="selectDragType('polyline')"></div>
        <!--        <div class="toolItem" id="polygon" title="多边形" @click="selectDragType('polygon')"></div>
        <div class="toolItem" id="circle" title="圆形" @click="selectDragType('circle')"></div>
        <div class="toolItem" id="rectangle" title="矩形" @click="selectDragType('rectangle')"></div>
        <div class="toolItem" id="ellipse" title="椭圆" @click="selectDragType('ellipse')"></div>-->
      </div>
      <div class="control">
        <button @click="changeDirection" class="beginMove"><a-icon type="swap" />方向转换</button>
        <button @click="saveMapData" class="stopMove"><a-icon type="save" />保存</button>
        <a-popover title="提示">
          <template #content>
            <p>1、启用编辑后，点击线条，可调整航线</p>
            <p>2、调整航线后，按Esc退出后，保存航线，即可更新航线数据</p>
          </template>
          <button @click="openPolyLine" class="stopMove"><a-icon type="edit" />启用编辑</button>
        </a-popover>
        <button @click="resetMapData" class="resumeMove"><a-icon type="radius-setting" />重置</button>
      </div>
      <!--      <div class="control">
        <button @click="beginMove" class="beginMove" :disabled="moved">航线模拟</button>
        <button @click="stopMove" class="stopMove">终止模拟</button>
        <button @click="pauseMove" class="pauseMove">暂停模拟</button>
        <button @click="resumeMove" class="resumeMove">恢复模拟</button>
        <button @click="resetMap" class="resumeMove">重置</button>
      </div>-->

    </a-card>
  </div>
</template>

<script>
/* eslint-disable */
import { delSysWharf, getAllSysWharf } from '@/api/system/sysWharf'
import { getRouteLine, addRouteLine, delRouteLine } from '@/api/system/line'
export default {
  name: 'RouterLine',
  data() {
    return {
      open: false,
      model: null,
      path: [],
      roation: null,
      center: null,
      map: null,
      editor: null,
      activeType: 'polyline',
      sysWharfList: [],
      stepArr: [],
      markerLayer: null,
      customPath:[],
      moved: true,
      polyLine: null,
      startAndEndMarkerLayer: null,
      polylineLayerEdit: null
    }
  },
  filters: {
  },
  mounted() {
    // 确保腾讯地图SDK已加载
    /*const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://map.qq.com/api/gljs?libraries=tools,geometry,model&v=1.exp&key=A7PBZ-WLKKC-XW52U-A5BML-XLALT-2DF2Q'
    document.body.appendChild(script)*/
    this.initMap()
    // this.initMap2()
    // this.getListSysWharf()
  },
  created() {
  },
  methods: {
    saveMapData() {
      if (this.customPath.length <=0) {
        this.$message.error('当前未获取到航线信息！')
        return
      }
      var _this = this
      this.$confirm({
        title: '是否保存航线信息?',
        zIndex:1003,
        onOk () {
          _this.addLine()
        },
        onCancel () {
          console.log('取消保存航线')
        }
      })
    },
    resetMapData() {
      var that = this
      this.$confirm({
        zIndex:1002,
        title: '确认重置航线数据?',
        onOk () {
          return delRouteLine()
            .then(() => {
              that.editor = null
              that.activeType = 'polyline'
              that.markerLayer = null
              that.customPath = []
              /*if (that.map && that.polyLine && that.startAndEndMarkerLayer) {
                that.map.removeLayer("polyline-layer")
                that.map.removeLayer("marker-layer")
              }*/
              that.polyLine = null
              that.startAndEndMarkerLayer = null
              that.map.destroy()
              that.initMap()
              that.$message.success(
                '重置成功',
                3
              )
            })
        },
        onCancel () {}
      })
    },
    changeDirection() {
      if (this.stepArr.length > 0){
        this.stepArr = this.stepArr.reverse()
      }
      if (this.map && this.startAndEndMarkerLayer && this.polyLine) {
        this.map.removeLayer("polyline-layer")
        this.map.removeLayer("marker-layer")
      }
      if (this.path.length > 0){
        this.path = this.path.reverse()
        this.markRoutePath(this.path)
      }
    },
    addLine() {
      addRouteLine(this.customPath).then((response) => {
        this.customPath = []
        this.getLinePath()
      })
    },
    getLinePath() {
      if (this.map && this.editor){
        console.log('摧毁编辑器')
        this.editor.disable()
        this.editor.removeOverlay('polyline-edit')
        if (this.polylineLayerEdit){
          this.map.removeLayer("polyline-layer-edit")
        }
      } else {
        if (this.map && this.startAndEndMarkerLayer && this.polyLine) {
          this.map.removeLayer("polyline-layer")
          this.map.removeLayer("marker-layer")
        }
      }
      this.path = []
      getRouteLine().then((response) => {
        this.path = response.data
        // 添加路径 开始 结束 图标
        if (this.path && this.path.length > 1) {
          this.markRoutePath(this.path)
        }
      })
    },
    getListSysWharf() {
      this.sysWharfList = []
      this.stepArr = []
      getAllSysWharf().then((response) => {
        this.sysWharfList = response.data
        // 显示码头数据
        this.stepArr = this.sysWharfList.map((item) => {
          return {
            title: item.wharfNanme,
            status: 'finish'
          }
        })
        // 标记码头点
        this.markPoint(this.sysWharfList)
      })
    },
    selectDragType(type) {
      document.getElementById(this.activeType).className = 'toolItem'
      document.getElementById(type).className = 'toolItem active'
      this.activeType = type
      this.editor.setActiveOverlay(type)
      this.editor.enable()
    },
    beginMove() {
      const paths = this.path.map((item) => {
        return {
          position: new TMap.LatLng(item.lat, item.lng)
        }
      })
      this.model.moveAlong({
        // 移动过程中每个节点的坐标
        path: paths,
        duration: 15000, // 完成移动所需的时间 单位毫秒
        degreeToNorth: 180 // 把模型正方向旋转至正北方向所需的角度 默认为0
      })
    },
    stopMove() {
      if (this.model){
        this.model.stopMove();
      }
    },
    pauseMove() {
      if (this.model){
        this.model.pauseMove();
      }
    },
    resumeMove() {
      if (this.model){
        this.model.resumeMove();
      }
    },
    openPolyLine() {
      this.customPath = []
      const paths = this.path.map((item) => {
        return new window.TMap.LatLng(item.lat,item.lng)
      })
      if (this.map && this.startAndEndMarkerLayer && this.polyLine) {
        this.map.removeLayer("polyline-layer")
        this.map.removeLayer("marker-layer")
      }
      this.editor = null
      this.polylineLayerEdit = new window.TMap.MultiPolyline({
        id: 'polyline-layer-edit',
        map: this.map,
        styles: {
          style_blue: new window.TMap.PolylineStyle({
            color: '#3777FF', //线填充色
            width: 6, //折线宽度
            borderWidth: 5, //边线宽度
            borderColor: '#FFF', //边线颜色
            lineCap: 'butt' //线端头方式
          })
        },
        geometries: [
          {
            id: 'pl_1', //设置折线唯一id，可用于删除等
            styleId: 'style_blue',//绑定样式id,对应上面第一组样式
            paths: paths
          }
        ]
      })
      this.editor = new window.TMap.tools.GeometryEditor({
        map: this.map, // 编辑器绑定的地图对象
        overlayList: [ // 可编辑图层
          {
            overlay: this.polylineLayerEdit,
            id: 'polyline-edit',
            selectedStyleId: 'style_blue',
          }
        ],
        actionMode: window.TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
        activeOverlayId: 'polyline-edit', // 激活图层
        selectable: true,
        snappable: true
      });
      // 修改完成监听
      this.editor.on('adjust_complete', (geometry) => {
        console.log('航线编辑完成！！！！！！！')
        // 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle（矩形）图层
        const _this = this
        if (this.editor.getActiveOverlay().id === 'polyline-edit') {
          // 获取折线路径坐标
          console.log('绘制的多边形坐标：', geometry.paths)
          this.customPath = geometry.paths
          console.log('当前路径Path：', this.customPath)
        }
      })
    },
    resetMap() {
      this.$router.go(0)
    },
    markPoint(pointArr) {
      const geometries = pointArr.map((item) =>{
        return {
          "id": item.id,   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
          "position": new window.TMap.LatLng(Number(item.lat), Number(item.lng)),  //点标记坐标位置
          styleId: 'small',
          content: item.wharfNanme
        }
      })
      this.markerLayer = new window.TMap.MultiMarker({
        map: this.map,  //指定地图容器
        styles: {
          small: new window.TMap.MarkerStyle({
            // 点标注的相关样式
            width: 34, // 宽度
            height: 46, // 高度
            anchor: { x: 17, y: 23 }, // 标注点图片的锚点位置
            color: '#333', // 标注点文本颜色
            size: 16, // 标注点文本文字大小
            direction: 'bottom', // 标注点文本文字相对于标注点图片的方位
            strokeColor: '#fff', // 标注点文本描边颜色
            strokeWidth: 2, // 标注点文本描边宽度
          }),
          big: new window.TMap.MarkerStyle({
            width: 58,
            height: 76,
            anchor: { x: 36, y: 32 },
            color: '#333',
            size: 22,
            direction: 'bottom',
            strokeColor: '#fff',
            offset: { x: 0, y: 10 },
            strokeWidth: 2,
          }),
        },
        //点标记数据数组
        geometries: geometries
      });
    },
    markRoutePath(pathArr) {
      const paths = pathArr.map((item) => {
        return new window.TMap.LatLng(item.lat, item.lng)
      })
      const _this = this
      // 添加起点和终点 - 开始
      const startPosition = new window.TMap.LatLng(pathArr[0].lat, pathArr[0].lng) // 路线规划起点
      const endPosition = new window.TMap.LatLng(pathArr[pathArr.length -1].lat, pathArr[pathArr.length -1].lng) // 路线规划终点
      this.startAndEndMarkerLayer = new window.TMap.MultiMarker({
        // 创造MultiMarker显示起终点标记
        id: 'marker-layer',
        map: _this.map,
        styles: {
          start: new TMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: { x: 16, y: 32 },
            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
          }),
          end: new TMap.MarkerStyle({
            width: 25,
            height: 35,
            anchor: { x: 16, y: 32 },
            src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
          })
        },
        geometries: [
          {
            id: 'start',
            styleId: 'start',
            position: startPosition
          },
          {
            id: 'end',
            styleId: 'end',
            position: endPosition
          }
        ]
      })
      // 添加起点和终点 - 结束
      // 创建 MultiPolyline显示路径折线
      this.polyLine =  new window.TMap.MultiPolyline({
        id: 'polyline-layer',
        map: _this.map,
        styles: {
          style_blue: new window.TMap.PolylineStyle({
            color: '#3777FF',
            width: 10,
            borderWidth: 4,
            borderColor: '#FFF',
            lineCap: 'square',
            showArrow: true,
            arrowOptions: {
              width: 8,
              height: 12,
              space: 80,
            }
          })
        },
        geometries: [
          {
            id: 'pl_1',
            styleId: 'style_blue',
            paths: paths
          }
        ]
      })
      // 创建 MultiPolyline显示路径折线 结束
      /*this.model = new window.TMap.model.GLTFModel({
        // url: 'http://127.0.0.1:18080/profile/upload/2024/03/16/scene.gltf',
        url: 'https://mapapi.qq.com/web/jsapi/jsapi-gl/assets/car.gltf',
        map: _this.map,
        id: 'model',
        position: startPosition, // 模型初始位置
        rotation: [0, 130, 0], // 模型XYZ三轴上的旋转角度
        scale: 10 // 模型在XYZ三轴上的缩放比例
      })

      // model资源加载完成回调
      this.model.on('loaded', () => {
        console.log('模型加载成功')
        // 启用模型沿线移动演示
        // MoveButton.disabled = false
        _this.moved = false
      })

      this.model.on('moving', function (e) {
        if (!e.passedPath) return
        // geometry文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocGeometry
        _this.roation = TMap.geometry.computeHeading(
          // 计算两点之间的航向
          e.passedPath[e.passedPath.length - 2].position,
          e.passedPath[e.passedPath.length - 1].position
        )
        _this.center = TMap.geometry.computeDestination(
          // 根据起点、朝向和距离计算终点
          e.passedPath[e.passedPath.length - 1].position,
          _this.roation,
          60
        )
        _this.map.easeTo(
          // 平滑过渡到指定状态
          {
            center: _this.center,
            rotation: e.rotation[1] + 180,
            zoom: 20,
            pitch: 70
          },
          {
            duration: 300
          }
        )
      })*/
    },
    initMap() {
      // 设置地图中心点
      const center = new TMap.LatLng(36.076698,103.805328)
      // 定义工厂模式函数
      const myOptions = {
        zoom: 13.8, // 设置地图缩放级别
        center: center
      }
      // 初始化重新定位
      this.map = new TMap.Map('container', myOptions)
      const polyline = new TMap.MultiPolyline({
        map: this.map
      })
      this.editor = new TMap.tools.GeometryEditor({
        // TMap.tools.GeometryEditor 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor
        map: this.map, // 编辑器绑定的地图对象
        overlayList: [
          // 可编辑图层 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor#4
          {
            overlay: polyline,
            id: 'polyline'
          }
        ],
        actionMode: window.TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
        activeOverlayId: 'polyline', // 激活图层
        snappable: true // 开启吸附
      })

      this.editor.on('draw_complete', (geometry) => {
        // 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle（矩形）图层
        // 判断当前处于编辑状态的图层id是否是overlayList中id为rectangle（矩形）图层
        const id = geometry.id
        const _this = this
        if (this.editor.getActiveOverlay().id === 'polyline') {
          // 获取折线路径坐标
          console.log('绘制的多边形坐标：', geometry.paths)
          this.customPath.push(...geometry.paths)
          console.log('当前路径Path：', this.customPath)
          // 开始添加 路线规划的覆盖层
          this.$confirm({
            title: '是否继续设置航线?',
            zIndex:1002,
            onOk () {
              _this.editor.enable()
            },
            onCancel () {
              _this.editor.disable()
              _this.$confirm({
                title: '是否保存航线?',
                zIndex:1003,
                onOk () {
                  _this.addLine()
                },
                onCancel () {
                  console.log('取消保存航线')
                }
              })
            }
          })
        }
      })
      this.editor.disable()
      this.getListSysWharf()
      this.getLinePath()
    }
  }
}
</script>
<style scoped lang="less">

#toolControl {
  position: absolute;
  top: 10px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 380px;
  z-index: 1001;
}

.toolItem {
  width: 42px;
  height: 42px;
  float: left;
  margin: 1px;
  padding: 4px;
  border-radius: 3px;
  background-size: 30px 30px;
  background-position: 4px 4px;
  background-repeat: no-repeat;
  box-shadow: 0 1px 2px 0 #e4e7ef;
  background-color: #ffffff;
  border: 1px solid #ffffff;
}

.toolItem:hover {
  border-color: #789cff;
}

.active {
  border-color: #d5dff2;
  background-color: #d5dff2;
}

#marker {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_editor.png');
}

#polyline {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polyline.png');
}

#polygon {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polygon.png');
}

#circle {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/circle.png');
}

#rectangle {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/rectangle.png');
}

#ellipse {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/ellipse.png');
}

#markers {
  background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_editor.png');
}

.control {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 9999;
  padding: 10px;
}
.control button {
  padding: 10px 14px;
  box-sizing: border-box;
  border: none;
  background-color: #919aac;
  border-radius: 2px;
  color: #fff;
  font-size: 14px;
  line-height: 14px;
  cursor: pointer;
  margin-left: 6px;
}

.control .beginMove {
  background: #3876ff;
}
.control .stopMove {
  background: #3876ff;
}
</style>
