<template>
  <div class="content">
    <Header />
    <Gradientoverlay />
    <div class="main">
      <Leftmoudle />
      <Middlemoudle />
      <Rightmoudle />
    </div>
  </div>

  <!-- 地图容器 -->
  <div id="map-container" class="map-container"></div>


</template>


<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import Header from './header.vue'
import Gradientoverlay from './gradient-overlay.vue'
import Leftmoudle from './leftmodul.vue'
import Rightmoudle from './rightmodul.vue'
import Middlemoudle from './middlemodul.vue'



// 地图实例
const map = ref(null)

// 地图配置
const mapConfig = {
  viewMode: '3D',
  zoom: 13,
  center: [120.21937542, 31.568152],
  pitch: 45,
  features: ['bg', 'road', 'building'],
  buildingAnimation: true,
  showLabel: false
}

// 初始化地图
const initMap = async () => {
  try {
    window._AMapSecurityConfig = {
      securityJsCode: 'b87476c68ed625e2d337f160d0ba6122'
    }

    const AMap = await AMapLoader.load({
      key: '694aba7c51008bf8c08afc94aa566fc1',
      version: '2.0',
      plugins: ['AMap.Scale', 'AMap.ToolBar']
    })

    map.value = new AMap.Map('map-container', {
      ...mapConfig,
      layers: [
        new AMap.TileLayer.Satellite(),
        new AMap.TileLayer.RoadNet()
      ]
    })

    // 添加控件
    map.value.addControl(new AMap.Scale())
    map.value.addControl(new AMap.ToolBar())
  } catch (error) {
    console.error('地图初始化失败:', error)
    alert('高德地图加载失败，请检查控制台错误')
  }
}

// 生命周期
onMounted(() => initMap())
onUnmounted(() => map.value?.destroy())
</script>

<style scoped>
/* 基础样式重置 */
:root {
  --primary-color: #154fb3;
  --panel-bg: rgba(255, 255, 255, 0.95);
  --border-radius: 12px;
  --box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
</style>