<template>
	<view class="address-form">
		<form @submit="formSubmit" @reset="formReset">
			<view class="bg-white address-box f28">
				<view class="d-s-c border-b">
					<text class="key-name">{{ $t('MY_ORD_10') }}</text>
					<input class="ml20 f32 flex-1 address-input" name="recName" type="text" v-model="address.recName" placeholder-class="grary9" :placeholder="$t('w_0067')" />
				</view>
				<view class="d-s-c border-b">
					<text class="key-name">{{ $t('w_0052') }}</text>
					<input class="ml20 f32 flex-1 address-input" name="recPhone" type="text" v-model="address.recPhone" placeholder-class="grary9" :placeholder="$t('w_0053')" />
				</view>
				<view class="d-s-c border-b" @click="showMulLinkageThreePicker">
					<text class="key-name">{{ $t('w_0068') }}</text>
					<view class="input-box flex-1 d-b-c">
						<input class="ml20 f32 flex-1 address-input" type="text" placeholder-class="grary9" :placeholder="$t('w_0069')" v-model="selectCity" disabled="true" />
						<view class="icon iconfont fb icon-icon1"></view>
					</view>
				</view>
				<view class="d-s-s border-b">
					<text class="key-name">{{ $t('S_C_27') }}</text>
					<textarea
						class="ml20 flex-1 f32  lh150 addtextarea"
						name="recAddress"
						placeholder-class="grary9"
						:auto-height="true"
						v-model="address.recAddress"
						:placeholder="$t('w_0070')"
					></textarea>
				</view>
				<view class="d-b-c">
					<text class="key-name">{{ $t('PER_DA_23') }}</text>
					<view class="radio d-s-c"><radio style="transform:scale(0.6)" color="#FB3024" :checked="isDefault" @click="isDefault = !isDefault" /></view>
				</view>
			</view>
			<view class="addBtn">
				<button form-type="submit" class="f32 mt60 normal-sub-btn">{{ $t('w_0035') }}</button>
			</view>
		</form>
		<mpvue-city-picker
			v-if="is_load"
			ref="mpvueCityPicker"
			:province="province"
			:city="city"
			:area="area"
			:pickerValueDefault="cityPickerValueDefault"
			@onConfirm="onConfirm"
		></mpvue-city-picker>
	</view>
</template>

<script>
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
export default {
	components: {
		mpvueCityPicker
	},
	data() {
		return {
			cityPickerValueDefault: [0, 0, 0],
			selectCity: this.$t('S_C_30'),
			recProvince: 0,
			recCity: 0,
			recCounty: 0,
			/*地址id*/
			pkId: 0,
			/*地址数据*/
			address: {},
			/*地区*/
			region: {},
			is_load: false,
			province: [],
			city: [],
			area: [],
			isDefault: false
		};
	},
	onLoad(e) {
		this.pkId = e.pkId;
	},
	mounted() {
		/*获取地址数据*/
		this.getCityData();
	},
	methods: {
		/* 省市区回显 */
		getAddressName(pid, cid, aid, piker) {
			let self = this;
			/* 省市区列表 */
			if (!self.province) {
				return;
			}
			let add = '';
			let citydata = [];
			let areadata = [];
			self.province.forEach((item, index) => {
				if (item['id'] == pid) {
					add += item['name'];
					citydata = item['children'];
					piker[0] = index;
					citydata.forEach((citem, cindex) => {
						if (citem['id'] == cid) {
							add += citem['name'];
							areadata = citem['children'] ? citem['children'] : [];
							piker[1] = cindex;
							if (areadata) {
								areadata.forEach((aitem, aindex) => {
									if (aitem['id'] == aid) {
										add += aitem['name'];
										piker[2] = aindex;
										return;
									}
								});
							}
						}
					});
				}
			});
			return add;
		},
		/*获取数据*/
		getData() {
			let self = this;
			let pkId = self.pkId;
			self._get('member/api/member-address/detail/' + pkId, {}, function(res) {
				self.address = res.data;
				self.isDefault = res.data.isDefault == 1 ? true : false;
				self.pkId = res.data.pkId;
				self.recProvince = res.data.recProvince;
				self.recCity = res.data.recCity;
				self.recCounty = res.data.recCounty;
				self.selectCity = self.getAddressName(self.recProvince, self.recCity, self.recCounty, self.cityPickerValueDefault);
			});
		},

		// 获取省市区
		getCityData() {
			let self = this;
			self._get('system/api/area/tree', {}, function(res) {
				self.province = res.data;
				// self.city = res.data.regionData[1];
				// self.area = res.data.regionData[2];
				self.is_load = true;
				/*获取地址数据*/
				self.getData();
			});
		},

		/*提交地址*/
		formSubmit: function(e) {
			let self = this;
			var formdata = e.detail.value;
			formdata.pkId = self.pkId;
			formdata.recProvince = self.recProvince;
			formdata.recCity = self.recCity;
			formdata.recCounty = self.recCounty;
			formdata.pkId = self.pkId;
			formdata.isDefault = self.isDefault ? 1 : 0;
			// formdata.region = self.region;

			if (formdata.recName == '') {
				uni.showToast({
					title: self.$t('w_0067'),
					duration: 1000,
					icon: 'none'
				});
				return false;
			}

			if (formdata.recPhone == '') {
				uni.showToast({
					title: self.$t('w_0278'),
					duration: 1000,
					icon: 'none'
				});
				return false;
			}

			/*let reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/;
					if (!reg.test(formdata.recPhone)) {
						uni.showToast({
							title: '手机号码格式不正确',
							duration: 1000,
							icon: 'none'
						});
						return false;
					}*/

			if (formdata.recProvince == 0 || formdata.recCity == 0 || formdata.recCounty) {
				if (formdata.detail == '') {
					uni.showToast({
						title: self.$t('S_C_30'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
			}

			self._post('member/api/member-address/save', formdata, function(res) {
				self.showSuccess(res.msg, function() {
					// #ifndef H5
					uni.navigateBack({
						delta: parseInt(1)
					});
					// #endif
					// #ifdef H5
					history.go(-1);
					// #endif
				});
			});
		},

		/*清空数据*/
		formReset: function(e) {
			console.log('清空数据');
		},

		/*三级联动选择*/
		showMulLinkageThreePicker() {
			this.$refs.mpvueCityPicker.show();
		},

		/*选择之后绑定*/
		onConfirm(e) {
			this.region = e.label.split(',');
			this.selectCity = e.label;
			this.recProvince = e.cityCode[0];
			this.recCity = e.cityCode[1];
			this.recCounty = e.cityCode[2];
		}
	}
};
</script>

<style lang="scss">
.address-form {
	padding: 0;
	border-radius: 0;
}

.address-box {
	padding: 0 31rpx 0 27rpx;
}

.address-form .key-name {
	width: 180rpx;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 28rpx;
}

.address-form .btn-red {
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	box-shadow: 0 8rpx 16rpx 0 rgba(226, 35, 26, 0.6);
}

.addBtn {
	position: fixed;
	bottom: 60rpx;
	left: 0rpx;
	margin: 0 auto;
	width: 750rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.address-input {
	line-height: 90rpx;
	height: 90rpx;
	box-sizing: border-box;
	font-size: 28rpx;
}

.addtextarea {
	font-size: 28rpx;
	line-height: 1.5;
	padding: 25rpx 0;
}

.icon.icon-icon1 {
	font-size: 28rpx;
	color: #999;
}
</style>
