<template>
	<form class="wrap" @submit="formSubmit" @reset="formReset">
		<view class="content">
			<view class="item,name">
				<text class="itemText">姓名</text>
				<input placeholder="收货人姓名(真实姓名)" placeholder-style="color:#B8B8B8" name="name" :value="name" />
			</view>
			<view class="item,phone">
				<text class="itemText">电话</text>
				<input placeholder="手机号" type="digit" placeholder-style="color:#B8B8B8" name="mobile"
					v-model="mobile" />
			</view>
			<view class="item,phone">
				<text class="itemText">性别</text>
				<picker @change="bindPickerChange" :value="sexIndex" :range="sexArray" name="sex">
					<view class="uni-input">{{sexArray[sexIndex]}}</view>
				</picker>
			</view>
			<view class="item,area">
				<text class="itemText">地区</text>
				<view class="btn" v-if="pickerText===''" @tap="openAddres">选择省/市/区</view>
				<view class="btn" v-else @tap="openAddres">{{pickerText}}</view>
				<simple-address ref="SimpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
					themeColor="#007AFF" name="address"></simple-address>
			</view>
			<view class="item,address">
				<text class="itemText">详细地址</text>
				<input placeholder="街道、小区门牌等详细地址" name="addDetail" :value="add_detail" />
			</view>
			<view class="item,check">
				<text class="itemText">设为默认地址</text>
				<switch :checked="isDefalutAddress" color="#FF6B4A" style="transform:scale(0.6)"
					@change="changeDefalutAddress" name="is_default" />
			</view>
			<input />
		</view>
		<button form-type="submit" class="button" v-if="addId">编辑</button>
		<button form-type="submit" class="button" v-else>保存并使用</button>
	</form>
</template>

<script>
	import SimpleAddress from '@/components/SimpleAddress/SimpleAddress.vue'
	import store from '@/store'

	export default {
		data() {
			return {
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '',
				isDefalutAddress: true,
				sexArray: ['男', '女'],
				sexIndex: 0,
				flag: 0,
				addId: undefined,
				name: '',
				mobile: '',
				add_detail: '',
				is_default: 0,
				// sex:0
			}
		},
		onLoad(option) {
			const {
				addId
			} = option
			if (addId) {
				this.addId = addId
				store.dispatch('address/details', {
					add_id: addId,
					uid:1
				}).then(() => {
					uni.setNavigationBarTitle({
						title: '编辑地址'
					})
					const {
						name,
						mobile,
						sex,
						add_id,
						add_detail,
						province,
						city,
						is_default,
						address
					} = this.$store.state.address.details
					console.log('this.$store.state.address.details', this.$store.state.address.details)
					let a = this.$store.state.address.details.province+"-"+this.$store.state.address.details.city+"-"+this.$store.state.address.details.address;
					console.log('a', a);
					const index = this.$refs.SimpleAddress.queryIndex(
						a.split('-'), 'label')
					console.log(index)
					this.cityPickerValueDefault = index.index
					this.name = name
					this.mobile = Number(mobile)
					this.sexIndex = sex
					this.add_detail = add_detail
					this.isDefalutAddress = !!Number(is_default)
					this.pickerText = a
				})
			}
		},
		components: {
			SimpleAddress
		},
		methods: {
			openAddres() {
				this.cityPickerValueDefault = [0, 0, 1]
				this.$refs.SimpleAddress.open()
			},
			onConfirm(e) {
				this.pickerText = e.label
				console.log('lll', e, this.pickerText)
			},
			changeDefalutAddress(e) {
				this.isDefalutAddress = e.target.value
			},
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.sexIndex = e.target.value
			},
			formValidation(formdata) {
				const {
					name,
					mobile,
					addDetail
				} = formdata
				this.flag = false
				if (name === '') {
					uni.showModal({
						content: '请输入姓名',
						showCancel: false
					})
					return 0
				}
				if (!(/^1[3456789]\d{9}$/.test(mobile))) {
					uni.showModal({
						content: '请输入正确的手机号',
						showCancel: false
					})
					return 0
				}
				if (this.pickerText === '') {
					uni.showModal({
						content: '请选择收货地区',
						showCancel: false
					})
					return 0
				}
				if (addDetail === '') {
					uni.showModal({
						content: '请输入收货详细地址',
						showCancel: false
					})
					return 0
				}
				this.flag = true
			},
			formSubmit(e) {
				const formdata = e.detail.value
				this.formValidation(formdata)

				const {
					name,
					mobile,
					addDetail,
					is_default
				} = formdata
				if (this.flag === true) {
					console.log('this.pickerText', this.pickerText);
					const addressOffice = this.pickerText.split("-");
					const params = {
						sex: this.sexIndex,
						name,
						province: addressOffice[0],
						city:addressOffice[1],
						address: addressOffice[2],
						uid:1,
						mobile:'13910779120',
						default: is_default ? 1 : 0,
						add_detail: addDetail,
						longitude: 1,
						latitude: 1
					}
					if (this.addId) {
						params.add_id = this.addId
					}
					store.dispatch('address/edit', params).then(() => {
						console.log('fanhui')
						uni.navigateBack({
							delta: 1
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		height: 100vh;
		background-color: #f2f2f2;
		font-family: PingFangSC-Regular;
		letter-spacing: -0.23px;
		padding-top: 19rpx;
	}

	.content {
		background-color: #ffffff;
		border:1px #000 solid;
		border-radius: 8px;
		border-radius: 8px;
		padding: 40rpx 56rpx;
		margin-left: 40rpx;
		width: 670rpx;
		box-sizing: border-box;

		.item {
			display: flex;
			border:1px #000 solid;
			justify-content: flex-start;
			font-size: 14px;
			align-items: center;
			height: 112rpx;
			border-bottom: 1rpx solid #e9e9e9;

			.itemText {
				width: 162rpx;
				font-family: PingFangSC-Regular;
				letter-spacing: -0.26px;
			}

			.btn {
				color: #333333 !important;
			}
		}

		.check {
			justify-content: space-between;
		}
	}

	.button {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 112rpx;
		width: 100%;
		background: #ff6b4a;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		color: #ffffff;
		letter-spacing: -0.3px;
	}
</style>