/** // author：jiana // time:2025-04-23 // desc:运单管理 */
<template>
  <div class="mapTrack">
    <!-- <div class="btnBox">
        <div>轨迹回放控制</div>
        <div style="margin:10px 0;">
          <Button size="small" type="primary" @click="startAnimation" ghost style="margin-right:20px;">开始动画</Button>
          <Button size="small" type="primary" @click="pauseAnimation" ghost>暂停动画</Button>
        </div>
        <div>
          <Button size="small" type="primary" @click="resumeAnimation" ghost style="margin-right:20px;">继续动画</Button>
          <Button size="small" type="primary" @click="stopAnimation" ghost>停止动画</Button>
        </div>
      </div> -->
    <!-- 异常停留 -->
    <div class="abnormal">
      <div>
        <span class="abnormal-title">共停留{{ parkArray.length }}次,共停留{{ totalMin }}分钟</span>
        <el-button size="small" type="primary" @click="showTable = !showTable">查看停留明细</el-button>
      </div>
      <el-table :data="parkArray" style="width: 100%" border stripe size="small" v-if="showTable">
        <el-table-column prop="parkBte" label="停留开始" width="180">
          <template #default="scope">
            {{ moment(Number(scope.row.parkBte)).format('yyyy-MM-DD hh:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column prop="parkMins" label="停留时长（分钟）" width="180"></el-table-column>
        <el-table-column prop="parkAdr" label="停留地址"></el-table-column>
      </el-table>
    </div>
    <div id="container"></div>
  </div>
</template>
<script>
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import AMapLoader from '@amap/amap-jsapi-loader'
import { tms } from '@/request/api'
import { transformFromWGSToGCJArr } from './utils'
import moment from 'moment'
export default defineComponent({
  components: {},
  props: {
    waybillNum: { type: String, default: '' },
    waybill: { type: Object, default: () => {} },
  },
  setup(props) {
    const route = useRoute()
    const data = ref(null)
    const trajectory = ref([])
    const parkArray = ref([])
    const totalMin = ref(0)
    const showTable = ref(false)
    const loadData = async () => {
      trajectory.value = []
      await tms.truckTrackQueryByWaybillNum({ waybillNum: props.waybillNum }).then(res => {
        if (res.code == 101) {
          data.value = res.data
          if (data.value.result && data.value.result.trackArray) {
            parkArray.value = data.value.result.parkArray
            parkArray.value.forEach(item => {
              totalMin.value += Number(item.parkMins)
            })
            data.value.result.trackArray.forEach(item => {
              if (!isNaN(item.lon) && !isNaN(item.lat)) {
                trajectory.value.push(transformFromWGSToGCJArr(Number(item.lon) / 600000, Number(item.lat) / 600000))
              }
            })
          }
        }
      })
    }

    const getMap = () => {
      AMapLoader.load({
        key: '81a1282308f1aae58082425a1ebb91b0',
        version: '2.0',
        plugins: ['AMap.MoveAnimation'],
      })
        .then(AMap => {
          AMap.plugin('AMap.MoveAnimation', () => {
            var map = new AMap.Map('container', {
              center: trajectory.value[0],
            })
            // 起点
            var marker = new AMap.Marker({
              map: map,
              position: [props.waybill.originLng, props.waybill.originLat],
              icon: require('@/assets/images/qidian.png'), // 自定义图标
              offset: new AMap.Pixel(-13, -26),
            })
            // 终点
            var markerEnd = new AMap.Marker({
              map: map,
              position: [props.waybill.destinationLng, props.waybill.destinationLat],
              icon: require('@/assets/images/zhongdian.png'), // 自定义图标
              offset: new AMap.Pixel(-13, -26),
            })
            // 绘制轨迹
            var polyline = new AMap.Polyline({
              map: map,
              path: trajectory.value,
              showDir: true,
              strokeColor: '#28F', //线颜色
              strokeWeight: 6, //线宽
            })
            map.setFitView()
            // map.setZoom(7)
          })
        })
        .catch(e => {
          console.error(e)
        })
    }
    onMounted(async () => {
      await loadData()
      await getMap()
    })
    return { parkArray, totalMin, showTable, trajectory, data, moment }
  },
})
</script>

<style lang="scss" scoped>
.mapTrack {
  // padding: 20px;
  #container {
    width: 100%;
    height: 460px;
  }
  .btnBox {
    position: absolute;
    top: 70px;
    left: 20px;
    z-index: 1;
    background: #fff;
    width: 200px;
    height: 110px;
    padding: 10px;
    border-radius: 5px;
  }
  .abnormal {
    text-align: right;
    position: absolute;
    width: 50%;
    top: 70px;
    right: 15px;
    padding: 5px;
    z-index: 10;
    &-title {
      padding: 5px;
      background: #fff;
    }
  }
}
</style>
<style lang="scss">
.amap-icon {
  width: 40px !important;
  height: 40px !important;
}
.amap-icon img {
  width: 40px !important;
  height: 40px !important;
}
</style>
