<template>
    <AppLayout title="选择地址" :showBack="true">
        <view class="map-container">
            <!-- 搜索框 -->
            <!-- <view class="search-box">
                <view class="search-input-wrapper">
                    <uni-icons type="search" size="20" color="#999"></uni-icons>
                    <input 
                        class="search-input" 
                        v-model="searchKeyword" 
                        placeholder="输入关键词搜索地址（支持模糊搜索）"
                        @input="onSearchInput"
                        @confirm="searchLocation"
                    />
                    <uni-icons 
                        v-if="searchKeyword" 
                        type="clear" 
                        size="18" 
                        color="#999" 
                        @click="clearSearch"
                    ></uni-icons>
                </view>
            </view> -->
            
            <!-- 搜索结果列表 -->
            <!-- <view class="search-results" v-if="showSearchResults">
                <scroll-view scroll-y class="results-scroll" v-if="searchResults.length > 0">
                    <view 
                        class="result-item" 
                        v-for="(item, index) in searchResults" 
                        :key="index"
                        @click="selectSearchResult(item)"
                    >
                        <view class="result-name">{{ item.name }}</view>
                        <view class="result-address">{{ item.address }}</view>
                    </view>
                </scroll-view>
                <view class="empty-results" v-else-if="isSearching">
                    <view class="loading-icon">
                        <uni-icons type="loop" size="40" color="#999"></uni-icons>
                    </view>
                    <text>搜索中...</text>
                </view>
                <view class="empty-results" v-else>
                    <uni-icons type="info" size="40" color="#999"></uni-icons>
                    <text>未找到相关地址，请尝试其他关键词</text>
                    <view class="search-tips">
                        <text class="tip-title">搜索建议：</text>
                        <text class="tip-item">• 输入具体地址名称</text>
                        <text class="tip-item">• 输入地标建筑名称</text>
                        <text class="tip-item">• 输入街道或区域名称</text>
                    </view>
                </view>
            </view> -->
            
            <!-- 地图 -->
            <view class="map-wrapper" v-show="!showSearchResults">
                <!-- #ifdef H5 -->
                <view id="amap-container" class="amap-container"></view>
                <!-- #endif -->
                
                <!-- #ifndef H5 -->
                <map
                    id="map"
                    class="map"
                    :latitude="latitude"
                    :longitude="longitude"
                    :markers="markers"
                    :show-location="true"
                    @regionchange="onRegionChange"
                    @tap="onMapTap"
                >
                    <!-- <cover-view class="map-center-marker">
                        <cover-image src="/static/icon/Location.png" class="marker-icon"></cover-image>
                    </cover-view> -->
                </map>
                <!-- #endif -->
            </view>
            
            <!-- 当前位置信息 -->
            <view class="location-info" v-if="currentAddress && !showSearchResults">
                <view class="info-title">当前选择位置</view>
                <view class="info-name">{{ currentAddress.name }}</view>
                <view class="info-address">{{ currentAddress.address }}</view>
            </view>
            
            <!-- 底部按钮 -->
            <view class="bottom-actions">
                <!-- <button class="locate-btn" @click="getCurrentLocation" :disabled="isLocating">
                    <uni-icons type="location-filled" size="20" color="#256BFA"></uni-icons>
                    <text>{{ isLocating ? '定位中...' : '定位' }}</text>
                </button> -->
                <button class="confirm-btn" @click="confirmLocation">确认选择</button>
            </view>
        </view>
    </AppLayout>
</template>

<script setup>
import { ref, inject, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const { $api } = inject('globalFunction')

// 搜索相关
const searchKeyword = ref('')
const searchResults = ref([])
const showSearchResults = ref(false)
const isSearching = ref(false)
const isLocating = ref(false)
let searchTimer = null

// 地图相关
const latitude = ref(39.473651)
const longitude = ref(76.000311)
const markers = ref([])
const currentAddress = ref(null)

// H5地图实例
let map = null
let AMap = null
let geocoder = null
let placeSearch = null

onLoad((options) => {
    // 可以接收初始位置参数
    if (options.location) {
		let obj=options.location.split(',')
        latitude.value = parseFloat(obj[1])
        longitude.value = parseFloat(obj[0])
    }
})

onMounted(() => {
    // #ifdef H5
    initAmapH5()
    // #endif
    
    // #ifndef H5
    // 先设置默认位置，避免地图显示空白
    markers.value = [{
        id: 1,
        latitude: latitude.value,
        longitude: longitude.value,
        // iconPath: '/static/icon/Location.png',
        width: 25,
        height: 30
    }]
    
    // 延迟执行定位，避免页面加载时立即定位失败
    // setTimeout(() => {
    //     getCurrentLocation()
    // }, 1000)
    // #endif
})

// H5端初始化高德地图
const initAmapH5 = () => {
    // #ifdef H5
    if (window.AMap) {
        AMap = window.AMap
        initMap()
    } else {
        const script = document.createElement('script')
        script.src = 'https://webapi.amap.com/maps?v=2.0&key=9cfc9370bd8a941951da1cea0308e9e3&plugin=AMap.Geocoder,AMap.PlaceSearch'
        script.onload = () => {
            AMap = window.AMap
            initMap()
        }
        document.head.appendChild(script)
    }
    // #endif
}

// 初始化地图
const initMap = () => {
    // #ifdef H5
    map = new AMap.Map('amap-container', {
        zoom: 13,
        center: [longitude.value, latitude.value],
        resizeEnable: true
    })
    
    // 创建标记
    const marker = new AMap.Marker({
        position: [longitude.value, latitude.value],
        draggable: true
    })
    
    marker.on('dragend', (e) => {
        const position = e.target.getPosition()
        longitude.value = position.lng
        latitude.value = position.lat
        reverseGeocode(position.lng, position.lat)
    })
    
    map.add(marker)
    
    // 初始化地理编码
    geocoder = new AMap.Geocoder({
        city: '全国'
    })
    
    // 初始化地点搜索
    placeSearch = new AMap.PlaceSearch({
        city: '全国',
        pageSize: 10
    })
    
    // 地图点击事件
    map.on('click', (e) => {
		debugger
        const { lng, lat } = e.lnglat
        longitude.value = lng
        latitude.value = lat
        marker.setPosition([lngyy, lat])
        // reverseGeocode(lng, lat)
    })
    
    // 获取当前位置信息
    reverseGeocode(longitude.value, latitude.value)
    // #endif
}

// 搜索输入
const onSearchInput = () => {
    if (searchTimer) {
        clearTimeout(searchTimer)
    }
    
    if (!searchKeyword.value.trim()) {
        showSearchResults.value = false
        searchResults.value = []
        isSearching.value = false
        return
    }
    
    showSearchResults.value = true
    isSearching.value = true
    
    searchTimer = setTimeout(() => {
        if (searchKeyword.value.trim()) {
            searchLocation()
        }
    }, 300) // 优化防抖时间从500ms改为300ms
}

// 搜索地点
const searchLocation = () => {
    if (!searchKeyword.value.trim()) {
        return
    }
    
    showSearchResults.value = true
    isSearching.value = true
    
    // #ifdef H5
    if (placeSearch) {
        placeSearch.search(searchKeyword.value, (status, result) => {
            isSearching.value = false
            if (status === 'complete' && result.poiList) {
                searchResults.value = result.poiList.pois.map(poi => ({
                    name: poi.name,
                    address: poi.address || poi.pname + poi.cityname + poi.adname,
                    location: poi.location,
                    lng: poi.location.lng,
                    lat: poi.location.lat
                }))
            } else {
                searchResults.value = []
            }
        })
    }
    // #endif
    
    // #ifndef H5
    // 小程序端使用uni.request调用高德API
    uni.request({
        url: 'https://restapi.amap.com/v3/place/text',
        data: {
            key: '9cfc9370bd8a941951da1cea0308e9e3',
            keywords: searchKeyword.value,
            city: '全国',
            offset: 20,
            citylimit: false, // 不限制城市，支持全国搜索
            extensions: 'all' // 返回详细信息
        },
        success: (res) => {
            isSearching.value = false
            console.log('搜索响应:', res.data) // 调试日志
            
            if (res.data.status === '1' && res.data.pois && res.data.pois.length > 0) {
                searchResults.value = res.data.pois.map(poi => {
                    const [lng, lat] = poi.location.split(',')
                    return {
                        name: poi.name,
                        address: poi.address || `${poi.pname || ''}${poi.cityname || ''}${poi.adname || ''}`,
                        lng: parseFloat(lng),
                        lat: parseFloat(lat)
                    }
                })
                console.log('搜索结果:', searchResults.value) // 调试日志
            } else {
                // 如果第一次搜索没有结果，尝试更宽泛的搜索
                if (searchKeyword.value.length > 2) {
                    tryAlternativeSearch()
                } else {
                    searchResults.value = []
                    console.log('搜索无结果:', res.data) // 调试日志
                }
            }
        },
        fail: (err) => {
            isSearching.value = false
            searchResults.value = []
            console.error('搜索请求失败:', err) // 调试日志
            $api.msg('搜索失败，请检查网络连接')
        }
    })
    // #endif
}

// 备用搜索策略
const tryAlternativeSearch = () => {
    // 尝试使用地理编码API搜索
    uni.request({
        url: 'https://restapi.amap.com/v3/geocode/geo',
        data: {
            key: '9cfc9370bd8a941951da1cea0308e9e3',
            address: searchKeyword.value,
            city: '全国'
        },
        success: (res) => {
            isSearching.value = false
            console.log('备用搜索响应:', res.data) // 调试日志
            
            if (res.data.status === '1' && res.data.geocodes && res.data.geocodes.length > 0) {
                searchResults.value = res.data.geocodes.map(geo => {
                    const [lng, lat] = geo.location.split(',')
                    return {
                        name: geo.formatted_address,
                        address: geo.formatted_address,
                        lng: parseFloat(lng),
                        lat: parseFloat(lat)
                    }
                })
                console.log('备用搜索结果:', searchResults.value) // 调试日志
            } else {
                searchResults.value = []
                console.log('备用搜索也无结果:', res.data) // 调试日志
            }
        },
        fail: (err) => {
            isSearching.value = false
            searchResults.value = []
            console.error('备用搜索失败:', err) // 调试日志
        }
    })
}

// 选择搜索结果
const selectSearchResult = (item) => {
    longitude.value = item.lng
    latitude.value = item.lat
    currentAddress.value = {
        name: item.name,
        address: item.address,
        longitude: item.lng,
        latitude: item.lat
    }
    
    // #ifdef H5
    if (map) {
        map.setCenter([item.lng, item.lat])
        const marker = map.getAllOverlays('marker')[0]
        if (marker) {
            marker.setPosition([item.lng, item.lat])
        }
    }
    // #endif
    
    // #ifndef H5
    markers.value = [{
        id: 1,
        latitude: item.lat,
        longitude: item.lng,
        // iconPath: '/static/icon/Location.png',
        width: 25,
        height: 30
    }]
    // #endif
    
    showSearchResults.value = false
    searchKeyword.value = ''
}

// 清除搜索
const clearSearch = () => {
    searchKeyword.value = ''
    searchResults.value = []
    showSearchResults.value = false
    isSearching.value = false
    if (searchTimer) {
        clearTimeout(searchTimer)
    }
}

// 逆地理编码（根据坐标获取地址）
const reverseGeocode = (lng, lat) => {
    // #ifdef H5
    if (geocoder) {
        geocoder.getAddress([lng, lat], (status, result) => {
            if (status === 'complete' && result.regeocode) {
                const addressComponent = result.regeocode.addressComponent
                const formattedAddress = result.regeocode.formattedAddress
                currentAddress.value = {
                    name: addressComponent.building || addressComponent.township,
                    address: formattedAddress,
                    longitude: lng,
                    latitude: lat
                }
            }
        })
    }
    // #endif
    
    // #ifndef H5
    uni.request({
        url: 'https://restapi.amap.com/v3/geocode/regeo',
        data: {
            key: '9cfc9370bd8a941951da1cea0308e9e3',
            location: `${lng},${lat}`
        },
        success: (res) => {
            if (res.data.status === '1' && res.data.regeocode) {
                const addressComponent = res.data.regeocode.addressComponent
                const formattedAddress = res.data.regeocode.formatted_address
                currentAddress.value = {
                    name: addressComponent.building || addressComponent.township || '选择的位置',
                    address: formattedAddress,
                    longitude: lng,
                    latitude: lat
                }
            }
        }
    })
    // #endif
}

// 获取当前定位
const getCurrentLocation = () => {
    if (isLocating.value) return // 防止重复定位
    
    isLocating.value = true
    uni.showLoading({ title: '定位中...' })
    
    // 先检查定位权限
    uni.getSetting({
        success: (settingRes) => {
            if (settingRes.authSetting['scope.userLocation'] === false) {
                // 用户拒绝了定位权限，引导用户开启
                isLocating.value = false
                uni.hideLoading()
                uni.showModal({
                    title: '定位权限',
                    content: '需要获取您的位置信息来提供更好的服务，请在设置中开启定位权限',
                    confirmText: '去设置',
                    success: (modalRes) => {
                        if (modalRes.confirm) {
                            uni.openSetting()
                        }
                    }
                })
                return
            }
            
            // 执行定位
            uni.getLocation({
                type: 'gcj02',
                altitude: false,
                success: (res) => {
                    console.log('定位成功:', res) // 调试日志
                    longitude.value = res.longitude
                    latitude.value = res.latitude
                    
                    // #ifdef H5
                    if (map) {
                        map.setCenter([res.longitude, res.latitude])
                        const marker = map.getAllOverlays('marker')[0]
                        if (marker) {
                            marker.setPosition([res.longitude, res.latitude])
                        }
                    }
                    // #endif
                    
                    // #ifndef H5
                    // 更新小程序端标记
                    markers.value = [{
                        id: 1,
                        latitude: res.latitude,
                        longitude: res.longitude,
                        // iconPath: '/static/icon/Location.png',
                        width: 25,
                        height: 30
                    }]
                    // #endif
                    
                    reverseGeocode(res.longitude, res.latitude)
                    uni.hideLoading()
                    isLocating.value = false
                },
                fail: (err) => {
                    console.error('定位失败:', err) // 调试日志
                    uni.hideLoading()
                    isLocating.value = false
                    
                    // 根据错误类型给出不同提示
                    // let errorMsg = '定位失败'
                    // if (err.errMsg.includes('auth deny')) {
                    //     errorMsg = '定位权限被拒绝，请在设置中开启'
                    // } else if (err.errMsg.includes('timeout')) {
                    //     errorMsg = '定位超时，请重试'
                    // } else if (err.errMsg.includes('network')) {
                    //     errorMsg = '网络异常，请检查网络连接'
                    // }
                    
                    // uni.showModal({
                    //     title: '定位失败',
                    //     content: errorMsg + '，是否使用默认位置？',
                    //     confirmText: '使用默认位置',
                    //     cancelText: '重试',
                    //     success: (modalRes) => {
                    //         if (modalRes.confirm) {
                    //             // 使用默认位置（北京）
                    //             longitude.value = 116.397428
                    //             latitude.value = 39.90923
                    //             reverseGeocode(longitude.value, latitude.value)
                    //         } else {
                    //             // 重试定位
                    //             setTimeout(() => {
                    //                 getCurrentLocation()
                    //             }, 2000)
                    //         }
                    //     }
                    // })
                }
            })
        },
        fail: () => {
            uni.hideLoading()
            isLocating.value = false
            $api.msg('无法获取定位权限设置')
        }
    })
}

// 地图区域变化（小程序端）
const onRegionChange = (e) => {
    // #ifndef H5
    // 只有在用户手动拖动地图结束时才更新位置
    if (e.type === 'end' && e.causedBy === 'drag') {
        const mapContext = uni.createMapContext('map')
        mapContext.getCenterLocation({
            success: (res) => {
				// debugger
                longitude.value = res.longitude
                latitude.value = res.latitude
				markers.value = [{
				    id: 1,
				    latitude: latitude.value,
				    longitude: longitude.value,
				    width: 25,
				    height: 30
				}]
                // reverseGeocode(res.longitude, res.latitude)
            }
        })
    }
    // #endif
}

// 地图点击事件（小程序端）
const onMapTap = (e) => {
    // #ifndef H5
    const { latitude: lat, longitude: lng } = e.detail
    longitude.value = lng
    latitude.value = lat
    
    // 更新标记
    markers.value = [{
        id: 1,
        latitude: lat,
        longitude: lng,
        // iconPath: '/static/icon/Location.png',
        width: 25,
        height: 30
    }]
    
    reverseGeocode(lng, lat)
    // #endif
}

// 确认选择
const confirmLocation = () => {
    if (!longitude.value && !latitude.value) {
        $api.msg('请选择地址')
        return
    }
	if (typeof uni.globalParams === 'object') {
		uni.globalParams = {
            longitude: longitude.value,
            latitude: latitude.value
        }; // 示例使用全局变量，实际应用中可以根据需要选择使用Vuex等
	} else {
		uni.globalParams = {}; // 初始化全局变量
		uni.globalParams = {
            longitude: longitude.value,
            latitude: latitude.value
        }; // 设置参数
	}
	uni.navigateBack({
		delta: 1 // 返回上一页
	});
    
}

</script>

<style lang="stylus" scoped>
.map-container
    width: 100%
    height: 100vh
    position: relative
    display: flex
    flex-direction: column

.search-box
    position: absolute
    top: 20rpx
    left: 32rpx
    right: 32rpx
    z-index: 10
    
    .search-input-wrapper
        background: #fff
        border-radius: 40rpx
        padding: 20rpx 30rpx
        display: flex
        align-items: center
        box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1)
        
        .search-input
            flex: 1
            margin: 0 20rpx
            font-size: 28rpx
            
        uni-icons
            flex-shrink: 0

.search-results
    position: absolute
    top: 100rpx
    left: 32rpx
    right: 32rpx
    bottom: 180rpx
    background: #fff
    border-radius: 20rpx
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1)
    z-index: 9
    overflow: hidden
    
    .results-scroll
        height: 100%
        
    .result-item
        padding: 30rpx
        border-bottom: 1rpx solid #f0f0f0
        
        &:active
            background: #f5f5f5
            
        .result-name
            font-size: 32rpx
            color: #333
            font-weight: 500
            margin-bottom: 10rpx
            
        .result-address
            font-size: 26rpx
            color: #999
    
    .empty-results
        height: 100%
        display: flex
        flex-direction: column
        align-items: center
        justify-content: center
        color: #999
        font-size: 28rpx
        
        .loading-icon
            animation: rotate 1s linear infinite
            margin-bottom: 20rpx
            
        uni-icons
            margin-bottom: 20rpx
            
        text
            padding: 0 60rpx
            text-align: center
            line-height: 1.5
            
        .search-tips
            margin-top: 40rpx
            padding: 0 40rpx
            
            .tip-title
                font-size: 26rpx
                color: #666
                font-weight: 500
                margin-bottom: 20rpx
                display: block
                
            .tip-item
                font-size: 24rpx
                color: #999
                line-height: 1.8
                display: block
                margin-bottom: 8rpx

@keyframes rotate
    from
        transform: rotate(0deg)
    to
        transform: rotate(360deg)

.map-wrapper
    flex: 1
    position: relative
    
    .map, .amap-container
        width: 100%
        height: 80%
        
    .map-center-marker
        position: absolute
        left: 50%
        top: 50%
        transform: translate(-50%, -100%)
        z-index: 5
        
        .marker-icon
            width: 60rpx
            height: 80rpx

.location-info
    position: absolute
    bottom: 180rpx
    left: 32rpx
    right: 32rpx
    background: #fff
    border-radius: 20rpx
    padding: 30rpx
    box-shadow: 0 -4rpx 12rpx rgba(0,0,0,0.1)
    z-index: 10
    
    .info-title
        font-size: 24rpx
        color: #999
        margin-bottom: 10rpx
        
    .info-name
        font-size: 32rpx
        color: #333
        font-weight: 500
        margin-bottom: 10rpx
        
    .info-address
        font-size: 28rpx
        color: #666

.bottom-actions
    position: absolute
    bottom: 120rpx
    left: 0
    right: 0
    background: #fff
    padding: 20rpx 32rpx
    display: flex
    gap: 20rpx
    box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1)
    z-index: 11
    
    .locate-btn
        width: 120rpx
        height: 80rpx
        background: #fff
        border: 2rpx solid #256BFA
        border-radius: 40rpx
        display: flex
        flex-direction: column
        align-items: center
        justify-content: center
        font-size: 24rpx
        color: #256BFA
        
        &:disabled
            opacity: 0.5
            color: #999
            border-color: #999
        
        text
            margin-top: 4rpx
            
    .confirm-btn
        flex: 1
        height: 80rpx
        background: #256BFA
        color: #fff
        border-radius: 40rpx
        font-size: 32rpx
        border: none

button::after
    border: none
</style>

