<template>
	<view v-if="isPop">
		<view class="pop-bg" @click="closeFunc"></view>
		<view class="pop-box">
			<form @submit="formSubmit" @reset="formReset">
				<view class="tips-box">{{ $t('MY_CK_31') }}</view>
				<view class="form-group">
					<view class="form-item">
						<view class="form-label">
							<text class="domation mr10">*</text>
							{{ $t('MY_ORD_1') }}
						</view>
						<view class="disabled-input">{{ form.orderCode }}</view>
					</view>
					<view class="form-item">
						<view class="form-label">
							<text class="domation mr10">*</text>
							{{ $t('MY_ORD_10') }}
						</view>
						<input class="form-input" v-model="form.newRecName" type="text" value="" :placeholder="$t('w_0067')" />
					</view>
					<view class="form-item">
						<view class="form-label">
							<text class="domation mr10">*</text>
							{{ $t('w_0052') }}
						</view>
						<input class="form-input" v-model="form.newRecPhone" type="text" value=""  :placeholder="$t('w_0053')" />
					</view>
					<view class="form-item">
						<view class="form-label">
							<text class="domation mr10">*</text>
							{{ $t('w_0068') }}
						</view>
						<input class="form-input" type="text" value="" :placeholder="$t('w_0069')" v-model="selectCity"
							disabled="true" @click="showMulLinkageThreePicker" />
						<text class="icon iconfont icon-jiantou"></text>
					</view>
					<view class="form-item">
						<view class="form-label">
							<text class="domation mr10">*</text>
							{{ $t('S_C_27') }}
						</view>
						<textarea auto-height v-model="form.newRecAddress" class="form-textarea" value=""
							placeholder="" />
					</view>
					<view class="form-item" v-if="addressData.length > 0">
						<view class="address-box">
							<view class="domation f28 mb20">{{ $t('w_0073') }}</view>
							<view class="address-item" v-for="(item, index) in addressData" :key="index"
								@click="selectAddress(item)">
								<view class="radio-check d-c-c" :class="{ checked: item.pkId == address_index }">
									<u-icon name="checkbox-mark" color="#fff" size="28rpx"></u-icon>
								</view>
								<view class="flex-1">
									<view class="f28 gray3 fb mb10 d-s-s">{{ item.recName }}</view>
									<view class="f26 gray3 mb10">{{ item.recPhone }}</view>
									<view class="f24 gray9">{{ item.recArea }}{{ item.recAddress }}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="form-label">
							<text class="domation mr10">*</text>
							{{ $t('MY_CK_34') }}
						</view>
						<view class="disabled-input">{{form.postage}}</view>
					</view>
					<view class="form-item">
						<view class="form-label">
							<text class="domation mr10">*</text>
							{{ $t('MY_WAL_22') }}
						</view>
						<textarea auto-height class="form-textarea" v-model="form.selfRemark" value="" placeholder="" />
					</view>
				</view>
				<button class="normal-sub-btn" form-type="submit" style="margin-top: 37rpx;width: 80%;">{{ $t('w_0035') }}</button>
			</form>
			<Popup :show="isPopup" :width="665" :padding="0" @hidePopup="hidePopupFunc">
				<view class="d-e-c ww100">
					<view class="p20" @click="hidePopupFunc(true)"><text class="icon iconfont icon-guanbi"></text>
					</view>
				</view>
				<view class="ww100 box-s-b" style="padding: 0 60rpx;">
					<view class="d-s-c" style="margin-bottom: 50rpx;">
						<u-icon name="checkmark-circle-fill" color="#333333" size="38rpx"></u-icon>
						<text class="ml20">{{ $t('MY_CK_35') }}</text>
					</view>
					<view class="f24 gray6 line-h-15">{{ $t('MY_CK_36') }}</view>
					<view class="f24 gray6 line-h-15 mb40">{{ $t('MY_CK_28') }}：400-0000-8888</view>
					<button class="s-pop-btn" @click="hidePopupFunc">{{ $t('MY_WAL_23') }}</button>
				</view>
			</Popup>
			<mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province" :city="city" :area="area"
				:pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
		</view>
	</view>
</template>

<script>
	import Popup from '@/components/uni-popup.vue';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	import utils from '@/common/utils.js';
	export default {
		components: {
			Popup,
			mpvueCityPicker
		},
		data() {
			return {
				cityPickerValueDefault: [0, 0, 0],
				isPopup: false,
				form: {
					creationTime: '',
					creatorCode: '',
					deliveryWay: 1,
					dizhi: ['', '', ''],
					memberCode: '',
					memberName: '',//////
					nameList: '',
					newPostage: '', //新的邮费
					newRecAddress: '', //新详细地址
					newRecCity:'',///
					newRecCounty:'',/////
					newRecName: '', //新收货人
					newRecPhone: '', //新手机
					newRecProvince:'',/////
					orderAchieve: '',
					orderAmount: '',
					orderCode: '', //订单编号
					orderItemsParams: [],
					orderStatus: 1,
					orderStatusVal: '',
					orderType: 3,
					orderTypeVal: '',
					payTime: '', //支付时间
					pkId: 0,/////
					postage: '',
					recAddress: '',////
					recCity: '',///
					recCityVal: '',////
					recName: '', //收货人
					recPhone: '', //手机
					recProvince: '',///	
					recProvinceVal: '',///	
					selfRemark: '', //备注
					tranType: 1
				},
				addressData: [],
				province: [],
				city: [],
				area: [],
				is_load: false,
				selectCity: '',
				address_index: ''
			};
		},
		props: ['detail', 'isPop'],
		watch: {
			isPop: function(n, o) {
				if ((n != o) & n) {
					let data = this.detail;
					/*获取地址列表*/
					this.getAddressData();

					this.getAreaData();
					utils.objForEach(this.form, (value, key) => {
						if (data[key]) {
							this.form[key] = data[key];
						}
					});
					console.log(this.form)
				}
			}
		},
		methods: {
			closeFunc(e) {
				let flag = false;
				if(e){
					flag = true;
				}
				this.$emit('close',flag);
			},
			selectAddress(e) {
				this.address_index = e.pkId;
				this.form.dizhi[0] = e.recProvince;
				this.form.dizhi[1] = e.recCity;
				if (e.recCounty > 0) {
					this.form.dizhi[2] = e.recCounty;
				}
				this.form.newRecName = e.recName;
				this.form.newRecPhone = e.recPhone;
				this.selectCity = e.recArea;
				this.form.newRecAddress = e.recAddress;
				this.form.nameList = e.recArea;
				this.form.newRecProvince = e.recProvince;
				this.form.newRecCity = e.recCity;
				this.form.newRecCounty = e.recCounty;
				this.selfOrderPostage();
			},
			selfOrderPostage() {
				let self = this;
				console.log(1111111)
				self._post('sale/api/order/self-order-postage', {
					recCity: self.form.newRecProvince,
					recProvince: self.form.newRecCity
				}, res => {
					console.log(res)
					self.form.newPostage = res.data.postage;
				},err=>{
					console.log(err)
				})
			},
			/*提交*/
			formSubmit: function(e) {
				// this.isPopup = true;
				// return
				let self = this;
				var formdata = self.form;
				if (formdata.name == '') {
					uni.showToast({
						title: this.$t('w_0067'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}

				if (formdata.recPhone == '') {
					uni.showToast({
						title: this.$t('w_0134'),
						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.recAddress == '') {
						uni.showToast({
							title: this.$t('S_C_30'),
							duration: 1000,
							icon: 'none'
						});
						return false;
					}
				}

				if (formdata.recAddress == '') {
					uni.showToast({
						title: this.$t('w_0070'),
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				
				self._post('member/api/self-modify-address/putin', formdata, function(res) {
					self.isPopup = true;
				});
			},
			/*获取数据*/
			getAddressData() {
				let self = this;
				let dataType = self.dataType;
				self.loadding = true;
				self._get('member/api/member-address/list', {}, function(res) {
					self.addressData = res.data;
					self.loadding = false;
					uni.hideLoading();
				});
			},
			// 获取省市区
			getAreaData() {
				let self = this;
				self._get('system/api/area/tree', {}, function(res) {
					self.province = res.data;
					self.is_load = true;
				});
			},
			hidePopupFunc() {
				this.isPopup = false;
				this.closeFunc(true);
			},
			/*三级联动选择*/
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show();
			},

			/*确定选择的省市区*/
			onConfirm(e) {
				console.log(e);
				this.selectCity = e.label;
				this.form.nameList = e.label;
				// this.recProvince = e.cityCode[0];
				// this.recCity = e.cityCode[1];
				// this.recCounty = e.cityCode[2];
				this.form.newRecProvince = e.cityCode[0];
				this.form.newRecCity = e.cityCode[1];
				this.form.newRecCounty = e.cityCode[2];
				this.form.dizhi[0] = e.cityCode[0];
				this.form.dizhi[1] = e.cityCode[1];
				if (e.cityCode[2] > 0) {
					this.form.dizhi[2] = e.cityCode[2];
				}
				this.selfOrderPostage();
			}
		}
	};
</script>

<style lang="scss">
	.agreement-box {
		width: 750rpx;
		background: #ffffff;
		padding: 28rpx 22rpx;
		box-sizing: border-box;
		margin-top: 2rpx;
		margin-bottom: 20rpx;

		.agreement-content {
			font-size: 24rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #999999;
			line-height: 32rpx;
			word-break: break-all;
			margin-bottom: 32rpx;
		}

		.agreement-btn {
			min-width: 320rpx;
			height: 76rpx;
			line-height: 1.5;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;
			background: #282828;
			border-radius: 38rpx;
			color: #ffffff;
			font-size: 24rpx;
		}
	}

	.form-title {
		width: 750rpx;
		height: 106rpx;
		background: #fb3024;
		padding-left: 44rpx;
		position: relative;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #fff;
		line-height: 106rpx;
		font-weight: bold;
		z-index: 1;
	}

	.form-title::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		left: 25rpx;
		width: 6rpx;
		height: 24rpx;
		background-color: #fb3024;
		z-index: 1;
	}

	.form-group {
		padding: 0 22rpx;
		background: #ffffff;

		.form-item {
			min-height: 104rpx;
			box-sizing: border-box;
			padding: 15rpx 0;
			line-height: 1.5;
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 1rpx solid #eee;

			.icon-jiantou {
				font-size: 32rpx;
				color: 090000;
			}

			.form-tips {
				font-size: 24rpx;
				color: #999;
			}

			.form-label {
				width: 255rpx;
				flex-shrink: 0;
				word-break: break-all;
				margin-right: 20rpx;
			}

			.disabled-input {
				width: 340rpx;
				height: 64rpx;
				padding: 0 16rpx;
				line-height: 64rpx;
				background: #eee;
				font-size: 24rpx;
				color: #333;
				flex: 1;
			}

			.form-textarea {
				width: 340rpx;
				padding: 0 16rpx;
				line-height: 1.5;
				font-size: 24rpx;
				color: #333;
				flex: 1;
				background: #fff;
			}

			.form-input {
				width: 340rpx;
				height: 64rpx;
				padding: 0 16rpx;
				line-height: 64rpx;
				background: #fff;
				font-size: 24rpx;
				color: #333;
				flex: 1;
			}

			.form-item:last-child {
				border: none;
			}
		}
	}

	.form-upload {
		padding: 30rpx 23rpx;
	}

	.form-upload-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.form-upload-tips {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 20rpx;
	}

	.form-upload-tips2 {
		font-size: 24rpx;
		color: #fb3024;
		line-height: 1.5;
	}

	.upload-add {
		width: 142rpx;
		height: 142rpx;
		margin-right: 18rpx;
		margin-bottom: 18rpx;
	}

	.tips-box {
		padding: 33rpx 27rpx 29rpx 41rpx;
		font-size: 26rpx;
		color: #666;
		line-height: 1.5;
		word-break: break-all;
	}

	.address-box {
		width: 706rpx;
		padding: 21rpx 26rpx;
		background-color: #f5f5f5;
		border-radius: 15rpx;
	}

	.address-item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.radio-check {
		width: 40rpx;
		height: 40rpx;
		background: #ffffff;
		border: 1rpx solid #dddddd;
		border-radius: 50%;
		box-sizing: border;
		position: relative;
		margin-right: 20rpx;
	}

	.radio-check.checked {
		border: 1rpx solid #fb3024;
		background: #fb3024;
	}

	.icon.icon-guanbi {
		font-size: 24rpx;
		color: #999;
	}

	.s-pop-btn {
		width: 462rpx;
		height: 78rpx;
		background: #fb3024;
		border-radius: 39rpx;
		text-align: center;
		line-height: 1.2;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #fff;
		margin: 0 auto;
		margin-bottom: 68rpx;
	}

	.pop-box {
		width: 95%;
		box-sizing: border-box;
		position: fixed;
		top: 40rpx;
		// bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background-color: #ffffff;
		border-radius: 15rpx;
		z-index: 100;
		padding-bottom: 60rpx;
		max-height: 90vh;
		overflow-y: auto;
	}

	.pop-bg {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 98;
		background-color: rgba(0, 0, 0, 0.6);
	}
</style>