<template>
    <view class="bg-[var(--page-bg-color)] min-h-[100vh] overflow-hidden address-edit" :style="themeColor()">
		<u-form labelPosition="left" :model="formData" errorType='toast' :rules="rules" ref="formRef">
			<view class="sidebar-margin card-template mt-[var(--top-m)] py-[20rpx]">
				<view class="">
					<u-form-item :label="t('name')" prop="name" labelWidth="200rpx">
						<u-input  fontSize="28rpx" v-model.trim="formData.name" border="none" clearable maxlength="25"  placeholderStyle="color: #888" :placeholder="t('namePlaceholder')"/>
					</u-form-item>
				</view>
				<view class="mt-[16rpx]">
					<u-form-item :label="t('mobile')" prop="mobile" labelWidth="200rpx">
						<u-input fontSize="28rpx" v-model.trim="formData.mobile" maxlength="11" border="none" clearable :placeholder="t('mobilePlaceholder')" placeholderStyle="color: #888"/>
					</u-form-item>
				</view>
				<view class="mt-[16rpx]">
					<u-form-item :label="t('selectArea')" prop="area" labelWidth="200rpx">
						<view class="flex w-full items-center h-[52rpx]" v-if="addressType == 'address' && isSelectMap != 1" @click="selectArea">
							<view v-if="!formData.area" class="text-[#888] text-[28rpx] flex-1">{{ t('selectAreaPlaceholder') }}</view>
							<view v-else class="text-[28rpx] flex-1 leading-[1.4]">{{ formData.area }}</view>
							<view @click.stop="chooseLocation" class="flex items-center">
								<text class="nc-iconfont nc-icon-dizhiguanliV6xx mr-[4rpx] text-[32rpx] text-[#e93323]"></text>
								<text class="text-[24rpx] whitespace-nowrap text-[#e93323]">定位</text>
							</view>
						</view>
						<view v-else class="flex justify-between items-center flex-1 h-[52rpx]" @click="chooseLocation">
							<view  class="text-[28rpx] text-[#303133] leading-[1.4]" v-if="formData.area || formData.address_name">{{formData.area || formData.address_name}}</view>
							<view  class="text-[#888] text-[28rpx]" v-else>{{t('selectAddressPlaceholder')}}</view>
							<view class="flex items-center">
								<text class="nc-iconfont nc-icon-dizhiguanliV6xx text-[32rpx] mr-[4rpx] text-[#e93323]"></text>
								<text class="text-[24rpx] whitespace-nowrap text-[#e93323]">定位</text>
							</view>
						</view>
					</u-form-item>
				</view>
				<view class="mt-[16rpx]">
					<u-form-item :label="t('address')" prop="address" labelWidth="200rpx">
						<u-input fontSize="28rpx" v-model="formData.address" border="none" clearable maxlength="120" :placeholder="t('addressPlaceholder')" placeholderStyle="color: #888"/>
					</u-form-item>
				</view>
			</view>
			<view class="sidebar-margin card-template mt-[var(--top-m)] py-[10rpx]">
				<u-form-item :label="t('defaultAddress')" prop="name" :border-bottom="false" labelWidth="200rpx">
					<u-switch v-model="formData.is_default" size="20" :activeValue="1" :inactiveValue="0" activeColor="var(--primary-color)" inactiveColor="var(--temp-bg)"/>
				</u-form-item>
			</view>
		</u-form>
		<view class="w-full footer">
			<view class="py-[var(--top-m)] px-[var(--sidebar-m)] footer w-full fixed bottom-0 left-0 right-0 box-border">
				<button hover-class="none" class="primary-btn-bg !text-[#fff] h-[80rpx] leading-[80rpx] rounded-[100rpx] text-[26rpx] font-500" 
				@click="save" :disabled="btnDisabled" :loading="operateLoading" :class="{'opacity-50': btnDisabled}">{{t('save')}}</button>
			</view>
		</view>
        <area-select ref="areaRef" @complete="areaSelectComplete" :area-id="formData.district_id"/>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 小程序隐私协议 -->
		<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
		<!-- #endif -->
    </view>

</template>

<script setup lang="ts">
    import { ref, computed,nextTick } from 'vue'
    import { onLoad } from '@dcloudio/uni-app'
    import { redirect } from '@/utils/common'
    import { t } from '@/locale'
    import { addAddress, editAddress, getAddressInfo } from '@/app/api/member'
	import manifestJson from '@/manifest.json'
	import { getAddressByLatlng } from '@/app/api/system'
    
    const formData: any = ref({
        id: 0,
        name: '',
        mobile: '',
        province_id: 0,
        city_id: 0,
        district_id: 0,
        lat: '',
        lng: '',
        address: '',
        address_name: '',
        full_address: '',
        is_default: 0,
        area: ''
    })
    const areaRef = ref()
    const formRef: any = ref(null)
    const source = ref('')
    const btnDisabled = ref(false)
	const isSelectAddress = ref(false)
	const addressType = ref('address');
	const isSelectMap = ref(2) // 值为1，该地址需要有经纬度，反之不需要

    const wxPrivacyPopupRef:any = ref(null)
    
    onLoad((data: any) => {
	    isSelectMap.value = data.isSelectMap || '';
	    const selectAddress = uni.getStorageSync('selectAddressCallback')
	    if (data.id) {
		    getAddressInfo(data.id).then((res: any) => {
			    res.data && Object.assign(formData.value, res.data)
			    // 兼容待支付页面编辑地址
			    if (selectAddress) {
				    addressType.value = selectAddress.delivery == 'express' ? 'address' : 'locationAddress';
			    }
		    })

	    } else if (data.name) {
		    if (uni.getStorageSync('addressInfo')) {
			    Object.assign(formData.value, uni.getStorageSync('addressInfo'))
		    }
		    formData.value.address = data.name;
		    getAddress(data.latng);
		    var tempArr = getQueryVariable('latng').split(',');
		    formData.value.lat = tempArr[0];
		    formData.value.lng = tempArr[1];
	    }
	    source.value = data.source || ''
	    if (selectAddress) {
		    addressType.value = selectAddress.delivery == 'express' ? 'address' : 'locationAddress';
	    }
	    // #ifdef MP
	    nextTick(() => {
		    if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
	    })
	    // #endif
    })
    
    const rules = computed(() => {
        return {
            'name': {
                type: 'string',
                required: true,
                message: t('namePlaceholder'),
                trigger: ['blur', 'change'],
            },
            'mobile': [
                {
                    type: 'string',
                    required: true,
                    message: t('mobilePlaceholder'),
                    trigger: ['blur', 'change'],
                },
                {
                    validator(rule: any, value: any, callback: any) {
                        let mobile = /^1[3-9]\d{9}$/;
                        if (!mobile.test(value)){
                            callback(new Error(t('mobileError')))
                        } else {
                            callback()
                        }
                    }
                }
            ],
            'area': {
                validator() {
					let bool = true;
					if(uni.$u.test.isEmpty(formData.value.area) && uni.$u.test.isEmpty(formData.value.address_name)){
						bool = false;
					}
                    return bool
                },
                message: t('selectAreaPlaceholder')
            },
            'address': {
                type: 'string',
                required: true,
                message: t('addressPlaceholder'),
                trigger: ['blur', 'change']
            }
        }
    })

    const selectArea = () => {
		isSelectAddress.value = true
        areaRef.value.open()
    }
    
    const areaSelectComplete = (event: any) => {
		if(isSelectAddress.value && (formData.value.province_id == event.province.id || formData.value.city_id != event.city.id || formData.value.district_id != event.district.id)){
			formData.value.lat = '';
			formData.value.lng = '';
		}
        formData.value.province_id = event.province.id || 0
        formData.value.city_id = event.city.id || 0
        formData.value.district_id = event.district.id || 0
        formData.value.area = `${event.province.name || ''}${event.city.name || ''}${event.district.name || ''}`
		isSelectAddress.value = false;
    }
    
    const operateLoading = ref(false)
    const save = ()=> {
        const save = formData.value.id ? editAddress : addAddress
        formRef.value.validate().then(() => {
            if (operateLoading.value) return
            operateLoading.value = true

            btnDisabled.value = true

            formData.value.full_address = formData.value.area + formData.value.address
			
			if(isSelectMap.value == 1 && !formData.value.lat && !formData.value.lng){
				uni.showToast({
					title: '缺少经纬度，请在地图上重新选点',
					icon: 'none'
				});
				operateLoading.value = false;
				btnDisabled.value = false
				return false;
			}

            save(formData.value).then((res: any) => {
                operateLoading.value = false
                setTimeout(() => {
                    btnDisabled.value = false
					if(source.value == 'shop_order_payment'){
						const selectAddress = uni.getStorageSync('selectAddressCallback')
						if (selectAddress) {
						    selectAddress.address_id = res.data.id || formData.value.id
						    uni.setStorage({
						        key: 'selectAddressCallback',
						        data: selectAddress,
						        success() {
						            redirect({url: selectAddress.back, mode: 'redirectTo'})
						        }
						    })
						}
					}else{
						redirect({
						    url: '/app/pages/member/address',
						    mode: 'redirectTo',
						    param: {source: source.value}
						})
					}
                }, 1000)
            }).catch(() => {
                operateLoading.value = false
                btnDisabled.value = false
            })
        })
    }
	
	// 选择地址
	const chooseLocation = ()=> {
	    // #ifdef MP
	    uni.chooseLocation({
	    	success: (res) => {
			    res.latitude && (formData.value.lat = res.latitude)
			    res.longitude && (formData.value.lng = res.longitude)
			    res.address && (formData.value.area = res.address)
			    res.name && (formData.value.address_name = res.address)
			    res.name && (formData.value.address = res.name)
			    if (res.latitude && res.longitude) {
				    let latng = res.latitude + ',' + res.longitude;
				    getAddress(latng);
			    }
		    },
	        fail: (res)=>{
	            // 在隐私协议中没有声明chooseLocation:fail api作用域
	            if(res.errMsg && 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'})
	                }else {
	                    uni.showToast({title: res.errMsg, icon: 'none'})
	                }
	            }
	        }
	    });
	    // #endif
	
	    // #ifdef H5
	    var urlencode = formData.value;
	    uni.setStorageSync('addressInfo', urlencode);
	    let backurl = location.origin +  location.pathname + '?source=' + source.value;
		if(isSelectMap.value){
			backurl = backurl + '&isSelectMap=' + isSelectMap.value
		}
	    window.location.href = 'https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=' + encodeURIComponent(backurl) + '&key=' + manifestJson.h5.sdkConfigs.maps.qqmap.key + '&referer=myapp';
	    // #endif
	}

	//获取详细地址
	const getAddress = (latlng:any)=> {
	    getAddressByLatlng({latlng}).then((res: any) => {
	        if (res.data) {
	            formData.value.full_address = '';
	            formData.value.full_address += res.data.province != undefined ? res.data.province : '';
	            formData.value.full_address += res.data.city != undefined ? '' + res.data.city : '';
	            formData.value.full_address += res.data.district != undefined ? '' + res.data.district : '';
	
	            formData.value.address_name = formData.value.full_address.replace(/-/g,'');
	            formData.value.area = (res.data.province + res.data.city + res.data.district) || res.data.full_address;
	
	            formData.value.province_id = res.data.province_id != undefined ? res.data.province_id : 0;
	            formData.value.city_id = res.data.city_id != undefined ? res.data.city_id : 0;
	            formData.value.district_id = res.data.district_id != undefined ? res.data.district_id : 0;
	        } else {
	            uni.showToast({title: res.msg, icon: 'none'})
	        }
	    })
	
	}
	
	const getQueryVariable = (variable:any)=> {
	    var query = window.location.search.substring(1);
	    var vars = query.split('&');
	    for (var i = 0; i < vars.length; i++) {
	        var pair = vars[i].split('=');
	        if (pair[0] == variable) {
	            return pair[1];
	        }
	    }
	    return false;
	}
</script>

<style lang="scss" scoped>
	.address-edit :deep(.u-form-item__body__left__content__label){
		font-size: 28rpx !important;
	}
	.address-edit :deep(.u-form-item__body__right){
		display:flex;
	}
	.footer{
		height: calc(100rpx + var(--top-m) + var(--top-m) + constant(safe-area-inset-bottom)) !important;
		height: calc(100rpx + var(--top-m) + var(--top-m) + env(safe-area-inset-bottom)) !important;
	}
</style>