<template>
	<view class="pb100">
		<view class="form-title">{{ $t('w_0065') }}</view>
		<view class="form-group mb20">
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{ $t('MY_ORD_10') }}
				</view>
				<input class="form-input" type="text" v-model="FormData.recName" :placeholder="$t('S_C_70') + $t('MY_ORD_10') + $t('PER_DA_14')" />
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{ $t('w_0052') }}
				</view>
				<input class="form-input" type="text" v-model="FormData.recPhone" :placeholder="$t('w_0053')" />
			</view>
			<view class="form-item" @click="showMulLinkageThreePicker">
				<view class="form-label">
					<text class="domation mr10">*</text>
					{{ $t('w_0068') }}
				</view>
				<input class="form-input" disabled type="text" v-model="FormData.nameList" :placeholder="$t('CK_KS_38')" />
				<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 class="form-textarea" v-model="FormData.recAddress" :placeholder="$t('w_0070')" />
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="white mr10">*</text>
					{{ $t('MY_WAL_22') }}
				</view>
				<textarea auto-height class="form-textarea" v-model="FormData.remark" placeholder="" />
			</view>
		</view>
		<view class="form-title">{{ $t('w_0073') }}</view>
		<view class="prefecture form-group mb20">
			<view class="d-b-s address-item" v-for="(item, index) in memberAddress" :key="index">
				<view class="radio-check  d-c-c" :class="{ checked: checkedindex == index }" @click.stop="checkedFunc(item, index)">
					<u-icon name="checkbox-mark" color="#fff" size="26rpx"></u-icon>
				</view>
				<view class="flex-1">
					<view class="f28 gray3 fb mb10 d-s-s">
						{{ item.recName }}
						<text class="small-text-btn" v-if="item.isDefault == 1">{{ $t('w_0263') }}</text>
					</view>
					<!-- <view class="f26 gray3 mb10">{{item.recPhone}}</view> -->
					<view class="f24 gray9">{{ item.recArea }}</view>
				</view>
				<view class="d-c-c">
					<view class="icon-box plus d-c-c ml30" @click="gotoPage('/pages/user/address/edit?pkId=' + item.pkId)">
						<image class="add_icon_img edit" src="/static/icon/add-edit.png" mode="aspectFill"></image>
					</view>
					<view class="icon-box plus d-c-c ml30" @click="delAddress(item.pkId)">
						<image class="add_icon_img delete" src="/static/icon/add-delete.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="product-box">
			<view class="product-title">{{ $t('w_0077') }}</view>
			<view class="product-list order-product">
				<view v-for="(item, index) in productList" :key="index" class="product-item">
					<view class="d-b-s mb20">
						<image class="product-img" :src="item.cover" mode=""></image>
						<view class="product-info d-c d-b-s flex-1">
							<view class="text-ellipsis-2 f28 gray3">{{ item.productName }}</view>
						</view>
						<view class="f24 gray9 ml20">X{{ FormData.quantity }}</view>
					</view>
					<view class="mb10 gray9 f26">{{ $t('MN_F_41') }}：{{ item.specsName }}</view>
				</view>
				<view class="ww100 pt30">
					<view class="d-b-c mb20">
						<view class="flex-1 f26 gray9">{{ $t('w_0071') }}</view>
						<view class="f26 gray3">{{ currencyIcon() }}{{ postageData || '0.00' }}</view>
					</view>
				</view>
			</view>
		</view>
		<button class="normal-sub-btn" style="margin-top: 37rpx;" @click="subFunc">{{ $t('MY_CK_13') }}</button>
		<mpvueCityPicker v-if="is_load" ref="mpvueCityPicker" :province="province" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvueCityPicker>
	</view>
</template>

<script>
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
export default {
	components: {
		mpvueCityPicker
	},
	data() {
		return {
			is_load: false,
			productList: [],
			/* 地址 */
			cityPickerValueDefault: [0, 0, 0],
			province: [],
			checkedindex: 0,
			showPop: true,
			FormData: {
				pkId: '',
				quantity: '',
				recAddress: '',
				recCity: '',
				recCounty: '',
				recName: '',
				recPhone: '',
				recProvince: '',
				nameList: ''
			},
			postageData: '0.0',
			memberAddress: []
		};
	},
	onLoad(e) {
		this.FormData.quantity = e.quantity;
		this.FormData.pkId = e.pkId;
		this.getAreaData();
	},
	onShow() {
		this.getMemberAddress();
		this.getData();
	},
	methods: {
		postage() {
			let self = this;
			this._get(
				'activity/api/pick/postage',
				{
					quantity: self.FormData.quantity,
					pkId: self.FormData.pkId,
					recProvince: self.FormData.recProvince,
					recCity: self.FormData.recCity
				},
				res => {
					self.postageData = res.data;
				}
			);
		},
		// 获取省市区
		getData() {
			let self = this;
			self._get(
				'activity/api/pick/detail',
				{
					quantity: self.FormData.quantity,
					pkId: self.FormData.pkId
				},
				function(res) {
					self.productList = res.data.detailList;
				}
			);
		},
		// 获取省市区
		getAreaData() {
			let self = this;
			self._get('system/api/area/tree', {}, function(res) {
				self.province = res.data;
				self.is_load = true;
			});
		},
		/*三级联动选择*/
		showMulLinkageThreePicker() {
			this.$refs.mpvueCityPicker.show();
		},
		checkedFunc(e, n) {
			this.checkedindex = n;
			this.FormData.recName = e.recName;
			this.FormData.recPhone = e.recPhone;
			this.FormData.recProvince = e.recProvince;
			this.FormData.recCity = e.recCity;
			this.FormData.recCounty = e.recCounty;
			this.FormData.nameList = e.recArea;
			this.FormData.recAddress = e.recAddress;
			this.FormData.dizhi = [e.recProvince, e.recCity, e.recCounty];
			this.postage();
		},
		/*确定选择的省市区*/
		onConfirm(e) {
			let self = this;
			self.FormData['rec' + 'Province'] = e.cityCode[0];
			self.FormData['rec' + 'City'] = e.cityCode[1];
			self.FormData['rec' + 'County'] = e.cityCode[2];
			self.FormData.nameList = self.getAddName();
			self.postage();
		},
		getAddName: function() {
			let self = this;
			let pid = 0;
			let cid = 0;
			let aid = 0;
			let defaultValue = [0, 0, 0];
			pid = self.FormData['rec' + 'Province'];
			cid = self.FormData['rec' + 'City'];
			aid = self.FormData['rec' + 'County'];
			defaultValue = self.cityPickerValueDefault;
			let address = self.getAddressName(pid, cid, aid, defaultValue);
			return address;
		},
		/* 省市区回显 */
		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;
		},
		getMemberAddress() {
			let self = this;
			return new Promise((resolve, reject) => {
				self._get('member/api/member-address/list', {}, function(res) {
					if (res.code == 200) {
						self.memberAddress = res.data;
						let e = self.memberAddress[0];
						self.FormData.recName = e.recName;
						self.FormData.recPhone = e.recPhone;
						self.FormData.recProvince = e.recProvince;
						self.FormData.recCity = e.recCity;
						self.FormData.recCounty = e.recCounty;
						self.FormData.nameList = e.recArea;
						self.FormData.recAddress = e.recAddress;
						self.FormData.dizhi = [e.recProvince, e.recCity, e.recCounty];
						self.postage();
						resolve(true);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						resolve(false);
					}
				});
			});
		},
		/*删除地址*/
		delAddress(e) {
			let self = this;
			wx.showModal({
				title: self.$t('w_0034'),
				content: self.$t('w_0088'),
				success: function(o) {
					o.confirm &&
						self._delete('member/api/member-address/' + e, {}, function(result) {
							if (result.code == 1) {
								uni.showToast({
									title: self.$t('w_0089'),
									duration: 2000
								});
								self.getMemberAddress();
							}
						});
				}
			});
		},
		closeFunc(e) {
			console.log(e);
			if (e) {
			}
			this.showPop = false;
		},
		subFunc() {
			let self = this;
			let params = self.FormData;
			self._post('activity/api/pick/order', params, res => {
				self.gotoPage('/pages/order/cashier?orderCode=' + res.data + '&specialArea=8');
			});
		}
	}
};
</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: #fff;
	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: 170rpx;
			flex-shrink: 0;
			word-break: break-all;
			margin-right: 20rpx;
			font-size: 28rpx;
		}
		.disabled-input {
			width: 450rpx;
			height: 78rpx;
			padding: 0 18rpx;
			line-height: 78rpx;
			background: #eee;
			font-size: 28rpx;
			color: #333;
			flex: 1;
		}
		.form-textarea {
			width: 450rpx;
			padding: 0 18rpx;
			line-height: 1.5;
			font-size: 28rpx;
			color: #333;
			flex: 1;
			background: #fff;
		}
		.form-input {
			width: 450rpx;
			height: 78rpx;
			padding: 0 18rpx;
			line-height: 78rpx;
			background: #fff;
			font-size: 28rpx;
			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;
}
.radiogroup::v-deep uni-radio:not([disabled]) .uni-radio-input:hover {
	border-color: #eee;
}
.radio-check {
	width: 34rpx;
	height: 34rpx;
	background: #ffffff;
	border: 1rpx solid #dddddd;
	border-radius: 50%;
	box-sizing: border;
	position: relative;
	margin-right: 20rpx;
	flex-shrink: 0;
}
.radio-check.checked {
	border: 1rpx solid #fb3024;
	background: #fb3024;
}
.product-box {
	padding: 26rpx 18rpx 36rpx 20rpx;
	background: #ffffff;
	margin-bottom: 20rpx;
	.product-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 5rpx;
		font-weight: bold;
		border-bottom: 1rpx solid #eee;
		padding-bottom: 28rpx;
	}
}
</style>
