<template>
  <div class="tianditu-picker">
    <!-- 顶部搜索框 -->
    <div class="search-header">
      <n-input-group>
        <n-auto-complete
          v-model:value="keyword"
          placeholder="搜索地点"
          clearable
          @select="selectFromSearch"
          @input:value="handleInput"
        />
        <n-button type="primary" @click="search">搜索位置</n-button>
      </n-input-group>
    </div>

    <!-- 地图区域 -->
    <div id="mapDiv" class="map-container"></div>

    <!-- 底部位置信息和搜索结果 -->
    <div class="location-footer">
      <!-- 统一的结果列表 -->
      <div class="results-section">
        <div class="results-header">位置选择</div>
        <div class="results-list">
          <!-- 我的位置项 -->
          <div
            class="result-item current-location-item"
            :class="{ selected: !showSearchResults }"
            @click="relocateToCurrentPosition"
          >
            <div class="location-icon">📍</div>
            <div class="result-content">
              <div class="result-name">我的位置</div>
              <div class="result-address">
                {{ currentLocation?.address || '请点击获取当前位置' }}
              </div>
            </div>
          </div>

          <!-- 搜索结果项 -->
          <div
            v-for="(result, index) in searchResults"
            :key="`search-${index}`"
            class="result-item search-result-item"
            @click="selectSearchResult(result)"
          >
            <div class="location-icon">📍</div>
            <div class="result-content">
              <div class="result-name">{{ result.name }}</div>
              <div class="result-address">{{ result.address }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <n-space justify="space-between">
          <n-button type="tertiary" @click="getCurrentLocation">定位当前位置</n-button>
          <n-space>
            <n-button @click="$emit('cancel')">取消</n-button>
            <n-button type="primary" @click="confirmLocation">确认位置</n-button>
          </n-space>
        </n-space>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import axios from 'axios'

const emit = defineEmits(['confirm', 'cancel'])

const keyword = ref('')
const selectedLocation = ref(null)
const currentLocation = ref(null)
const searchResults = ref([])
const showSearchResults = ref(false)
let map = null
let marker = null

const TDT_KEY = '42db4f3dfd1a18d31e73ee90aa2ce054'

// 初始化地图
const initMap = () => {
  if (typeof T === 'undefined') {
    console.error('天地图API未加载完成')
    return
  }

  map = new window.T.Map('mapDiv')
  map.centerAndZoom(new window.T.LngLat(116.40969, 39.89945), 12)

  // 地图点击事件
  map.addEventListener('click', function (e) {
    const lnglat = e.lnglat
    addMarker(lnglat)
    getAddress(lnglat)
    // 点击地图时隐藏搜索结果
    showSearchResults.value = false
  })

  // 获取当前位置
  getCurrentLocation()
}

// 添加标记
const addMarker = (lnglat) => {
  if (marker) {
    map.removeOverLay(marker)
  }

  // 创建自定义图标
  const icon = new window.T.Icon({
    iconUrl:
      'data:image/svg+xml;base64,' +
      btoa(`
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="40" viewBox="0 0 32 40">
        <path fill="#ff4757" d="M16 0C7.2 0 0 7.2 0 16c0 8.8 16 24 16 24s16-15.2 16-24C32 7.2 24.8 0 16 0zm0 22c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"/>
        <circle fill="white" cx="16" cy="16" r="4"/>
      </svg>
    `),
    iconSize: new window.T.Point(32, 40),
    iconAnchor: new window.T.Point(16, 40),
  })

  marker = new window.T.Marker(lnglat, { icon })
  map.addOverLay(marker)
  map.panTo(lnglat)

  selectedLocation.value = {
    lat: lnglat.lat,
    lng: lnglat.lng,
    address: '正在获取地址...',
  }
}

// 地理编码
const getAddress = (lnglat) => {
  const geocoder = new window.T.Geocoder()
  geocoder.getLocation(lnglat, function (result) {
    const address = result.getAddress()
    if (selectedLocation.value) {
      selectedLocation.value.address = address
    }
  })
}

// 获取当前位置
const getCurrentLocation = () => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const lat = position.coords.latitude
        const lng = position.coords.longitude
        const lnglat = new window.T.LngLat(lng, lat)

        map.centerAndZoom(lnglat, 15)
        addMarker(lnglat)

        // 获取地址信息，专门为当前位置设置
        const geocoder = new window.T.Geocoder()
        geocoder.getLocation(lnglat, function (result) {
          const address = result.getAddress()
          // 同时更新当前位置和选中位置
          currentLocation.value = {
            lat: lat,
            lng: lng,
            address: address,
          }
          if (selectedLocation.value) {
            selectedLocation.value.address = address
          }
        })
      },
      (error) => {
        console.error('获取位置失败:', error)
        $message.warning('无法获取当前位置，请手动选择')
      }
    )
  } else {
    $message.warning('浏览器不支持定位功能')
  }
}

// 使用axios调用天地图HTTP API搜索
const searchWithAPI = async (query) => {
  try {
    console.log('搜索关键词:', query)

    // 构建搜索参数
    const postStr = {
      keyWord: query,
      level: 12,
      mapBound: '116.02524,39.83833,116.65592,39.99185',
      queryType: 1,
      start: 0,
      count: 10,
    }

    const response = await axios.get('https://api.tianditu.gov.cn/v2/search', {
      params: {
        postStr: JSON.stringify(postStr),
        type: 'query',
        tk: TDT_KEY,
      },
      timeout: 10000, // 10秒超时
    })

    console.log('搜索响应:', response.data)

    if (
      response.data.status.infocode === 1000 &&
      response.data.pois &&
      response.data.pois.length > 0
    ) {
      return response.data.pois.map((poi) => ({
        name: poi.name,
        address: poi.address,
        lonlat: poi.lonlat,
        adminName: poi.adminName,
      }))
    }
    return []
  } catch (error) {
    console.error('搜索失败:', error)

    // 更详细的错误处理
    if (error.code === 'ECONNABORTED') {
      $message.error('请求超时，请重试')
    } else if (error.response) {
      $message.error(`搜索失败: ${error.response.status}`)
    } else if (error.request) {
      $message.error('网络请求失败，请检查网络连接')
    } else {
      $message.error('搜索出错，请重试')
    }

    return []
  }
}

// 搜索功能
const search = async () => {
  if (!keyword.value || !map) return

  try {
    const results = await searchWithAPI(keyword.value)

    if (results.length > 0) {
      searchResults.value = results
      showSearchResults.value = true
      console.log('搜索结果:', results)
    } else {
      $message.warning('未找到相关位置')
      searchResults.value = []
      showSearchResults.value = false
    }
  } catch (error) {
    console.error('搜索出错:', error)
    $message.error('搜索失败，请重试')
  }
}

// 选择搜索结果
const selectSearchResult = (result) => {
  if (!result.lonlat) return

  const [lng, lat] = result.lonlat.split(',').map(Number)
  const lnglat = new window.T.LngLat(lng, lat)

  addMarker(lnglat)
  // 只更新选中位置，不影响当前位置
  if (selectedLocation.value) {
    selectedLocation.value.address = `${result.name} - ${result.address}`
  }
  showSearchResults.value = false
}

// 处理搜索输入
const handleInput = (value) => {
  if (value && value.length > 1) {
    // 延迟搜索，避免频繁请求
    clearTimeout(handleInput.timer)
    handleInput.timer = setTimeout(() => {
      search()
    }, 500)
  } else {
    searchResults.value = []
    showSearchResults.value = false
  }
}

// 从搜索建议中选择
const selectFromSearch = (value, option) => {
  if (option && option.data) {
    selectSearchResult(option.data)
  }
}

// 确认选择的位置
const confirmLocation = () => {
  if (selectedLocation.value) {
    emit('confirm', {
      latlng: {
        lat: selectedLocation.value.lat,
        lng: selectedLocation.value.lng,
      },
      address: selectedLocation.value.address || '',
    })
  } else {
    $message.warning('请先选择位置')
  }
}

// 重新定位到当前位置
const relocateToCurrentPosition = () => {
  if (currentLocation.value) {
    // 如果已有当前位置信息，直接使用
    const lnglat = new window.T.LngLat(currentLocation.value.lng, currentLocation.value.lat)
    addMarker(lnglat)
    if (selectedLocation.value) {
      selectedLocation.value.address = currentLocation.value.address
    }
  } else {
    // 重新获取当前位置
    getCurrentLocation()
  }
  showSearchResults.value = false
}

// 加载天地图API
const loadTiandituScript = () => {
  return new Promise((resolve, reject) => {
    if (typeof T !== 'undefined') {
      resolve()
      return
    }

    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `https://api.tianditu.gov.cn/api?v=4.0&tk=${TDT_KEY}`
    script.onload = resolve
    script.onerror = reject
    document.head.appendChild(script)
  })
}

onMounted(async () => {
  try {
    await loadTiandituScript()
    await nextTick()
    initMap()
  } catch (error) {
    console.error('加载天地图API失败:', error)
    $message.error('地图加载失败，请检查网络连接')
  }
})

onUnmounted(() => {
  if (map) {
    map = null
    marker = null
  }
  if (handleInput.timer) {
    clearTimeout(handleInput.timer)
  }
})
</script>

<style scoped lang="scss">
.tianditu-picker {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f5f5;

  .search-header {
    padding: 12px 0;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    z-index: 1000;
  }

  .map-container {
    flex: 1;
    width: 100%;
    min-height: 400px;
  }

  .location-footer {
    background-color: #fff;
    border-top: 1px solid #eee;
    max-height: 300px;
    overflow-y: auto;

    .results-section {
      .results-header {
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 600;
        color: #333;
        background-color: #f5f5f5;
        border-bottom: 1px solid #eee;
      }

      .results-list {
        max-height: 180px;
        overflow-y: auto;

        .result-item {
          display: flex;
          align-items: center;
          padding: 12px 16px;
          border-bottom: 1px solid #f0f0f0;
          cursor: pointer;
          transition: background-color 0.2s;

          &:hover {
            background-color: #f5f5f5;
          }

          &:last-child {
            border-bottom: none;
          }

          .location-icon {
            font-size: 18px;
            margin-right: 12px;
            flex-shrink: 0;
          }

          .result-content {
            flex: 1;

            .result-name {
              font-size: 14px;
              font-weight: 500;
              color: #333;
              margin-bottom: 4px;
            }

            .result-address {
              font-size: 12px;
              color: #666;
              line-height: 1.4;
            }
          }
        }

        .current-location-item {
          background-color: #f8f9fa;
        }

        .search-result-item {
          background-color: #fff;
        }
      }
    }

    .action-buttons {
      padding: 12px 16px;
      border-top: 1px solid #f0f0f0;
      background-color: #fff;
    }
  }
}

// 深色模式适配
.dark {
  .tianditu-picker {
    background-color: #1f1f1f;

    .search-header {
      background-color: #2a2a2a;
      border-bottom-color: #3a3a3a;
    }

    .location-footer {
      background-color: #2a2a2a;
      border-top-color: #3a3a3a;

      .results-section {
        .results-header {
          background-color: #333;
          color: #fff;
          border-bottom-color: #3a3a3a;
        }

        .results-list {
          .result-item {
            border-bottom-color: #3a3a3a;

            &:hover {
              background-color: #333;
            }

            .result-name {
              color: #fff;
            }

            .result-address {
              color: #ccc;
            }
          }

          .current-location-item {
            background-color: #333;
          }

          .search-result-item {
            background-color: #333;
          }
        }
      }

      .action-buttons {
        background-color: #2a2a2a;
        border-top-color: #3a3a3a;
      }
    }
  }
}
</style>
