<!--
@name: 已派车-派车单轨迹
@author: 张泽贤
@time: 2022-04-28
-->
<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>
    <a-row>
      <a-col :span="24">
        <a-tag color="#2db7f5">
          {{ editData.loadingBillId }}
        </a-tag>
        <a-tag color="#2db7f5">
          {{ desc }}
        </a-tag>
      </a-col>
    </a-row>
    <div id="locusMap-map" style="height: 600px; width: 100%"></div>
    <div class="input-card">
      <a-timeline>
        <a-timeline-item v-for="(item, index) in pointList" :key="index" @click="infoWindow(item)" style="cursor: pointer">
          <div slot="dot" class="timeline-sort">{{ index + 1 }}</div>
          <div>
            <div>
              <div
                :class="{
                  'timeline-sort': true,
                  ti: item.siteTypeName === '提货点',
                  song: item.siteTypeName === '送货点',
                }"
              >
                {{ item.siteTypeName.split('')[0] }}
              </div>
              {{ item.siteName }}
            </div>
            <div>预计提货时间：{{ item.estimatedTime }}</div>
            <div>
              实际提货时间：{{ item.actualTime }}
              <div class="late" v-show="item.timeDescription">（{{ item.timeDescription }}）</div>
              <div class="accurate" v-show="!item.timeDescription">（准点）</div>
            </div>
            <div>温度：{{ item.temperature }}</div>
          </div>
        </a-timeline-item>

        <!-- <a-timeline-item>
          <div slot="dot" class="timeline-sort">1</div>
          <div>
            <div class="timeline-sort ti">提</div>
            武汉市蔡甸区雨诗乳品配送中心
          </div>
          <div>预计提货时间：0227 19:00~19:20</div>
          <div>
            实际提货时间：0227 19:10
            <div class="accurate">（准点）</div>
          </div>
          <div>启运温度：1.C</div>
        </a-timeline-item>
        <a-timeline-item>
          <div slot="dot" class="timeline-sort">2</div>
          <div>
            <div class="timeline-sort song">送</div>
            武汉市蔡甸区雨诗乳品配送中心
          </div>
          <div>预计提货时间：0227 19:00~19:20</div>
          <div>
            实际提货时间：0227 19:10
            <div class="late">（晚点10分钟）</div>
          </div>
          <div><a-icon type="warning" class="warning" />送达温度：1.C</div>
        </a-timeline-item> -->
      </a-timeline>
    </div>
  </div>
</template>

<script>
import { wechat, deviceLink, device, site_info } from '../js/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: {
    editData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      myMap: '',
      pointList: [
        // {
        //   id: '7258513959805825404',
        //   shipbillId: 'YD1000058153',
        //   shipbillNo: 'YD1000058153',
        //   loadingBillId: null,
        //   loadingBillNo: null,
        //   vehicleId: '10000118',
        //   vehicleCode: 'C005',
        //   vehiclePlateNumber: '鄂A5T221',
        //   driverId: '2000000321',
        //   driverCode: 'ym_001',
        //   driverName: '杨梦',
        //   driverPhoneNumber: '15972025252',
        //   longitude: 116.478935,
        //   latitude: 39.997761,
        //   enterpriseId: '806190963029577728',
        //   enterpriseName: '逸飞物流',
        //   createtime: '2023-02-27 10:54:49',
        //   createperson: '杨梦',
        //   updatetime: '2023-02-27 10:54:49',
        //   updateperson: '杨梦',
        //   startShipTime: '2023-02-27 10:54:47',
        //   deliveryTime: null,
        //   realShipbillId: 'YD1000058153',
        //   temperature: null,
        // },
        // {
        //   id: '-1073198758421407764',
        //   shipbillId: 'YD1000058153',
        //   shipbillNo: 'YD1000058153',
        //   loadingBillId: null,
        //   loadingBillNo: null,
        //   vehicleId: '10000118',
        //   vehicleCode: 'C005',
        //   vehiclePlateNumber: '鄂A5T221',
        //   driverId: '2000000321',
        //   driverCode: 'ym_001',
        //   driverName: '杨梦',
        //   driverPhoneNumber: '15972025252',
        //   longitude: 116.484648,
        //   latitude: 39.999861,
        //   enterpriseId: '806190963029577728',
        //   enterpriseName: '逸飞物流',
        //   createtime: '2023-02-27 11:05:09',
        //   createperson: '杨梦',
        //   updatetime: '2023-02-27 11:05:09',
        //   updateperson: '杨梦',
        //   startShipTime: null,
        //   deliveryTime: null,
        //   realShipbillId: 'YD1000058153',
        //   temperature: null,
        // },
      ],
      polyline: null,

      trajectory: 'wechat',
      zindex: 100,
      desc: '',
    };
  },
  mounted() {
    this.myMap = new AMap.Map('locusMap-map', {
      resizeEnable: true,
      center: [116.397428, 39.90923],
      zoom: 5,
      mapStyle: 'amap://styles/light',
    });
    this.site_info();
    this.wechat();
  },
  methods: {
    trajectoryChange(e) {
      this.myMap.clearMap();
      // this.polyline?.clear();

      if (e.target.value === 'wechat') {
        this.site_info();
        this.wechat();
      } else if (e.target.value === 'device') {
        this.site_info();
        this.device();
      } else if (e.target.value === 'deviceLink') {
        this.site_info();
        this.deviceLink();
      }
    },

    // 画点
    initPage(list) {
      list.forEach((markerInfo, markerIndex) => {
        if (markerInfo.longitude && markerInfo.latitude) {
          let _this = this;
          // if (markerIndex === 0) {
          //   markerInfo.marker = new AMap.Marker({
          //     position: [markerInfo.longitude, markerInfo.latitude],
          //     icon: startIcon,
          //     map: _this.myMap,
          //     offset: new AMap.Pixel(-10, -31),
          //   });
          // } else if (markerIndex === list.length - 1) {
          //   markerInfo.marker = new AMap.Marker({
          //     position: [markerInfo.longitude, markerInfo.latitude],
          //     icon: endIcon,
          //     map: _this.myMap,
          //     offset: new AMap.Pixel(-10, -31),
          //   });
          // } else {
          //   markerInfo.marker = new AMap.Marker({
          //     position: [markerInfo.longitude, markerInfo.latitude],
          //     content: `<i class="icon-jing">${markerIndex + 1}</i>`,
          //     map: _this.myMap,
          //     offset: new AMap.Pixel(-10, -31),
          //   });
          // }
          markerInfo.marker = new AMap.Marker({
            position: [markerInfo.longitude, markerInfo.latitude],
            content: `<i class="icon-jing">${markerIndex + 1}</i>`,
            map: _this.myMap,
            offset: new AMap.Pixel(-10, -31),
          });

          // 点点击事件
          markerInfo.marker.on('click', function () {
            _this.infoWindow(markerInfo, markerIndex + 1);
          });
        }
      });
    },
    // 点击弹窗
    infoWindow(markerInfo, markerIndex) {
      let infoBody = '<div style="color: red">' + (markerInfo.siteTypeName || '') + '</div>';
      infoBody += '<div style="color: red">提货顺序：' + (markerInfo.siteOrder || '') + '</div>';
      infoBody += '<div>提货地点：' + (markerInfo.siteName || '') + '</div>';
      infoBody += '<div>总运单数：' + (markerInfo.shipbillQty || '') + '</div>';
      infoBody += '<div>总件数：' + (markerInfo.totalPieceQty || '') + ' </div>';
      infoBody += '<div>总重量：' + (markerInfo.totalWeightQty || '') + ' kg</div>';
      infoBody += '<div>总体积：' + (markerInfo.totalVolumeQty || '') + ' m³</div>';
      infoBody += '<div>要求提货时间：' + (markerInfo.estimatedTime || '') + ' </div>';
      infoBody += '<div>实际提货时间：' + (markerInfo.actualTime || '') + ' </div>';
      infoBody += '<div>' + (markerInfo.timeDescription || '') + ' km/h</div>';

      let infoWindow = new AMap.InfoWindow({
        content: infoBody,
        offset: new AMap.Pixel(0, -31),
      });
      infoWindow.open(this.myMap, [markerInfo.longitude, markerInfo.latitude]);
      this.myMap.setCenter([markerInfo.longitude, markerInfo.latitude], true);
      this.zindex += 1;
      markerInfo.marker && markerInfo.marker.setzIndex(this.zindex);
    },

    // 画线
    initPageLine(list) {
      // let _this = this;
      // let lineArr = list.map((item) => {
      //   return [item.longitude, item.latitude];
      // });
      // lineArr = [
      //   [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.483633, 39.998935],
      //   [116.48367, 39.998968],
      //   [116.484648, 39.999861],
      // ];
      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();
    },

    // 小程序查询
    wechat() {
      // ZCD0000002065
      wechat({ loadingBillId: this.editData.loadingBillId }).then((res) => {
        if (res.success) {
          this.desc = res.data.desc;
          this.initPageLine(res.data.tmsVehicleGpsDTOList);
          this.$emit('getLineList', res.data.tmsVehicleGpsDTOList);
        } else {
          this.$exception(res);
        }
      });
    },

    // 设备直连查询
    deviceLink() {
      // ZCD0000002065
      deviceLink({ loadingBillId: this.editData.loadingBillId }).then((res) => {
        if (res.success) {
          this.desc = res.data.desc;
          this.initPageLine(res.data.deviceGpsDTOList);
          this.$emit('getLineList', res.data.deviceGpsDTOList);
        } else {
          this.$exception(res);
        }
      });
    },

    // 设备轨迹
    device() {
      // ZCD0000002065
      device({ loadingBillId: this.editData.loadingBillId }).then((res) => {
        if (res.success) {
          this.desc = res.data.desc;
          this.initPageLine(res.data.deviceGpsDTOList);
          this.$emit('getLineList', res.data.deviceGpsDTOList);
        } else {
          this.$exception(res);
        }
      });
    },

    // 获取点数据
    site_info() {
      // ZCD0000002065
      site_info({ loadingBillId: this.editData.loadingBillId }).then((res) => {
        if (res.success) {
          this.pointList = [...res.data];
          this.initPage(this.pointList);
        } else {
          this.$exception(res);
        }
      });
    },
  },
};
</script>

<style lang='less'>
.orderPath {
  position: relative;

  .input-card {
    position: absolute;
    top: 40px;
    right: 0;
    max-height: 600px;
    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;
  }

  .timeline-sort {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    border-radius: 50%;
    background-color: #2b80ff;
    color: #fff;
    text-align: center;
  }

  .ant-timeline-item {
    font-size: 16px;
  }

  .ti {
    border-radius: 10%;
    background-color: #2b80ff;
    display: inline-block;
  }

  .song {
    border-radius: 10%;
    background-color: rgb(107, 15, 216);
    display: inline-block;
  }

  .warning {
    color: red;
    margin-right: 10px;
  }

  .accurate {
    color: rgb(26, 34, 252);
    display: inline-block;
  }

  .late {
    color: red;
    display: inline-block;
  }
}
</style>