<template>
    <u-popup :show="show" @close="show = false" mode="bottom" :round="10">
        <view @touchmove.prevent.stop class="popup-common">
			<view class="title">请选择自提点</view>
			<scroll-view scroll-y="true" class="h-[50vh]">
				<view class="p-[var(--popup-sidebar-m)] pt-0 text-sm">
					<view class="mt-[var(--top-m)] border-1 border-[#eee] border-solid rounded-[var(--rounded-mid)] px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)] mb-[var(--top-m)]" :class="{'!border-primary bg-[var(--primary-color-light2)]': store && store.store_id == item.store_id}" v-for="item in storeList" @click="selectStore(item)">
						<view class="flex">
							<view class="flex-1 w-0">
								<text class="text-[30rpx] text-[#333]">{{ item.store_name }}</text>
								<text class="text-[26rpx] ml-[12rpx] text-[var(--text-color-light6)]">{{ item.store_mobile }}</text>
							</view>
							<view v-if="item.distance">
								<text class="text-red text-[26rpx] font-normal">{{ distanceFormat(item.distance) }}</text>
							</view>
						</view>
						<view class="mt-[20rpx] text-[26rpx] leading-[1.4] flex">
							<text class="flex-shrink-0">门店地址：</text>
							<text>{{ item.full_address }}</text>
						</view>
						<view class="mt-[16rpx] text-[26rpx]">营业时间：{{ item.trade_time }}</view>
					</view>
				</view>
				<view class="h-[50vh] flex items-center flex-col justify-center" v-if="loading">
					<u-loading-icon :vertical="true"></u-loading-icon>
				</view>
				<view class="h-[95%] flex items-center flex-col justify-center" v-if="!loading && !storeList.length">
					<u-empty text="没有可选择的自提点" width="214" :icon="img('static/resource/images/empty.png')"/>
				</view>
			</scroll-view>
			<view class="btn-wrap">
                <button class="primary-btn-bg btn" @click="confirm">确认</button>
			</view>
		</view>
    </u-popup>
</template>

<script setup lang="ts">
    import { ref,reactive } from 'vue'
    import { getStoreList } from '@/addon/shop/api/order'
    import { img } from '@/utils/common'

    const show = ref(false)
    const loaded = ref(false)
    const loading = ref(true)
    const storeList = ref<object[]>([])
    const store = ref<null | object>(null)

    const latlng = reactive({
        lat:0,
        lng:0
    })
	
	const getStoreListFn = (callback:any)=>{
		if (!loaded.value) {
		    loaded.value = true
			
			if(uni.getStorageSync('location_address')){
				let location_address = uni.getStorageSync('location_address');
				latlng.lat = location_address.latitude;
				latlng.lng = location_address.longitude;
			}else{
				uni.getLocation({
				    type: 'gcj02',
				    success: (res) => {
					    latlng.lat = res.latitude
					    latlng.lng = res.longitude
				    },
				    fail: (res) => {
					    if (res.errno) {
						    if (res.errno == 104) {
							    let msg = '用户未授权隐私权限，获取位置失败';
							    uni.showToast({ title: msg, icon: 'none' })
						    } else if (res.errno == 112) {
							    let msg = '隐私协议中未声明，获取位置失败';
							    uni.showToast({ title: msg, icon: 'none' })
						    }
					    }
					    if (res.errMsg) {
						    if (res.errMsg.indexOf('getLocation:fail') != -1 || res.errMsg.indexOf('deny') != -1 || res.errMsg.indexOf('denied') != -1) {
							    let msg = '用户未授权获取位置权限，将无法提供距离最近的门店';
							    uni.showToast({ title: msg, icon: 'none' })
						    } else {
							    uni.showToast({ title: res.errMsg, icon: 'none' })
						    }
					    }
				    }
				});
			}
		
		    setTimeout(() => {
			    getStoreList({ latlng }).then(({ data }) => {
				    storeList.value = data
					if(typeof callback == 'function'){
						callback(data);
					}
				    loading.value = false
			    }).catch(() => {
				    loading.value = false
			    })
		    }, 1500)
		}
	}

    const open = ()=> {
	    show.value = true
    }

    const selectStore = (data: object)=> {
        if (store.value) {
            store.value = store.value.store_id != data.store_id ? data : null
        } else {
            store.value = data
        }
    }

    const emits = defineEmits(['confirm'])

    const confirm = ()=> {
        emits('confirm', store.value)
        show.value = false
    }

    const distanceFormat = (distance: any) => {
        distance = parseFloat(distance)
        if (distance < 1000) {
            return `${distance}m`;
        } else {
            const km = (distance / 1000).toFixed(2)
            return `${km}km`;
        }
    }

    defineExpose({
    	open,
		getData: getStoreListFn
    })
</script>

<style lang="scss" scoped></style>
