<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>