<template>
	<view>
		<view class="wx_view">
			<view class="">
				报名登录
			</view>
			<u-notify ref="zNotify" message=""></u-notify>
			<view class="scorll_view" v-if="!show_wait">
				<view class="">
					<u--input :placeholder="form[0].remark" border="none" clearable inputAlign="center"
						v-model="datalist.nickname" v-if="form[0].choose"
						style="width: 88%;margin: 62rpx auto 32rpx auto;background-color: #F2F2F4;border-radius: 10rpx;font-size: 28rpx;padding: 20rpx 0;">
					</u--input>
					<u--input :placeholder="form[1].remark" border="none" maxlength="11" clearable type="number"
						inputAlign="center" v-model="datalist.phone" v-if="form[1].choose"
						style="width: 88%;margin: 62rpx auto 32rpx auto;background-color: #F2F2F4;border-radius: 10rpx;font-size: 28rpx;padding: 20rpx 0;">
					</u--input>
					<view class="input_imgcode" v-if="form[1].phone_on && form[1].choose">
						<u--input placeholder="请输入图片验证码" border="none" inputAlign="center" v-model="datalist.imageCode"
							style="width: 52.5%;background-color: #F2F2F4;border-radius: 10rpx;font-size: 28rpx;padding: 20rpx 0;float: left;">
						</u--input>
						<u--image :showLoading="true" :src="code_src" width="280rpx" height="88rpx"
							@click="clickcodeimg" style="float: left;margin-left: 5%;"></u--image>
					</view>
					<view class="input_imgcode" v-if="form[1].phone_on && form[1].choose">
						<u--input placeholder="请输入短信验证码" border="none" inputAlign="center" v-model="datalist.code"
							style="width: 52.5%;background-color: #F2F2F4;border-radius: 10rpx;font-size: 28rpx;padding: 20rpx 0;float: left;">
						</u--input>
						<view class="btn_getsms">
							<u-notify ref="uNotify" message=""></u-notify>
							<u-code :seconds="seconds" ref="uCode" @change="codeChange" @start="start"></u-code>
							<u-button @tap="getCode"
								style="border: 2rpx solid #276EE8;outline: none;color: #276EE8;margin-top: 4rpx;">
								{{tips}}
							</u-button>
						</view>
					</view>
					<view class="" v-for="(item,index) in form" v-if="index>1 && form[index].choose">
						<u--input :placeholder="item.remark" border="none" clearable inputAlign="center"
							v-model="item.val" v-if="form[0].choose"
							style="width: 88%;margin: 62rpx auto 32rpx auto;background-color: #F2F2F4;border-radius: 10rpx;font-size: 28rpx;padding: 20rpx 0;">
						</u--input>
					</view>
				</view>
			</view>
			<view class="btn_smslogin" @click="sumbit"  v-if="!show_wait">
				登录
			</view>
			<view class="" v-if="show_wait">
				<view class="" style="padding: 50rpx;font-size: 26rpx;">
					报名信息已提交，请等待管理员审核
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "sign_login",
		props: {
			logintype: Object
		},
		components: {},
		data() {
			return {
				tel: '',
				icode: '',
				smscode: '',
				is_show: true,
				agree_agreement: true,
				authorization_info: {},
				code_src: '',
				numrandom: '',
				seconds: 60,
				tips: '获取验证码',
				form: [],
				datalist: {
					nickname: '',
					phone: '',
					subject: '',
					uniqueCode: '',
					code: '',
					time: '',
					imageCode: '',
					type: '',
				},
				show_wait:false
			};
		},
		created() {
			this.clickcodeimg()
			this.checkwatchtype()
			this.form = JSON.parse(this.logintype.applyJson)
		},
		mounted() {
			
		},
		methods: {
			start() {

			},
			//图片验证码
			clickcodeimg() {
				this.numrandom = Date.now() + Math.random(0, 9);
				this.code_src = "https://oc-testapi.finezb.com/ocLogin/generateValidateCode?time=" + this.numrandom;
			},
			codeChange(text) {
				this.tips = text;
			},
			//获取短信验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					this.$api.sendsms(this.tel, this.numrandom, this.icode).then(res => {
						console.log(res);
						if (res.data.code === 200) {
							this.$refs.uNotify.show({
								top: 30,
								type: 'success',
								message: '发送成功',
								duration: 1000 * 3,
								fontSize: 20,
								safeAreaInsetTop: true
							})
							this.$refs.uCode.start();
						} else {
							this.$refs.uNotify.show({
								top: 30,
								type: 'error',
								message: res.data.msg,
								duration: 1000 * 3,
								fontSize: 20,
								safeAreaInsetTop: true
							})
						}

					})
					// 通知验证码组件内部开始倒计时
				} else {
					this.$refs.uNotify.show({
						top: 30,
						type: 'warning',
						message: '请在倒计时结束后再试',
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop: true
					})
				}
			},
			//验证观看方式是否认证
			checkwatchtype() {
				this.$api.roomwatchytypeverify().then(res => {
					if (res.data.code === 200) {} else {
						if (res.data.data == 1) {
							this.show_wait = true
						}
					}
				})
			},
			sumbit(){
				var that = this
			      if(that.form.length>2){
			        for(var index in that.form){
			          if(index > 1){
			            var title = that.form[index].title
			            var val = that.form[index].val
			            if (that.form[index].choose) {
			              var sub = title+':'+val+","
			              that.datalist.subject = that.datalist.subject + sub
			            }
			          }
			        }
			      }
			      console.log(that.datalist);
			      that.$api.roomwatchytypesubmit(that.datalist).then(res=>{
			        if(res.data.code == 200){
			         that.$refs.zNotify.show({
			         	top: 30,
			         	type: 'success',
			         	message: '报名成功',
			         	duration: 1000 * 3,
			         	fontSize: 20,
			         	safeAreaInsetTop: true
			         })
			        setTimeout(() => {
			            location.reload()
			          }, 1000);
			        }
			      })
			    },
		}
	}
</script>

<style>
	.wx_view {
		text-align: center;
		font-size: 30rpx;
		padding-top: 68rpx;
		padding-bottom: 80rpx;
	}

	.wx_view>img {
		width: 122rpx;
		height: 122rpx;
	}

	.wx_btn {
		width: 520rpx;
		height: 96rpx;
		background: #00E36B;
		border-radius: 60rpx;
		margin: 80rpx auto 24rpx auto;
		line-height: 96rpx;
		color: #fff;
	}

	.wx_btn img {
		width: 52rpx;
		height: 52rpx;
		vertical-align: middle;
		margin: 0 16rpx;
	}

	.wx_canelbtn {
		width: 520rpx;
		font-size: 24rpx;
		height: 96rpx;
		background: #EEEEEE;
		border-radius: 60rpx;
		margin: 0 auto;
		line-height: 96rpx;
		color: #777777;
	}

	.agreement_view {
		font-size: 20rpx;
		margin-top: 100rpx;
		padding: 0 50rpx;

	}

	.check_agreement {
		display: inline-block;
		vertical-align: middle;
		margin-right: 20rpx;
		width: 28rpx;
		height: 28rpx;
		background-color: #00E36B;
		border-radius: 50%;
	}

	.agreement_view a {
		text-decoration: none;
	}

	.notcheck_agreement {
		display: inline-block;
		vertical-align: middle;
		margin-right: 20rpx;
		width: 25rpx;
		height: 25rpx;
		border: 1rpx solid #ccc;
		border-radius: 50%;
	}

	.input_imgcode {
		width: 88%;
		margin: 30rpx auto;
		overflow: hidden;
	}

	.btn_getsms {
		float: right;
		width: 280rpx;
	}

	.btn_smslogin {
		width: 686rpx;
		height: 80rpx;
		background: #256EE7;
		border-radius: 40rpx;
		margin: 80rpx auto 5rpx auto;
		line-height: 80rpx;
		color: #fff;
		font-size: 30rpx;
	}

	.scorll_view {
		max-height: 600rpx;
		overflow-y: scroll;
	}
</style>
