<!--
  Description: 高德地图
  Author: 李亚光
  Date: 2023-04-21
 -->
<script lang="ts" setup name="GuadMap">
import { ElMessage } from 'element-plus'
// import AMapLoader from '@amap/amap-jsapi-loader'
const $props = defineProps({
  init: {
    type: Array,
    default: () => [],
  },
})
const $emit = defineEmits(['confirm'])
// 设置安全密钥
window._AMapSecurityConfig = {
  // securityJsCode: '56bf9671d4b3517d294caec4751889a1', // 后期需替换
  securityJsCode: localStorage.getItem('securityJsCode')!, // 后期需替换
}
// 地图实例
const map = ref()
const AMap1 = ref()
const remarkRef = ref()
const placeSearchRef = ref()
// 地图点击事件
const clickHandler = function (e) {
  console.log(e, 'eeee')
  const location = [e.lnglat.getLng(), e.lnglat.getLat()]
  $emit('confirm', location)
  // 在该点添加标记点
  map.value.remove(remarkRef.value)
  const AMap = AMap1.value
  const marker = new AMap.Marker({
    position: location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
  })
  remarkRef.value = marker
  map.value.add(marker)
}
// 初始化地图
const initMap = () => {
  if (!window.localStorage.getItem('amapResource')) {
    ElMessage.error('未配置离线地图资源地址或地址配置不正确，请检查配置文件')
  }
  const offline = window.AMap
  AMap1.value = offline
  map.value = new offline.Map('map-location', { // 设置地图容器id
    resizeEnable: true,
    viewMode: '3D', // 是否为3D地图模式
    zoom: 18, // 初始化地图级别
    center: [111.73142, 40.830627], // 初始化地图中心点位置
    zooms: [10, 18],
    layers: [
      new offline.TileLayer({
        visible: true,
        zIndex: 0,
        opacity: 1,
        zooms: [10, 18],
        dataZooms: [10, 18],
        getTileUrl: (a: any, b: any, c: any) => {
          // 经纬度转换成本地瓦片所在路径
          const flag = '00000000'
          const zz = c
          const z = `L${zz}`
          const xx = a.toString(16)
          const x = `C${flag.substring(0, 8 - xx.length)}${xx}`
          const yy = b.toString(16)
          const y = `R${flag.substring(0, 8 - yy.length)}${yy}`
          return `${window.localStorage.getItem('amapResource')}/ordinary/${z}/${y}/${x}.png`
        },
      }),
    ],
    // mapStyle: 'amap://styles/darkblue',
  })
  // AMapLoader.load({
  //   key: '40849e82b4e33f5255b17372520c954d', // 后期需替换
  //   version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  //   plugins: ['AMap.Scale', 'AMap.MouseTool', 'AMap.ToolBar', 'AMap.PlaceSearch', 'AMap.AutoComplete'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  // })
  //   .then((AMap) => {
  //     AMap1.value = AMap
  //     // 初始化地图
  //     map.value = new AMap.Map('map-location', {
  //       viewMode: '3D', //  是否为3D地图模式
  //       zoom: 17, // 初始化地图级别
  //       center: [116.26755900, 39.91547100],
  //       resizeEnable: true,
  //     })
  map.value.clearMap()
  if ($props.init.length) {
    console.log($props.init, '$props.init')
    setTimeout(() => {
      const marker = new AMap1.value.Marker({
        position: $props.init, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      })
      remarkRef.value = marker
      map.value.add(marker)
      map.value.setFitView()
    })
  }
  //     // 创建引入搜索组件
  //     const placeSearch = new AMap.PlaceSearch({
  //       pageSize: 5, // 单页显示结果条数
  //       pageIndex: 1, // 页码
  //       // city: "010", // 兴趣点城市
  //       citylimit: false, // 是否强制限制在设置的城市内搜索
  //       map: map.value, // 展现结果的地图实例
  //       panel: 'result', // 结果列表将在此容器中进行展示。
  //       autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
  //     })
  //     placeSearchRef.value = placeSearch
  //     // 绑定事件
  map.value.on('click', clickHandler)
  //   })
  //   .catch((e) => {
  //     console.log(e)
  //   })
}
onMounted(async () => {
  initMap()
})
onBeforeUnmount(() => {
  // 解绑事件
  map.value.clearMap()
  map.value.off('click', clickHandler)
  map.value.destroy()
  map.value = []
})
const search = ref('')
watch(() => search.value, (newVal) => {
  if (newVal) {
    placeSearchRef.value.search(newVal, (a, b) => {
      console.log(a, b, 'assss')
    })
  }
  else {
    placeSearchRef.value.clear()
    // map.value.add(remarkRef.value)
    map.value.setFitView()
  }
}, {
  deep: true,
  // immediate: true,
})
</script>

<template>
  <div class="box" style="position: relative;">
    <div id="map-location" style="width: 100%; height: 500px;" />
    <!-- <div class="info">
      <div class="input-item">
        <el-input v-model="search" placeholder="请输入关键字" clearable />
      </div>
    </div>
    <div id="result" /> -->
  </div>
</template>

<style lang="scss" scoped>
.box {
  position: relative;
}

#result {
  width: 270px;
  position: absolute;
  top: 34px;
  right: 0;
  height: 100px;
}

#map {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
}

.info {
  // padding: 0.5rem 0.7rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
  position: absolute;
  top: 0;
  background-color: #fff;
  width: auto;
  min-width: 270px;
  border-width: 0;
  right: 0;
  // box-shadow: 0 2px 6px 0 rgb(240 131 0 / 50%);

  .input-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: 2.2rem;
    border: 1px solid #ccc;
    border-radius: 0.2rem;

    .input-item-prepend {
      margin-right: -1px;
      width: 35%;
      font-size: 13px;
      border-right: 1px solid #666;
      height: 100%;
      display: flex;
      align-items: center;
      background: #b2cefe;

      span {
        text-align: center;
      }
    }

    input {
      width: 60%;
      background: #fff;
      padding: 0.2rem 0.6rem;
      margin-left: 0.3rem;
      border: none;
    }
  }
}
</style>

<style>
/* 隐藏高德logo  */
.amap-logo {
  display: none !important;
}

/* 隐藏高德版权  */
.amap-copyright {
  display: none !important;
}

.amap-marker-label {
  border: 0;
  background-color: transparent;
}
</style>