<template>
    <view class="">
        <!-- 使用标题栏 -->
        <status-nav :statusBackw="true" :statusTitle="true" :whereCome="0" :title-val="'地址管理'" :tabcolor="'#ffffff'"></status-nav>
        <!-- 地址信息 -->
        <view class="bacb padding-zy20 posir padding-sx30" :style="{paddingTop:statusHNH+'px'}">
            <view class="disba fon24 color33 borbot padding-sx20">
                <view style="width: 16%;" class="flexs margin-y10">收货人</view>
                <input class="width100 fon24" style="" type="text" v-model="name" placeholder="请填写收货人姓名" placeholder-style="font-size:24rpx;"/>
            </view>
            <view class="disac fon24 color33 borbot padding-sx20">
                <view class="flexs" style="width: 16%;">手机号码</view>
                <view class="disac width100">
                    <view class="flexs">+86</view>
                    <input class="width100 margin-z10 fon24" type="number" maxlength="11" v-model="phone" placeholder="请填写收货人的手机号码" placeholder-style="font-size:24rpx;"/>
                </view>
            </view>
            <view class="disba fon24 color33 borbot padding-sx20">
                <view style="width: 16%;" class="flexs margin-y10">所在地区</view>
                <input @tap="openPicker" disabled class="width100 fon24" style="" type="text" v-model="region" placeholder="省市区县、乡镇等" placeholder-style="font-size:24rpx;"/>
            </view>
            <view class="dis fon24 color33 borbot padding-sx20">
                <view style="width: 16%;" class="flexs margin-y10">详细地址</view>
                <textarea class="width100 fon24" v-model="address" style="height: 200rpx;" placeholder="街道、楼牌号等" placeholder-style="font-size:24rpx;"/>
            </view>
            <view class="borbot"></view>
        </view>
        <view class="bacb margin-s20 padding-zy20 padding-sx30">
            <view class="disba">
                <view class="fon28">设置为默认地址</view>
                <liSwitch :checked="switch_state" @change="switchChange1"></liSwitch>
            </view>
            <view class="fon24 color9">提醒：每次下单会默认推荐使用该地址</view>
        </view>
        <view class="disbc" style="position: fixed;bottom: 40px;left: 60px;right: 60px;">
            <view @tap="saveAddress" class="colorb fon30 addbtn">保存</view>
        </view>
        <city @choseVal="choseValue" :lotusAddressData="lotusAddressData"></city>
    </view>
</template>

<script>
    import liSwitch from '@/components/li-switch.vue';
    import city from '@/components/city/city.js';
    import amap from '../../jsFile/amap-wx.js'
    export default {
        components:{
            liSwitch,
            city
        },
        data() {
            return {
                name:'',
                phone:'',
                address:'',
                switch_state: true,
                updateId:'',
                lotusAddressData:{
                    visible:false,
                    provinceName:'',
                    cityName:'',
                    townName:'',
                },
                region:'',
				regionObj:{
					province:'',
					provinceCode:'',
					city:'',
					cityCode:'',
					town:'',
					townCode:''
				},
                amapPlugin: null, //new地图
                key: '20e98934067a5cf96d8da862fe561787',
                lat:'',//纬度
                lng:'',//经度
				statusHNH:uni.getStorageSync('statusHNH'),
				newProvice:'',
				newCity:'',
				newDistrict:''
            }
        },
        onLoad() {
			let obj = uni.getStorageSync('updataAddress');
			if(obj!=''){
				this.updateId = obj.id
				this.name = obj.name
				this.phone = obj.phone
				this.address = obj.address
				this.regionObj.provinceCode = obj.province
				this.regionObj.cityCode = obj.city
				this.regionObj.townCode = obj.county
				this.regionObj.province = obj.province_str
				this.regionObj.city = obj.city_str
				this.regionObj.town = obj.county_str
				if(obj.is_default==0){
					this.switch_state = false
				}
				this.region = `${obj.province_str} ${obj.city_str} ${obj.county_str} `
			}
            // uni.getLocation({
            //     type: 'wgs84',
            // 　　 geocode:true,
            //     success: function (res) {
            //         console.log('位置信息：'+JSON.stringify(res));
            //     }
            // });
        },
		onUnload() {
			uni.removeStorageSync('updataAddress');
		},
		onShow() {
			this.$toolAll.tools.guoq()
			let ya = this
			wx.getLocation({
			  success:function(res) {
				ya.getDistrict(res.latitude, res.longitude)
			  },
			})
		},
        methods: {
			getDistrict(latitude, longitude) {
				let ya = this
			    wx.request({
					url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=B2ABZ-SIDKS-WD2O3-6CJ2U-CDZOT-U3FKF`,
					header: {
						'Content-Type':'application/json'
					},
					success:function(res) {
						// console.log('地址数据：',res)
						ya.newProvice = res.data.result.address_component.province
						ya.newCity = res.data.result.address_component.city
						ya.newDistrict = res.data.result.address_component.district
					}
			    })
			},
            //打开picker
            openPicker() {
                this.lotusAddressData.visible = true;
                this.lotusAddressData.provinceName = this.newProvice;
                this.lotusAddressData.cityName = this.newCity;
                this.lotusAddressData.townName = this.newDistrict;
            },
            //回传已选的省市区的值
            choseValue(res){
                //res数据源包括已选省市区与省市区code
                // console.log(res);
                this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
                //res.isChose = 1省市区已选 res.isChose = 0;未选
                if(res.isChose){
                    this.lotusAddressData.provinceName = res.province;//省
                    this.lotusAddressData.cityName = res.city;//市
                    this.lotusAddressData.townName = res.town;//区
                    this.region = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
					this.regionObj = {
						province:res.province,
						provinceCode:res.provinceCode,
						city:res.city,
						cityCode:res.cityCode,
						town:res.town,
						townCode:res.townCode
					}
                }
            },
            saveAddress(){
                if(!this.name){
                    this.$toolAll.tools.showToast('请输入收货人');
                } else if(!this.phone){
                    this.$toolAll.tools.showToast('请输入手机号');
                } else if(this.$toolAll.tools.isPhone(this.phone)){
                    this.$toolAll.tools.showToast('请输入正确的手机号');
                } else if(!this.region){
                    this.$toolAll.tools.showToast('请输入所在地区');
                } else if(!this.address){
                    this.$toolAll.tools.showToast('请输入详细地址');
                } else if(!this.switch_state){
                    uni.showModal({
                        title:'提示：',
                        content:'是否设为默认地址',
                        cancelText:'取消默认',
                        cancelColor:'#999999',
                        confirmText:'设为默认',
                        confirmColor:'#164396',
                        success: (res) => {
                            if(res.confirm){
                                this.switch_state = true
                            } else {
                                this.saveEv()
                            }
                        }
                    })
                } else {
                    uni.showModal({
                        title:'提示：',
                        content:'确定要保存当前地址信息吗？',
                        cancelText:'取消',
                        cancelColor:'#999999',
                        confirmText:'确定',
                        confirmColor:'#164396',
                        success: (res) => {
                            if(res.confirm){
                                this.saveEv()
                            }
                        }
                    })
                }
            },
            saveEv(){//保存地址执行事件
				let ya = this
				let num = 1
				if(!ya.switch_state){num = 0}
				let paramsadd = {
					id:	ya.updateId,
					name:ya.name,//姓名
					phone:ya.phone,//电话
					province:ya.regionObj.provinceCode,//省级行政编码 如110000
					city:ya.regionObj.cityCode,//市级行政编码 如110100
					county:ya.regionObj.townCode,//县乡级行政编码 如110101
					province_str:ya.regionObj.province,//省级名称 如北京
					city_str:ya.regionObj.city,//市级名称 如北京市
					county_str:ya.regionObj.town,//县乡区域名称 如东城区
					address:ya.address,//具体地址 如XX路xx街
					is_default:num,//是否默认地址 0=否 1=是
					postcode:'',//邮编 如610200
					tag:''//地址标签 如 家 公司
				}
				this.$requst.post('user/address-save',paramsadd).then(res=>{
					if(res.msg=='success'){
						this.$toolAll.tools.showToast('地址保存成功');
						setTimeout(function(){
						    uni.navigateBack({delta:1})
						},2000)
					}
				},error=>{})
                
            },
            switchChange1: function(e){
            	// console.log(e);
            	this.switch_state = !e.checked;
            }
        }
    }
</script>

<style scoped>
    
</style>
