<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content" v-if="flag">
				编辑地址
			</block>
			<block slot="content" v-else>
				新增地址
			</block>
			<block slot="right">
				<view class="" style="color: #000000; font-size: 26rpx; margin-right: 40rpx;" v-if="flag"
					@click="delAddress">
					删除
				</view>
			</block>
		</cu-custom>


		<view class="" style="background-color: #fff;padding: 0 48rpx;margin-top: 15rpx;">
			<u-form labelPosition="left" :model="addressInfo" ref="myForm" labelWidth="200" :labelStyle="labelStyle"
				:error-type="errorType">
				<u-form-item label="联系人" prop="name" border-bottom required>
					<u-input v-model="addressInfo.name" placeholder="请输入姓名"></u-input>
				</u-form-item>
				<view class=""
					style="text-align: center;margin-top: 3vw;border-bottom: 1rpx solid #eee;padding-bottom: 3vw;">
					<u-tag text="先生" @click="tagSexClick" bg-color="#fff" :color="addressInfo.sex=='1' ? '#111':'#999'"
						:borderColor="addressInfo.sex=='1' ? '#FC6035':'#ccc'" shape="circle" index="1"
						style="padding: 12rpx 36rpx;margin-right: 20rpx;font-size: 30rpx;" />
					<u-tag text="女士" @click="tagSexClick" bg-color="#fff" :color="addressInfo.sex=='0' ? '#111':'#999'"
						:borderColor="addressInfo.sex=='0' ?  '#FC6035' :'#ccc'" shape="circle" index="0"
						style="padding: 12rpx 36rpx;margin-left: 20rpx;font-size: 30rpx;" />
				</view>
				<u-form-item label="电话" prop="phone" border-bottom required>
					<u-input v-model="addressInfo.phone" placeholder="请输入手机号" type="number" maxlength="11"></u-input>
				</u-form-item>
				<u-form-item label="地址" prop="address" border-bottom required>
					<u-input v-model="addressInfo.address" placeholder="请输入收货地址" @click="showMulLinkageThreePicker">
					</u-input>
					<u-icon slot="right" name="arrow-right" @click="showMulLinkageThreePicker"></u-icon>
				</u-form-item>
				<u-form-item label="门牌号" prop="detailed" border-bottom required>
					<u-input v-model="addressInfo.detailed" placeholder="例：5号楼305室"></u-input>
				</u-form-item>
			</u-form>
		</view>
		<view class="" style="width: 85%;margin: 0 auto;margin-top: 12vw;">
			<u-button :custom-style="customStyle" hover-class="none" @click="onSubmitClick" shape="circle">保存并使用
			</u-button>
		</view>
		<u-modal v-model="showModel" :content="modelContent" confirm-color="#FC6035" :showCancelButton="true"
			confirmText='确认' @confirm="onConfirmClick"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showModel: false,
				modelContent: '',
				flag: false,
				///1.地址信息
				addressInfo: {
					memberId: "",
					sex: '',
					address: '',
					detailed: '',
					phone: '',
					longitude: '',
					latitude: ''
				},
				///2.用户名称
				userName: "",
				///3.用户性别
				userSex: "",
				///4.用户手机
				userPhone: "",
				///5.用户大致地址
				userGeneralAddress: "",
				///6.用户具体地址
				userDetailAddress: "",

				labelStyle: { // 文字左侧样式
					'font-size': '30rpx',
					'color': '#111',
					'font-weight': 'bold'
				},

				customStyle: {
					// 保存按钮样式
					'backgroundColor': '#FC6035',
					'color': '#fff',
					'borderRadius': '50rpx',
					'height': '90rpx',
					'font-size': '33rpx'
				},
				errorType: ['toast'],
				rules: {
					name: [{
						required: true,
						message: '请填写姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['blur'],
					}],
					phone: [{
						len: 11,
						pattern: /^1[3-9]\d{9}$/,
						required: true,
						message: '手机号格式不正确',
						trigger: ['blur']
					}],
					address: [{
						required: true,
						message: '收货地址不能为空',
						trigger: ['blur']
					}],
					detailed: [{
						required: true,
						message: '门牌号不能为空',
						trigger: ['blur']
					}]
				},
			}
		},
		onLoad(option) {
			if (option.addressInfo != undefined) {
				this.addressInfo = JSON.parse(option.addressInfo);
				this.flag = true
			}
			this.addressInfo.memberId = uni.getStorageSync('userInfo').memberId
		},
		onShow() {
			if (uni.getStorageSync('tempLocal')) {
				this.addressInfo.address = uni.getStorageSync('tempLocal').name
				this.addressInfo.longitude = uni.getStorageSync('tempLocal').longitude
				this.addressInfo.latitude = uni.getStorageSync('tempLocal').latitude
				uni.removeStorageSync('tempLocal')
			}
		},
		onReady() {
			// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
			this.$refs.myForm.setRules(this.rules);
		},
		methods: {
			onConfirmClick() {
				this.$u.api.delAddress(this.addressInfo.addressId).then(res => {
					if (res.code == 200) {
						this.$api.msg('删除成功');
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				})
			},
			delAddress() {
				console.log(this.addressInfo.addressId)
				this.modelContent = '你确认要删除该地址吗？'
				this.showModel = true

			},
			onSubmitClick() {
				this.$refs.myForm.validate(valid => {
					if (valid) {
						console.log('验证通过')
						this.addAddress();
					}
				});
			},
			addAddress() {
				const param = {
					memberId: this.addressInfo.memberId, //会员id
					address: this.addressInfo.address, //地址详情
					detailed: this.addressInfo.detailed, //门牌号
					longitude: this.addressInfo.longitude, //经度
					latitude: this.addressInfo.latitude, //纬度 
					name: this.addressInfo.name, //联系人姓名
					phone: this.addressInfo.phone, //手机号,
				}
				if (this.sex) {
					param.sex = this.addressInfo.sex
				}
				this.$u.api.addAddress(param).then(res => {
					console.log(res, 'resresres', param)
					if (res.code == 200) {
						this.$api.msg('添加地址成功');
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				})
			},
			// 选择性别
			tagSexClick(index) {
				if (this.addressInfo.sex == index) {
					this.addressInfo.sex = ''
				} else {
					this.addressInfo.sex = index
				}
				console.log(this.addressInfo.sex)
			},
			// showMulLinkageThreePicker() {
			// 	console.log('跳转选择地址')
			// 	uni.navigateTo({
			// 		url: './chooseLocation'
			// 	})
			// }

			// 三级联动选择
			showMulLinkageThreePicker() {
				var that = this
				uni.removeStorageSync('tempLocal')
				uni.chooseLocation({
					success: function(res) {
						console.log(res)
						that.addressInfo.address = res.name
						uni.setStorageSync('tempLocal', res)
					}
				});
			},
		}
	}
</script>

<style>
	.setitle_style {
		font-weight: bold;
		font-size: 30rpx;
	}
</style>
