<template>
	<view>
		<view class="pop-bg" @click="closeFunc(null)"></view>
		<view class="pb100 pop-box">
			<form @submit="formSubmit" @reset="formReset">
				<view class="form-group">
					<view class="form-item">
						<view class="form-label">
							<text class="domation mr10">*</text>
							{{ $t('w_0052') }}
						</view>
						<input v-model="phone" :disabled="true" class="form-input" type="text" value=""
							:placeholder="$t('w_0134')" />
					</view>
					<view class="form-item">
						<view class="form-label">
							<text class="domation mr10">*</text>
							{{ $t('MY_WAL_22') }}
						</view>
						<textarea v-model="form.remark" auto-height class="form-textarea" value=""
							:placeholder="$t('w_0072')" />
					</view>
					<view class="form-item" style="display: block;">
						<view class="f26 gray3 pt20 mb10">{{ $t('MY_CK_20') }}：</view>
						<view class="f26 gray9 line-h-2">
							<u-parse :content="
					`<p>1.`+$t('MY_CK_21')+`</p>
					<p>2.`+$t('MY_CK_22')+`</p>
					<p>3.`+$t('MY_CK_23')+`</p>
					<p>4.`+$t('MY_CK_24')+`</p>`
								"></u-parse>
						</view>
					</view>
				</view>
				<button class="normal-sub-btn" form-type="submit"
					style="margin-top: 37rpx;">{{ $t('MY_CK_25') }}</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="f36 tc mb30 fb" style="color: #333333;">
						{{ $t('MY_CK_26') }}:{{ order.selfCode }}
						<text class="domation f26 ml20" @click="copyMes(order.selfCode)">{{ $t('MY_CK_27') }}</text>
					</view>
					<view class="f28 gray3 line-h-2">{{ $t('MY_ORD_80') }}</view>
					<view class="f26 gray6 line-h-2">{{$t('MY_CK_23')}}</view>
					<view class="f26 gray6 line-h-2 mb40">{{ $t('CK_KS_23') }}</view>
					<button class="s-pop-btn" @click="hidePopupFunc(true)">{{ $t('MY_WAL_23') }}</button>
				</view>
			</Popup>
		</view>
	</view>
</template>

<script>
	import Popup from '@/components/uni-popup.vue';
	export default {
		components: {
			Popup
		},
		data() {
			return {
				form: {
					orderCode: '',
					phone: '',
					remark: ''
				},
				order: {
					phone: '', //联系方式
					selfCode: '', //提货码
					orderCode: '', //订单编号
					centerCodeId: '',
					pkSettleCountry: '',
					pkCreator: '',
					remark: '' //备注
				},
				isPopup: false,
				/*是否已发验证码*/
				is_send: false,
				/*发送按钮文本*/
				send_btn_txt: this.$t("w_0055"),
				/*当前秒数*/
				second: 60,
				textContent: ''
			};
		},
		props: ['module', 'orderCode', 'phone'],
		methods: {
			formSubmit: function(e) {
				let self = this;
				var formdata = self.form;
				// if (formdata.phone == '') {
				// 	uni.showToast({
				// 		title: '请输入手机号',
				// 		duration: 1000,
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				// if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(formdata.phone)) {
				// 	uni.showToast({
				// 		title: '手机有误,请重填！',
				// 		duration: 2000,
				// 		icon: 'none'
				// 	});
				// 	return;
				// }
				formdata.phone = self.phone;
				formdata.orderCode = self.orderCode;
				if (formdata.remark == '') {
					uni.showToast({
						title: '请输入备注',
						duration: 1000,
						icon: 'none'
					});
					return false;
				}
				self._post('sale/api/order/self-pick-up', formdata, function(res) {
					self.showSuccess(res.msg, function() {
						self.order.selfCode = res.data.selfCode;
						self.isPopup = true;
						// // #ifndef H5
						// uni.navigateBack({
						// 	delta: parseInt(self.delta)
						// });
						// // #endif
						// // #ifdef H5
						// history.go(-self.delta);
						// // #endif
					});
				});
			},
			closeFunc(e) {
				this.$emit('close', e);
			},
			hidePopupFunc() {
				this.isPopup = false;
				this.closeFunc(true);
			},
			copyMes(message) {
				uni.setClipboardData({
					data: message,
					showToast: true,
					success: function() {
						uni.showToast({
							icon: 'none',
							title: self.$t('MY_CK_29')
						});
					}
				});
			}
		}
	};
</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: 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;
	}

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

	.get-code-btn {
		min-width: 72rpx;
		height: 62rpx;
		background: #333333;
		line-height: 62rpx;
		padding: 0rpx 20rpx;
		border-radius: 40rpx;
		white-space: nowrap;
		// border: 1rpx solid $dominant-color;
		color: #ffffff;
		box-sizing: border-box;
		margin-left: 46rpx;
		font-size: 24rpx;
	}

	.get-code-btn[disabled='true'] {
		// border: 1rpx solid #cccccc;
		color: #333;
		background-color: #ffffff;
	}

	.card-pic {
		width: 316rpx;
		height: 192rpx;
	}

	.pop-bg {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.7);
		z-index: 98;
	}

	.pop-box {
		position: fixed;
		top: 20%;
		left: 0;
		right: 0;
		width: 690rpx;
		margin: auto;
		background: #fff;
		z-index: 99;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.normal-sub-btn {
		width: 60%;
	}
</style>