<template>
	<view class="mx-2">
		<view class="bg-white rounded-lg p-3 mt-3">
			<view class="flex align-center justify-between border-bottom border-light py-3">
				<view class="flex-1">
					<input class="font28" focus placeholder="姓名" v-model="userName" />
				</view>
				<view class="flex-1">
					<input class="font28" type="number" placeholder="联系方式" v-model="tel" />
				</view>
			</view>
			<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
				<view class=" border-bottom border-light py-3 flex align-center justify-between">
					<view class=" font28 flex align-center flex-1" v-if="province">{{province}}{{city}}{{district}}
					</view>
					<view class=" font28 text-light-black flex-1" v-else>省市区</view>
					<uni-icons type="right" color="#cccccc" size="20"></uni-icons>
				</view>
			</pick-regions>
			<view class=" border-bottom border-light py-3 flex align-center justify-between">
				<textarea v-model="address" autoHeight class="flex-1 font28" placeholder="详细地址（例如**街**号**）" />
			</view>
			<view class="flex align-center justify-between">
				<view class="flex align-center justify-between mt-2" @click="clear">
					<uni-icons type="trash-filled" size="16" color="#cccccc"></uni-icons>
					<text class="font24 ml-1 text-muted">清空当前信息</text>
				</view>
			</view>
		</view>
		<view class="fixed-bottom border-top  bg-white py-2 px-3">
			<view class="bg-danger py-3 font30 text-center text-white shadow rounded-circle" @click="toList">立即保存
			</view>
		</view>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		TaAjax
	} from '../../common/ajax'

	export default {
		data() {
			return {
				id: "",
				province: null,
				city: null,
				district: null,
				address: null,
				userName: null,
				tel: null,
				// 弹出验证信息
				message: null,
				msgType: null,
				messageText: null,
				region: [],
				defaultRegionCode: '110101'
			}
		},
		onLoad(options) {
			this.id = options.id || ""
		},

		methods: {
			// 获取选择的地区
			handleGetRegion(region) {
				this.region = region
				this.province = region[0].name
				this.city = region[1].name
				this.district = region[2].name
			},
			toList() {
				if (this.userName == null || this.userName == '') {
					this.msgType = "error"
					this.messageText = `请输入联系人姓名`
					this.$refs.message.open()
					return
				}
				if (this.tel == null || this.tel == '') {
					this.msgType = "error"
					this.messageText = `请输入联系人手机号`
					this.$refs.message.open()
					return
				}
				if (!/^1[3456789]\d{9}$/.test(this.tel)) {
					this.msgType = "error"
					this.messageText = `请输入正确手机号`
					this.$refs.message.open()
					return
				}
				if (this.province == null || this.province == '') {
					this.msgType = "error"
					this.messageText = `请选择地址`
					this.$refs.message.open()
					return
				}
				const item = {
					id: this.id,
					user_name: this.userName,
					user_phone: this.tel,
					region_prov: this.province,
					region_city: this.city,
					region_area: this.district,
					region_addr: this.address,
				}
				TaAjax.post("/points_mall/api.auth.address/save", item).then((res) => {
					if (res.code == 1) {
						this.msgType = "success"
						this.messageText = `保存成功`
						this.$refs.message.open()
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						this.msgType = "error"
						this.messageText = `保存失败`
						this.$refs.message.open()
					}
				})
			},

			clear() {
				this.address = '',
					this.companyName = '',
					this.userName = '',
					this.tel = '',
					this.province = '',
					this.city = '',
					this.district = ''
			},

		}
	}
</script>

<style>

</style>