<template>
	<BaseContainer class="offline-apply">
		  <NavBar title="线下课预约" />
			<view class="offline-form">
				<view class="offline-info flex">
					<image :src="specialInfo.pic" mode="aspectFill"></image>
					<view class="offline-info-detail">
						<view class="name">{{ specialInfo.title }}</view>
						<view class="advert-info">
							<image src="@/static/images/advert-time.png" mode="aspectFill"></image>
							报名时间：{{ specialInfo.apply_start_time }} - {{ specialInfo.apply_end_time }}
						</view>
						<view class="advert-info">
							<image src="@/static/images/advert-time.png" mode="aspectFill"></image>
							活动时间：{{ specialInfo.start_time }} - {{ specialInfo.end_time }}
						</view>
						<view class="advert-info">
							<image src="@/static/images/advert-position.png" mode="aspectFill"></image>
							活动地址：{{ specialInfo.address }}
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="item-label"><text>姓名</text>：</view>
					<view class="item-content">
						<input type="text" v-model="applyForm.real_name" placeholder="请输入姓名" placeholder-class="input-placeholder"/>
					</view>
				</view>
				<view class="form-item">
					<view class="item-label"><text>电话</text>：</view>
					<view class="item-content">
						<input type="text" v-model="applyForm.mobile" placeholder="请输入电话" placeholder-class="input-placeholder"/>
					</view>
				</view>
				<view class="form-item">
					<view class="item-label"><text>推荐人</text>：</view>
					<view class="item-content">
						<input type="text" v-model="applyForm.recommend_user" placeholder="请输入推荐人" placeholder-class="input-placeholder"/>
					</view>
				</view>
				<view class="form-item">
					<view class="item-label"><text>详细地址</text>：</view>
					<view class="item-content">
						<input type="text" v-model="applyForm.address" placeholder="请输入详细地址" placeholder-class="input-placeholder"/>
					</view>
				</view>
			</view>
			<view v-if="specialInfo.gold" class="gold-box flex">
				<label class="radio">
					<radio value="意向金" :checked="true" color="#FF9500" /><text>意向金：</text>
				</label>
				<view class="gold">￥{{ specialInfo.gold || 200 }}</view>
			</view>
			<view class="apply-btn" @click="apply">立即报名</view>
			<PayDialog v-if="initDataLoading" :open.sync="payDialogOpen" :money="Number(money)" :now_money="now_money"
				:pay_type_num="pay_type_num" :special_id="Number(special_id)" :is-wechat="isWechat" :is-alipay="is_alipay" :is-balance="is_yue"
				:template-id="templateId" :wxpay-h5="wxpayH5" @change="changeVal" />
	</BaseContainer>
</template>

<script>
	import PayDialog from "@/components/PayDialog/index.vue";
	import {
	  getOfflineSpecialInfo,
		applyOffline,
		getInitData
	} from "@/api/special";
	
	
	export default {
		components: {
			PayDialog,
		},
		data() {
			return {
				special_id: '',
				specialInfo: {},
				applyForm: {
					real_name: '',
					mobile: '',
					recommend_user: '',
					address: '',
				},
				payDialogOpen: false,
				payDialogOpen: false, // 是否显示支付弹窗
				money: 200.0,
				pay_type_num: 20,
				is_alipay: false, //支付宝是否开启
				is_yue: false, //余额是否开启
				now_money: 0, //余额
				templateId: "",
				wxpayH5: false,
				initDataLoading: false,
			};
		},
		
		onLoad(options) {
		  this.special_id = options.id;
			this.getInitData();
		  this.getOfflineSpecialInfo();
		},
		methods: {
			getInitData() {
			  getInitData().then(({ data }) => {
			    const { isWechat, is_alipay, is_yue, now_money, wxpayH5 } = data;
			    Object.assign(this, {
			      isWechat,
			      url: isWechat ? "/pages/index/login" : "/pages/login/phone_check",
			      is_alipay: is_alipay == 1,
			      is_yue: is_yue == 1,
			      now_money: Number(now_money),
			      wxpayH5,
			      initDataLoading: true,
			    });
			  });
			},
			getOfflineSpecialInfo() {
			  return getOfflineSpecialInfo(this.special_id)
			    .then(({ data }) => {
						this.specialInfo = data;
			    })
			    .catch((err) => {
			      this.$util.showMsg(err.msg);
					})
			},
			apply() {
				if (!this.applyForm.real_name) {
				  return this.$util.showMsg("请输入姓名");
				}
				if (!this.applyForm.mobile) {
				  return this.$util.showMsg("请输入电话");
				}
				if (!/^1[3456789]\d{9}$/.test(this.applyForm.mobile)) {
				  return this.$util.showMsg("电话错误");
				}
				if (!this.applyForm.recommend_user) {
				  return this.$util.showMsg("请输入推荐人");
				}
				if (!this.applyForm.address) {
				  return this.$util.showMsg("请输入详细地址");
				}
				if (this.specialInfo.gold) {
					this.payDialogOpen = true;
				} else {
					this.submitApply();
				}
			},
			async submitApply() {
				uni.showLoading({ mask: true });
				try {
				  const { data, msg } = await applyOffline({
				    oc_id: this.special_id,
				    ...this.applyForm
				  });
				  uni.hideLoading();
				  this.$util.showMsg('报名成功');
					uni.navigateBack();
				} catch (err) {
				  uni.hideLoading();
				  this.$util.showMsg(err.msg);
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
.offline-apply {
	background: linear-gradient(to top, #f6f6f6 0%, #f6f6f6 60%, #F6F8FA 70%, #A1BFFD 100%);
}
.input-placeholder {
	color: #999;
	font-size: 24rpx;
}
.offline-form {
	width: 690rpx;
	background: #fff;
	margin: 20rpx auto 0;
	box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04);
	border-radius: 10rpx;
	padding: 25rpx 30rpx 60rpx 30rpx;
	.offline-info {
		margin-bottom: 50rpx;
		image {
			width: 200rpx;
			height: 160rpx;
			margin-right: 14rpx;
		}
		.offline-info-detail {
			flex: 1;
			.name {
				color: #333333;
				font-size: 30rpx;
				line-height: 28rpx;
				padding-top: 11rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.advert-info {
				color: #999;
				font-size: 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 20rpx;
				line-height: 24rpx;
				display: flex;
				align-items: center;
				margin-top: 16rpx;
				>image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 5rpx;
				}
			}
		}
	}
	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 26rpx;
		padding: 0 10rpx;
		&:last-child {
			margin-bottom: 0;
		}
		.item-label {
			width: 140rpx;
			display: flex;
			color: #333;
			font-size: 28rpx;
			margin-right: 16rpx;
			text {
				flex: 1;
				text-align-last: justify;
			}
		}
		.item-content {
			flex: 1;
			input {
				width: 100%;
				height: 71rpx;
				background: #f7f7f7;
				border-radius: 10rpx;
				font-size: 24rpx;
				color: #333;
				padding: 0 20rpx;
			}
		}
	}
}

::v-deep .gold-box {
	width: 690rpx;
	height: 98rpx;
	background: #fff;
	margin: 20rpx auto 0;
	box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(68,68,68,0.04);
	border-radius: 10rpx;
	align-items: center;
	padding-left: 36rpx;
	color: #333;
	font-size: 28rpx;
	line-height: 98rpx;
	.uni-radio-input {
		width: 34rpx;
		height: 34rpx;
	}
	.gold {
		color: #FF9500;
	}
}
.apply-btn {
	width: 600rpx;
	height: 88rpx;
	background: linear-gradient(0deg, #0F74BB 0%, #3293FF 100%);
	border-radius: 44rpx;
	margin: 90rpx auto 0;
	color: #fff;
	font-size: 30rpx;
	text-align: center;
	line-height: 88rpx;
}
</style>