<template>
  <div>
    <!-- 定义一个输入框用于搜索位置 -->
    <van-search v-model="searchKeyword" placeholder="搜索位置" @search="searchLocation" />

    <!-- 地图容器 -->
    <div id="amap" style="height: 80vh;"></div>

    <!-- 定义搜索结果列表容器 -->
    <div id="panel"></div>
  </div>
  <tabBar></tabBar>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { Search } from 'vant';
import AMapLoader from '@amap/amap-jsapi-loader';
import tabBar from "@/components/tabBar/index.vue";

const center = ref([116.397428, 39.90923]); // 地图中心坐标
const zoom = ref(13); // 地图缩放级别
const apiKey = '69f3058fc3e75700391f94ba06904d67';
const searchKeyword = ref('');

let map;

// 加载高德地图
const loadAMap = async () => {
  try {
    const AMapAPI = await AMapLoader.load({
      key: apiKey,
      version: '2.0',
      plugins: ['AMap.Geolocation', 'AMap.MarkerClusterer'],
    });

    console.log('AMap API:', AMapAPI);

    // 初始化地图
    map = new AMap.Map('amap', {
      center: center.value,
      zoom: zoom.value,
      zooms: [3, 18], // 设置缩放级别范围
      zoomEnable: true, // 开启地图缩放
      resizeEnable: true, // 是否监控地图容器尺寸变化
    });

    // 添加定位插件
    map.plugin('AMap.Geolocation', function () {
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,
        timeout: 10000,
        maximumAge: 0,
        showMarker: true,
        showCircle: true,
        panToLocation: true,
      });
      
      // 获取当前位置
      geolocation.getCurrentPosition(function (status, result) {
        if (status === 'complete') {
          const { lng, lat } = result.position;
          center.value = [lng, lat];
          map.setCenter(center.value);
        } else {
          console.error('Failed to get current position:', result);
        }
      });
      map.addControl(geolocation);
    });



    // 添加标记
    const marker = new AMap.Marker({
      position: center.value,
      title: '这里是标记点',
    });
    marker.setMap(map);
  } catch (error) {
    console.error('Failed to load AMap:', error);
  }
};

// 搜索位置
const searchLocation = () => {
  if (!searchKeyword.value) return;

  AMapLoader.load({
    key: apiKey,
    version: '2.0',
    plugins: ['AMap.PlaceSearch'],
  }).then((AMap) => {
    const placeSearch = new AMap.PlaceSearch({
      pageSize: 5, // 每页显示结果数量
      pageIndex: 1, // 页码
      city: '全国', // 全国范围搜索
      citylimit: true, // 是否强制限制在当前城市
      map: map, // 展现结果的地图实例
      panel: 'panel', // 结果列表的HTML容器id
    });

    // 关键字搜索
    placeSearch.search(searchKeyword.value);
  });
};

// 在组件挂载前加载地图
onMounted(() => {
  loadAMap();
});

// 在组件销毁前卸载地图
onBeforeUnmount(() => {
  map && map.destroy();
});

</script>

<style scoped>
/* 根据实际需求调整样式 */
#amap {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* 定义搜索结果列表样式 */
#panel {
  position: absolute;
  top: 100px;
  left: 10px;
  max-width: 300px;
  background-color: #fff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

</style>
