<template>
	<view class="address u-p-l-32 u-p-r-32">
		<u-form :model="addressObj" ref="uForm">
			<u-form-item label="收货人" label-width="160">
				<u-input v-model="addressObj.contact" placeholder="请填写收货人姓名"/>
			</u-form-item>
			<u-form-item label="联系方式" label-width="160">
				<u-input v-model="addressObj.telephone" placeholder="请填写手机号码"/>
			</u-form-item>
			<u-form-item label="所在地区" label-width="160">
				<view @tap="showPopup = true" class="row-between w-full">
					<view :class="[{'placeholder-color': !addressObj.region}]">{{ addressObj.region || '请选择地区' }}</view>
					<view>
						<u-icon name="arrow-right" size="32" color="rgb(192, 196, 204)"></u-icon>
					</view>
				</view>
			</u-form-item>
			<u-form-item label="详细地址" label-width="160" >
				<u-input v-model="addressObj.address" type="textarea" placeholder="请填写小区、街道、门牌号等信息"/>
			</u-form-item>
			<u-form-item :border-bottom="false">
				<u-checkbox v-model="addressObj.is_default" shape="circle" :active-color="themeColor">
					设为默认
				</u-checkbox>
			</u-form-item>

			<view class="u-m-t-60">
				<u-button @click="save" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', borderRadius: '100rpx', fontSize: '24rpx'}" :hair-line="false">保存</u-button>
			</view>
		</u-form>
		
		<u-select v-model="showPopup" mode="mutil-column-auto" :list="lists" @confirm="regionChange"></u-select>
	</view>
</template>

<script>
	import { editAddress, getOneAddress, hasRegionCode, addAddress } from '@/api/user'
	import area from '@/utils/area'
	
	export default {
		data() {
			return {
				addressObj: {
					contact: '',
					telephone: '',
					province: '',
					city: '',
					district: '',
					address: '',
					region: '',
					is_default: false
				},
				defaultRegion: ['广东省', '广州市', '番禺区'],
				defaultRegionCode: '440113',
				showPopup: false,
				lists: [],
				addressId: '',
			}
		},
		
		onLoad(options) {
		    this.addressId = parseInt(options.id)
		    if (options.id) {
		        uni.setNavigationBarTitle({
		            title: '编辑地址'
		        })
		        this.getOneAddressFun()
		    } else {
		        uni.setNavigationBarTitle({
		            title: '添加地址'
		        })
		    }
		    this.$nextTick(() => {
		        this.lists = area
		    })
		},
		
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {
		    uni.removeStorageSync('wxAddress')
		},
		
		methods: {
			// 地区选择
			regionChange(region) {
			    this.addressObj.province_id = region[0].value
			    this.addressObj.city_id = region[1].value
			    this.addressObj.district_id = region[2].value
			    this.addressObj.region = region[0].label + ' ' + region[1].label + ' ' + region[2].label
			},

			// 获取地址详情
			getOneAddressFun() {
				getOneAddress(this.addressId).then((res) => {
					if (res.code == 1) {
						let { city, province, district } = res.data
						this.addressObj = res.data
						this.addressObj.region = `${province} ${city} ${district}`
					}
				})
			},

			save() {
				let {
					addressObj,
					addressId
				} = this
				
				if (!addressObj.contact) {
					return this.$toast({
						title: '请填写收货人姓名'
					})
				}

				if (!addressObj.telephone) {
					return this.$toast({
						title: '请填写手机号码'
					})
				}

				if (!addressObj.region) {
					return this.$toast({
						title: '请选择省、市、区'
					})
				}

				if (!addressObj.address) {
					return this.$toast({
						title: '请填写小区、街道、门牌号等信息'
					})
				}
				
				delete addressObj.region

				if (addressId) {
              	 	editAddress(addressObj).then((res) => {
                        if (res.code == 1) {
                            this.$toast( {
								title: res.msg
							}, {
								tab: 3,
								url: 1
							})
                        }
                    }).catch((err) => {
                        return this.$toast({
                            title: err
                        })
                    })
            	} else {
                	addAddress(addressObj).then((res) => {
                        if (res.code == 1) {
                            this.$toast({
								title: res.msg
							},{
								tab: 3,
								url: 1
							})
                        }
                    }).catch((err) => {
                        return this.$toast({
                            title: err
                        })
                    })
            	}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	
	.placeholder-color {
		color: rgb(192, 196, 204);
	}
</style>