<!--
@name: 待调度-分组调度-地图
@author: 张泽贤
@time: 2022-04-26
-->
<template>
  <p-card class="full-card-panel packetMap">
    <a-space slot="title" style="display: flex; align-items: center; cursor: pointer">
      <a-icon type="arrow-left" style="color: #1990ff" @click="back" />
      地图
    </a-space>
    <a-space slot="extra">
      <p-button type="primary" @click="onSave">保存</p-button>
    </a-space>
    <a-row :gutter="16" style="height: 100%">
      <a-col :span="12" style="height: 100%">
        <div id="packetMap" style="height: 100%"></div>
      </a-col>
      <a-col :span="12" class="dis-flex">
        <div class="line-content">
          <div v-for="(item, index) in lineArr" :key="index" :class="['line', selectIndex === index ? 'selected' : '']" @click="lineChlick(index)">
            <p-form-model ref="formTarget" :model="item.info" :label-col="{ span: 16 }" :wrapper-col="{ span: 8 }" class="plg-grid-from">
              <a-row>
                <p-col :span="6" class="form_title">PCD001</p-col>
                <p-col :span="6" class="form_title">线路分组</p-col>
              </a-row>
              <a-row>
                <p-col :span="6">
                  <p-form-model-item label="总单量"></p-form-model-item>
                </p-col>
                <p-col :span="6">
                  <p-form-model-item label="总件数"></p-form-model-item>
                </p-col>
                <p-col :span="6">
                  <p-form-model-item label="总重量"></p-form-model-item>
                </p-col>
                <p-col :span="6">
                  <p-form-model-item label="总体积"></p-form-model-item>
                </p-col>
              </a-row>
              <a-row>
                <p-col :span="6">
                  <p-form-model-item label="总站数"></p-form-model-item>
                </p-col>
                <p-col :span="6">
                  <p-form-model-item label="总里程数"></p-form-model-item>
                </p-col>
                <a-col :span="10">
                  <p-form-model-item :wrapper-col="{ span: 24 }" style="text-align: right">
                    <a-space>
                      <p-button type="primary" @click="onCalculateMileage(item)">计算里程</p-button>
                    </a-space>
                  </p-form-model-item>
                </a-col>
              </a-row>
            </p-form-model>
            <p-table ref="packTable" dragle bordered row-key="id" :scroll="{ x: true, y: 160 }" :data-source.sync="item.tableList" :rowSelectType="false" :autoLoad="false" :pagination="false">
              <p-table-column data-index="data1" title="配送顺序" />
              <p-table-column data-index="data2" title="站点名称" />
              <p-table-column data-index="data3" title="站点地址" />
              <p-table-column data-index="data4" title="联系人" />
              <p-table-column data-index="data5" title="联系方式" />
            </p-table>
          </div>
        </div>
      </a-col>
    </a-row>
  </p-card>
</template>

<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>

<script>
export default {
  data() {
    return {
      selectIndex: -1,

      myMap: '',
      SimpleMarker: '',
      SimpleInfoWindow: '',
      pathSimplifierIns: '',
      PathSimplifier: '',

      lineArr: [
        {
          id: '1',
          info: {
            data1: '硚口线',
            data2: '2',
            data3: '2',
            data4: '10',
            data5: '10',
            data6: '10',
            data7: '10',
            data8: '10',
            data9: '50/50/50',
            data10: '硚口仓',
            data11: '上海松江分院',
            data12: '上海市松江区',
          },
          polyline: '',
          marker: '',
          lnglat: [
            [116.478935, 39.997761],
            [116.478939, 39.997825],
            [116.478912, 39.998549],
            [116.478912, 39.998549],
            [116.478998, 39.998555],
            [116.478998, 39.998555],
            [116.479282, 39.99856],
            [116.479658, 39.998528],
            [116.480151, 39.998453],
            [116.480784, 39.998302],
            [116.480784, 39.998302],
            [116.481149, 39.998184],
            [116.481573, 39.997997],
            [116.481863, 39.997846],
            [116.482072, 39.997718],
            [116.482362, 39.997718],
            [116.481362, 39.997118],
            [116.483633, 39.998935],
            [116.48367, 39.998968],
            [116.484648, 39.999861],
          ],
          tableList: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }, { id: 8 }, { id: 9 }, { id: 10 }],
        },
      ],
    }
  },
  mounted() {
    // 注册地图
    this.myMap = new AMap.Map('packetMap', {
      resizeEnable: true,
      center: [116.397428, 39.90923],
      zoom: 17,
      mapStyle: 'amap://styles/light',
    })

    let _this = this

    // 启动UI库
    AMapUI.loadUI(['overlay/SimpleMarker', 'overlay/SimpleInfoWindow'], function (SimpleMarker, SimpleInfoWindow) {
      //启动页面
      _this.SimpleMarker = SimpleMarker
      _this.SimpleInfoWindow = SimpleInfoWindow
      _this.initPage()
    })
    AMapUI.load(['ui/misc/PathSimplifier'], function (PathSimplifier) {
      if (!PathSimplifier.supportCanvas) {
        alert('当前环境不支持 Canvas！')
        return
      }
      _this.PathSimplifier = PathSimplifier
      _this.initPageLine()
    })
  },
  methods: {
    // 返回
    back() {
      this.$emit('back')
    },
    initPage() {
      let _this = this
      this.lineArr.forEach((item, index) => {
        // 绘制点
        item.marker = new this.SimpleMarker({
          iconTheme: 'numv1', //图标主题
          iconStyle: 'blue-' + (index + 1), //背景图标样式
          map: this.myMap,
          position: item.lnglat[0],
        })
        item.marker.on('click', function () {
          _this.infoWindow(index)
          _this.pathSimplifierIns.setSelectedPathIndex(index)
          _this.selectIndex = index
        })
      })

      // 终点
      new this.SimpleMarker({
        iconTheme: 'numv1', //图标主题
        iconStyle: 'end', //背景图标样式
        map: this.myMap,
        position: this.lineArr[0].lnglat[this.lineArr[0].lnglat.length - 1],
      })
    },

    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 pathData.name + '，点数量' + pathData.path.length
        },
        renderOptions: {
          //轨迹线的样式
          pathLineStyle: {
            strokeStyle: '#f7b538',
            lineWidth: 3,
          },
          pathLineSelectedStyle: {
            strokeStyle: '#c11534',
            lineWidth: 6,
            dirArrowStyle: true,
          },
        },
      })

      let lineList = this.lineArr.map((item, index) => {
        return {
          name: '轨迹' + (index + 1),
          path: item.lnglat,
        }
      })
      this.pathSimplifierIns.setData(lineList)

      this.pathSimplifierIns.on('pathClick pointClick', function (e, info) {
        console.log('pathClick')
        _this.infoWindow(info.pathIndex)
        _this.selectIndex = info.pathIndex
      })

      this.myMap.setFitView() // 根据覆盖物调整地图范围
    },

    // 点击弹窗
    infoWindow(index) {
      let rdata = this.lineArr[index]
      let infoBody = '<p>线路：' + rdata.info.data1 + '</p>'
      infoBody += '<p>第' + (index + 1) + '站</p>'
      infoBody += '<p>发货地：' + rdata.info.data10 + '</p>'
      infoBody += '<p>收货方：' + rdata.info.data11 + '</p>'
      infoBody += '<p>收货地址：' + rdata.info.data12 + '</p>'

      let infoWindow = new this.SimpleInfoWindow({
        infoBody,
        offset: new AMap.Pixel(0, -31),
      })
      infoWindow.open(this.myMap, rdata.lnglat[0])
    },

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

    // 计算里程
    onCalculateMileage(item) {},

    // 保存
    onSave() {},
  },
}
</script>

<style lang="less">
.packetMap {
  .dis-flex {
    height: 100%;
    display: flex;
    flex-direction: column;

    .line-content {
      flex: 1;
      overflow-y: auto;

      .line {
        list-style: none;
        padding: 10px;
      }

      .line.selected {
        border: 1px solid #333;
        box-sizing: border-box;
      }

      .form_title {
        text-align: center;
        height: 40px;
        line-height: 40px;
        color: #f56c6c;
        font-weight: 700;
      }
    }
  }
}
</style>