/** // author：jiana // time:2025-04-23 // desc:运单管理 */
<template>
  <div class="mapMark">
    <div class="btnBox">
      <el-radio-group v-model="tabPosition" @change="changeTabPosition">
        <el-radio-button value="load">发货地统计</el-radio-button>
        <el-radio-button value="unload">收货地统计</el-radio-button>
        <el-radio-button value="warehouse">仓库地址统计</el-radio-button>
        <!-- <el-radio-button value="left">left</el-radio-button> -->
      </el-radio-group>
    </div>
    <div id="container1"></div>
  </div>
</template>
<script setup>
import { defineComponent, ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import AMapLoader from '@amap/amap-jsapi-loader'
import { tms } from '@/request/api'
const route = useRoute()
const trajectory = ref([])
const tabPosition = ref('load')
const map = ref(null)
const initMap = () => {
  AMapLoader.load({
    key: '81a1282308f1aae58082425a1ebb91b0',
    version: '2.0',
    plugins: ['AMap.MoveAnimation'],
  })
    .then(AMap => {
      AMap.plugin('AMap.MoveAnimation', () => {
        map.value = new AMap.Map('container1', {
          center: [116.397428, 39.90923],
        })
      })
    })
    .catch(e => {
      console.error(e)
    })
}

// 添加marker
const addMarker = data => {
  data.forEach(item => {
    const marker = new AMap.Marker({
      position: item,
      icon: require('@/assets/images/dian.png'), // 自定义图标
      offset: new AMap.Pixel(-13, -26),
    })
    marker.setMap(map.value)
    map.value.setFitView()
  })
}

const waybillData = ref([]) // 运单数据
// 获取运单发货地运力地图数据
const getWaybillData = async () => {
  const res = await tms.queryAllWaybill()
  if (res.code === 101) {
    waybillData.value = res.data
    setTimeout(() => {
      addloadData()
    }, 1500)
  }
}

// 发货地运力地图
const addloadData = () => {
  trajectory.value = []
  waybillData.value.forEach(item => {
    if (item.originLng && item.originLat) {
      trajectory.value.push([item.originLng, item.originLat])
    }
  })
  addMarker(trajectory.value)
}

// 收货地运力地图
const addunloadData = () => {
  trajectory.value = []
  waybillData.value.forEach(item => {
    if (item.destinationLng && item.destinationLat) {
      trajectory.value.push([item.destinationLng, item.destinationLat])
    }
  })
  addMarker(trajectory.value)
}
// 清除markers
const clearMarkers = () => {
  map.value.clearMap()
}

// 切换标签
const changeTabPosition = () => {
  clearMarkers()
  if (tabPosition.value === 'load') {
    addloadData()
  } else if (tabPosition.value === 'unload') {
    addunloadData()
  } else if (tabPosition.value === 'warehouse') {
    addWarehouseData()
  } else {
    trajectory.value = []
  }
}

const warehouselist = ref([]) // 仓库列表
// 获取审核通过的仓库列表 & 仓库分布地图
const getWarehouseData = async () => {
  const res = await tms.queryApprovedWarehouses()
  if (res.code === 101) {
    // console.log(res.data, '仓库列表')
    warehouselist.value = res.data
  }
}

const addWarehouseData = () => {
  trajectory.value = []
  warehouselist.value.forEach(item => {
    if (item.longitude && item.latitude) {
      trajectory.value.push([Number(item.longitude), Number(item.latitude)])
    }
  })
  addMarker(trajectory.value)
}


onMounted(async () => {
  await initMap()
  getWaybillData()
  getWarehouseData()
})
</script>

<style lang="scss" scoped>
.mapMark {
  position: relative;
  // padding: 20px;
  #container1 {
    width: 100%;
    height: 550px;
  }
  .btnBox {
    position: absolute;
    top: 10px;
    left: 20px;
    z-index: 1;
    background: #fff;
    // width: 200px;
    border-radius: 5px;
  }
}
</style>
<style lang="scss">
.amap-icon {
  width: 40px !important;
  height: 40px !important;
}
.amap-icon img {
  width: 40px !important;
  height: 40px !important;
}
</style>
