<template>
	<view class="pb20">
		<!-- 收货人信息 -->
		<view class="form-title d-b-c">
			<text>
				<!-- 收货人信息 -->
				{{$t('w_0065')}}
			</text>
		</view>
		<view class="prefecture 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="form.recName" placeholder="" />
			</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="form.recPhone" placeholder="" />
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					<!-- 收货地址 -->
					{{$t('w_0068')}}
				</view>
				<input class="form-input" disabled type="text" v-model="form.diqu" placeholder=""
					@click="showAddPicker" />
				<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="form.recAddress" placeholder="" />
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					<!-- 邮费 -->
					{{$t('w_0071')}}
				</view>
				<input class="form-input" disabled type="text" :value="formatNum(form.postage)" />
			</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.remark" placeholder="" />
			</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 detail.pgpList" :key="index" class="product-item">
					<view class="d-b-s mb20">
						<image class="product-img" :src="item.cover1 || item.cover" mode=""></image>
						<view class="product-info d-c d-b-s flex-1">
							<view class="text-ellipsis-2 f28 gray3">{{ item.waresName || item.productName }}</view>
							<view v-if="item.waresSkuList" class="f22 gray6">{{item.waresSkuList[0].specValueNames}}
							</view>
							<view class="price-color f24">
								{{currencyIcon()}}
								<text class="f32 fb">{{ formatNum(item.price || item.waresPrice) }}</text>
							</view>
						</view>
						<view class="f24 gray9 ml20">X{{ item.quantity }}</view>
					</view>
				</view>
				<view class="ww100 pt30">
					<view class="d-b-c mb20">
						<view class="flex-1 f26 gray9">{{$t('w_0083')}}</view>
						<view class="f26 gray3">{{currencyIcon()}}{{ formatNum(detail.price) }}</view>
					</view>
					<!-- 	<view class="d-b-c mb20">
						<view class="flex-1 f26 gray9">{{$t('w_0071')}}</view>
						<view class="f26 gray3">{{currencyIcon()}}{{ formatNum(form.postage) || '0.00' }}</view>
					</view> -->
					<!-- <view class="d-b-c mb20">
						<view class="flex-1 f26 gray9">复购券抵扣</view>
						<view class="f26 gray3">{{currencyIcon()}}1400</view>
					</view> -->
					<!-- <view class="d-b-c mb20">
						<view class="flex-1 f26 gray9">总价</view>
						<view class="f26 gray3">{{currencyIcon()}}{{form.priceAmount}}</view>
					</view> -->
					<!-- <view class="d-b-c mb20">
						<view class="flex-1 f26 gray9">{{$t('ENU_TOTAL_V_1')}}</view>
						<view class="f26 gray3">{{currencyIcon()}}{{ formatNum(form.achieveAmount) }}</view>
					</view> -->
				</view>
			</view>
		</view>
		<button class="normal-sub-btn" style="margin-top: 37rpx;" @click="subFunc">{{$t('w_0085')}}</button>
		<mpvue-city-picker v-if="is_load" ref="mpvueCityPicker" :province="province"
			:pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	export default {
		components: {
			mpvueCityPicker
		},
		data() {
			return {
				detail: {},
				province: [],
				is_load: false,
				cityPickerValueDefault: [0, 0, 0],
				form: {
					deliveryName: "快递发货",
					deliveryWay: 1,
					diqu: "",
					pkGradeVal: "",
					pkNewPeople: 0,
					postPrice: 0,
					postage: "0.00",
					recAddress: "",
					recCity: 35,
					recCounty: 37,
					recName: "",
					recPhone: "",
					recProvince: 1,
					specialArea: 9,
					transType: 1
				},
				specialArea: 9
			}
		},
		onLoad(e) {
			if (e.data) {
				this.detail = JSON.parse(decodeURIComponent(e.data));
				this.form.pkNewPeople = this.detail.pkNewPeople;
				console.log(this.detail)
			}
			this.getInfo();
		},
		onShow() {
			this.getGenerate();
		},
		methods: {
			/* 生成token */
			getGenerate() {
				let self = this;
				self._get('system/api/idempotent/generate', {}, res => {
					uni.setStorageSync('token', res.msg);
				});
			},
			subFunc(){
				let self =this;
				let params = this.form;
				let flag = false;
				let values = [];
				values.push({
					name: this.$t('w_0067'),
					value: 'recName',
					callback: function(e) {
						return e != '';
					}
				}, {
					name: this.$t('w_0053'),
					value: 'recPhone',
					callback: function(e) {
						return e != '';
					}
				}, {
					name: this.$t('w_0070'),
					value: 'recAddress',
					callback: function(e) {
						return e.length != '';
					}
				}, {
					name: this.$t('w_0069'),
					value: 'diqu',
					callback: function(e) {
						return e.length != '';
					}
				});
				values.forEach((item, index) => {
					if (!flag && !item.callback(params[item.value])) {
						flag = item.name;
						return;
					}
				});
				if (flag) {
					uni.showToast({
						title: flag,
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				self._post('sale/api/order/confirm-gift-order',params,res=>{
					self.gotoPage('/pages/order/cashier?pkSettleCountry=1&specialArea=9&orderCode='+res.data.orderCode)
				})
			},
			/* 查询邮费 */
			selfOrderPostage() {
				let self = this;
				self._post(
					'sale/api/order/self-order-postage', {
						specialArea: self.specialArea,
						pkNewPeople: self.detail.pkNewPeople
					},
					res => {
						self.form.postage = res.data.postage;
					}
				);
			},
			showAddPicker() {
				this.$refs.mpvueCityPicker.show();
			},
			getInfo() {
				let self = this;
				self._get('member/api/member/get-info', {}, res => {
					self.userCountry = res.data.pkSettleCountry;
					self.getAreaData();
				})
			},
			// 获取省市区
			getAreaData() {
				let self = this;
				self._get('system/api/area/tree', {
					pkCountry: self.userCountry
				}, function(res) {
					self.province = res.data;
					self.is_load = true;
				});
			},
			/*三级联动选择*/
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show();
			},

			/*确定选择的省市区*/
			onConfirm(e) {
				let self = this;
				self.form['recProvince'] = e.cityCode[0]*1;
				self.form['recCity'] = e.cityCode[1]*1;
				self.form['recCounty'] = e.cityCode[2]*1;
				self.form.diqu = self.getAddName();
				self.selfOrderPostage();
			},
			getAddName: function() {
				let self = this;
				let pid = 0;
				let cid = 0;
				let aid = 0;
				let defaultValue = [0, 0, 0];
				pid = self.form['recProvince'];
				cid = self.form['recCity'];
				aid = self.form['recCounty'];
				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;
			},
		}
	}
</script>

<style lang="scss">
	.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;
		}
	}

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

	.form-title.redtitle {
		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;
	}

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

	.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;
	}
</style>