<template>
	<BaseContainer class="cooperation-apply">
		  <NavBar title="出国留学" />
			<view class="cooperation-form">
				<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 class="gold-box flex">
				<label class="radio">
					<radio value="意向金" :checked="true" color="#FF9500" /><text>意向金：</text>
				</label>
				<view class="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 {
		applycooperation,
    delSpecialOrder,
		getInitData
	} from "@/api/special";
	
	
	export default {
		components: {
			PayDialog,
		},
		data() {
			return {
				special_id: '',
				applyForm: {
					real_name: '',
					mobile: '',
					recommend_user: '',
					address: '',
				},
				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();
		},
		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,
			    });
			  });
			},
			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("请输入详细地址");
				}
				this.payDialogOpen = true;
				// } else {
				// 	this.submitApply();
				// }
			},
			async submitApply() {
				uni.showLoading({ mask: true });
				try {
				  const { data, msg } = await applycooperation({
				    oc_id: this.special_id,
				    ...this.applyForm
				  });
				  uni.hideLoading();
				  this.$util.showMsg('报名成功');
					uni.navigateBack();
				} catch (err) {
				  uni.hideLoading();
				  this.$util.showMsg(err.msg);
				}
			},
			changeVal(opt) {
				if (typeof opt !== "object") {
				  opt = {};
				}
				console.log(opt);
				var action = opt.action || "";
				var value = opt.value || "";
				this[action] && this[action](value);
			},
			// 支付完成后回调事件
			pay_order: function (data) {
			  this.orderId = data.data.result.orderId || "";
			  switch (data.data.status) {
			    case "PAY_ERROR":
			    case "ORDER_EXIST":
			    case "ORDER_ERROR":
			      this.extendOrder(data.msg);
			      break;
			    case "WECHAT_PAY":
			      // this.wechatPay(data.data.result.jsConfig);
            this.$util.weixinAppPay(data.data.result.jsConfig,this);
			      break;
			    case "WECHAT_H5_PAY":
			      this.payDialogOpen = false;
			      this.$util.wechatH5Pay(data.data.result.jsConfig, this);
			      break;
			    case "WECHAT_ROUTINE_PAY":
			      this.$util.wechatRoutinePay(data.data.result.jsConfig, this);
			      break;
			    case "SUCCESS":
			      this.successOrder(data.msg);
			      break;
			    case "ZHIFUBAO_PAY":
			      this.aliPay(data.data.result, "datadownload");
			      break;
			    case 'TOUTIAO_PAY':
			      this.$util.toutiaoPay(data.data.result.jsConfig, this);
			      break;
			    case 'KUAISHOU_PAY':
			      this.$util.kuaishouPay(data.data.result.jsConfig, this);
			      break
			  }
			},
			extendOrder(msg) {
			  if (typeof msg === "object" && msg.errMsg === "chooseWXPay:cancel") {
			    msg = "微信支付取消";
			  } else {
			    msg = "支付失败";
			  }
			  this.$util.showMsg(msg);
			  this.payDialogOpen = false;
			  if (this.orderId) {
			    delSpecialOrder(this.orderId);
			  }
			},
			wechatPay(config) {
			  this.$util.weixinpay(config, this);
			},
			successOrder(msg) {
			  this.$util.showMsg(msg ? msg : "支付成功");
			  this.payDialogOpen = false;
				this.submitApply();
			},
      aliPay(msn, type) {
        this.$util.aliPay(msn, type, this);
      },
		},
	}
</script>

<style lang="scss" scoped>
.cooperation-apply {
	background: linear-gradient(to top, #f6f6f6 0%, #f6f6f6 60%, #F6F8FA 70%, #A1BFFD 100%);
}
.input-placeholder {
	color: #999;
	font-size: 24rpx;
}
.cooperation-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;
	.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>