<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

const loading = ref(true);

const props = defineProps({
  info: {
    type: Object,
    default: () => { }
  }
})

const initMap = () => {
  AMapLoader.load({
    key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.AutoComplete', 'AMap.Geocoder'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map("container-left", {
        // 设置地图容器id
        viewMode: "2D", // 是否为3D地图模式
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        zoom: 15, // 初始化地图级别
        center: [105.441866, 28.87098], // 初始化地图中心点位置
        mapStyle: "amap://styles/darkblue",
      });
      // 监听地图加载完成事件
      map.on('complete', () => {
        // 地图加载完成后执行的操作
        setTimeout(() => {
          loading.value = false;
        }, 500)
      });

      const driving = new AMap.Driving({
        map: map,
        // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
        // eslint-disable-next-line no-undef
        policy: 'panel',
        isOutline: false, //描边
        showTraffic: false, //路况
        // autoFitView: false //自动调整
      })


      let str = props.info.user_address;
      str = str.replace(/\d+队/, '');

      if (props.info.mer_lat && props.info.mer_long) {
        let geocoder = new AMap.Geocoder({
          city: "泸州"
        });
        geocoder.getLocation(str, function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // 地理编码成功
            var geocode = result.geocodes[0];
            let start = [props.info.mer_long, props.info.mer_lat];
            let end = [geocode.location.lng, geocode.location.lat];
            driving.search(start, end, (status, result) => {
              // 未出错时，result即是对应的路线规划方案
              // console.log('status=', status)
              console.log('result=', result)
            })
          } else {
            // 地理编码失败
            const points = [
              { keyword: props.info.mer_address, city: '泸州' },
              { keyword: str, city: '泸州' }
            ];
            driving.search(points, (status, result) => {
              // 未出错时，result即是对应的路线规划方案
              // console.log('status=', status)
              console.log('result=', result)
            })
          }
        });
      } else {
        const points = [
          { keyword: props.info.mer_address, city: '泸州' },
          { keyword: str, city: '泸州' }
        ];
        driving.search(points, (status, result) => {
          // 未出错时，result即是对应的路线规划方案
          // console.log('status=', status)
          console.log('result=', result)
        })
      }

    })
    .catch((e) => {
      console.log(e);
    });
}

onMounted(() => {
  initMap();
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<template>
  <div class="c-box">
    <div id="container-left"></div>
    <div class="loading" v-if="loading">
      <dv-loading>加载中...</dv-loading>
    </div>
  </div>
</template>

<style scoped lang ="scss">
.c-box {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  #container-left {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 130%;
  }
  .loading {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #05273d;
  }
}
</style>
