/*
 *@description:订单轨迹
 *@author: hudw
 *@date: 2022-09-16 09:17:47
*/
<template>
  <div class="orderPath">
    <a-radio-group v-model="trajectory" @change="trajectoryChange" style="margin-bottom: 20px">
      <a-radio value="wechat">小程序轨迹</a-radio>
      <a-radio value="device">设备轨迹</a-radio>
      <a-radio value="deviceLink">设备直连</a-radio>
    </a-radio-group>
    <div :id="'waybillMap-' + $route.meta.menuId" style="height: 600px; width: 100%"></div>
    <!-- <div class="input-card" v-show="trajectory === 2">
      <h1>轨迹位置</h1>
      <div v-for="(item, index) in list" :key="index">
        <div>[{{ item.gpsDate }}] 速度: {{ item.currentVelocity }} km/h</div>
        <div style="padding-bottom: 10px">{{ item.address }}</div>
      </div>
    </div> -->
  </div>
</template>
<script>
import { wechat, device, deviceLink } from './api.js';

function iconConfig(obj = {}) {
  return {
    // 图标尺寸
    size: new AMap.Size(28, 36),
    // 图标的取图地址
    image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
    // 图标所用图片大小
    imageSize: new AMap.Size(135, 40),
    // 图标取图偏移量
    ...obj,
  };
}
const startIcon = new AMap.Icon(iconConfig({ imageOffset: new AMap.Pixel(-5, -3) }));
const endIcon = new AMap.Icon(iconConfig({ imageOffset: new AMap.Pixel(-95, -3) }));

export default {
  props: {
    ids: {
      type: Array,
      default: () => [],
    },
  },
  watch: {},
  data() {
    return {
      myMap: null,
      polyline: null,

      trajectory: 'wechat',
      zindex: 100,
    };
  },
  mounted() {
    this.myMap = new AMap.Map('waybillMap-' + this.$route.meta.menuId, {
      resizeEnable: true,
      center: [116.397428, 39.90923],
      zoom: 5,
      mapStyle: 'amap://styles/light',
    });
    this.wechat();
    // this.device();
  },
  methods: {
    trajectoryChange(e) {
      this.myMap.clearMap();
      if (e.target.value === 'wechat') {
        this.wechat();
      } else if (e.target.value === 'device') {
        this.device();
      } else if (e.target.value === 'deviceLink') {
        this.deviceLink();
      }
    },

    wechat() {
      // 'YD1000059880'this.ids[0]
      wechat({ shipBillId: this.ids[0] }).then((res) => {
        if (res.success) {
          this.list = res.data;
          if (res.data.length > 0) {
            this.initPageLine(res.data);
            this.$emit('getLineList', res.data);
          }
        } else {
          this.$exception(res);
        }
      });
    },
    device() {
      device({ shipBillId: this.ids[0] }).then((res) => {
        if (res.success) {
          if (res.data.length > 0) {
            this.initPageLine(res.data);
            this.$emit('getLineList', res.data);
          }
        } else {
          this.$exception(res);
        }
      });
    },
    deviceLink() {
      deviceLink({ shipBillId: this.ids[0] }).then((res) => {
        if (res.success) {
          if (res.data.length > 0) {
            this.initPageLine(res.data);
            this.$emit('getLineList', res.data);
          }
        } else {
          this.$exception(res);
        }
      });
    },

    // 画线
    initPageLine(list) {
      let lineArr = list.map((item) => {
        return [item.longitude, item.latitude];
      });
      this.polyline = new AMap.Polyline({
        map: this.myMap,
        path: lineArr,
        showDir: true,
        strokeColor: '#28F', //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6, //线宽
        // strokeStyle: "solid"  //线样式
        lineJoin: 'round',
      });
      this.myMap.setFitView();
    },
  },
};
</script>
<style lang='less'>
.orderPath {
  position: relative;

  .input-card {
    position: absolute;
    top: 40px;
    right: 20px;
    max-height: 500px;
    overflow-y: auto;
    background-color: #fff;
    padding: 20px;
  }

  .icon-jing {
    // width: 32px;
    // height: 46px;
    width: 25px;
    height: 37px;
    display: block;
    text-align: center;
    color: #fff;
    padding-top: 3px;
    font-weight: bold;
    background: url('//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png') no-repeat center center;
    background-size: contain;
  }
}
</style>