<template>
	<view>
		<view class="tabledetails">
			<!-- <el-tag type="success">标签二</el-tag> -->
			<!-- <img class="logobg" src="http://image.bjkeyware.com/static/index/cspx/13.png" alt="" /> -->
			<!--background-color: #FFFFFF; <img  class="logobg" src="http://image.bjkeyware.com/static/index/cspx/16.png" alt="" /> -->
			<view  style="padding:2vh 13px;">
				<rich-text v-if='issueinform' class="article-body" :nodes="issueinform&&issueinform.detail | filtersRichText"></rich-text>
				<u-divider v-else bg-color='transparent'>加载中...</u-divider>
				<!-- <u-image v-else src="https://cdn.uviewui.com/uview/example/fade.jpg">
					<u-loading slot="loading"></u-loading>
				</u-image> -->
			</view>
		</view>
		<view class="submitt">
			<view v-if="wxUserInfo">			
				<view v-if='currentsign&&!register' class="bottbtn"  @click="popcilk('sign')" >
					<!-- <img src="http://image.bjkeyware.com/static/index/testpx/58.png" alt=""> -->
					<p v-if="currentsign.type==0">培训报名</p>
					<p v-if="currentsign.type==1">考试报名</p>
				</view>
				<view v-else-if='register' class="bottbtn"  @click="popcilk('registered')" style="background: #909399;">
					<!-- <img src="http://image.bjkeyware.com/static/index/testpx/58.png" alt=""> -->
					<p>已报名</p>
				</view>
				<view v-else class="bottbtn"  @click="popcilk('end')" style="background: #909399;">
					<!-- <img src="http://image.bjkeyware.com/static/index/testpx/58.png" alt=""> -->
					<p >报名已结束</p>
				</view>
			</view>
			<view v-else>
				<view  class="bottbtn"  @click="onlinesign">
					<!-- <img src="http://image.bjkeyware.com/static/index/testpx/58.png" alt=""> -->
					<p >立即报名</p>
				</view>
			</view>
		</view>
		<u-popup style="background:#66666;padding: 20px;" v-model="isPopupShow" @close="close" @open="open" mode="bottom" length="80%" height='630rpx' border-radius="15" :closeable='true' :mask-close-able="false">
		    <view style="background:#66666;padding: 20px;">
				<view class='peodi'>— 填写报名信息 —</view>
				<u-line></u-line>
				<!-- <u-form :model="signobj"  ref="signobj" label-position='left' label-width='120'  border-bottom='false' >
					<u-form-item  label="姓名：" prop="name"  border-bottom='false' required='true'> -->
						<view class="sinput">
							<!-- <img src="http://image.bjkeyware.com/static/index/testpx/xingming.png" alt=""> -->
							<u-input v-model="signobj.name" placeholder='请输入您的名字'  border="true"  />
						</view>
				<!-- 	</u-form-item>
					<u-form-item  label= "QQ号：" prop="qq"  border-bottom='false' required='true'>-->
						<view class="sinput">
							<!-- <img style="height: 30px;" src="http://image.bjkeyware.com/static/index/testpx/shouji.png" alt=""> -->
							<u-input v-model="signobj.qq" placeholder='请输入您的QQ号'  border="true"  />
						</view>
				<!-- 	</u-form-item>
					<u-form-item  labe l="微信号：" prop="wechat"  border-bottom='false' required='true'>-->
						<view class="sinput">
							<!-- <img style="height: 30px;" src="http://image.bjkeyware.com/static/index/testpx/shouji.png" alt=""> -->
							<u-input v-model="signobj.wechat" placeholder='请输入您的微信号'  border="true"  />
						</view>
					<!-- </u-form-item>
				</u-form> -->
			</view>
			<u-line style="margin-top: 20px;"></u-line>
			<view class="submitt" style="justify-content: space-around;margin-top:0px;">
				<view class="button-g" style="width:43vw;background:#FFFFFF;border: 1px solid  #1578ED;color: #1578ED;margin-left: 0;" @click="resource('setes')">重置</view>
				<view class="button-g" style="width:43vw;background: linear-gradient(90deg, #FF8600, #FE2B2B);color: #FFFFFF;margin-left:2vw" @click="resource('singup')">立即报名</view>
			</view>
		</u-popup>
		<u-modal title='温馨提示' v-model="tokenshow"   content="您还没有登录" confirm-text='现在就去' cancel-text='稍等一下' show-cancel-button='true'
			cancel-color='#1578ED' confirm-color='#1578ED'  @confirm="confirms" @cancel='tokenshow=false'></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPopupShow:false,
				signobj:{name:'',qq:'',wechat:''},
				courselist:'',//培训课程列表
				wxUserInfo:null,//微信基本信息
				currentsign:null,
				register:null,
				issueId:'',
				tokenshow:false,
				issueinform:null,
				type:'',//从我的报名页跳过的
				certRules: {
					name: [{required: true, message: '请输入姓名', trigger: 'change',},
					{max: 4, message: '最多输入4个中文', trigger: 'change' },
					{
					  pattern:
					     /^(?:[\u4e00-\u9fa5·]{2,16})$/,
					  message: "请输入中文",
					  trigger: "blur",
					},],
					qq: [{ required: true, message: '请输入QQ号', trigger: 'change'},
					  {
					    pattern:
					      /^[1-9][0-9]{4,9}$/,
					    message: "请输入正确的QQ号",
					    trigger: "blur",
					  },
					  // {max:18, message: 'qq号长度为18', trigger: 'change' },/^[a-zA-Z]([-a-zA-Z0-9]{5,19})+$/
					  // {min:18, message: '身份证长度为18', trigger: 'change' },
					],
					wechat: [{ required: true, message: '请输入微信号', trigger: 'blur'},
					  {
					    pattern:
					      /^[a-zA-Z]([-a-zA-Z0-9]{5,19})+$/,
					    message: "请输入正确的微信号",
					    trigger: "blur",
					  },
					],
					
				},
			}
		},
		onReady(){
			// this.$refs.signobj.setRules(this.certRules);
		},
		filters: {
			filtersRichText(html) { //控制小程序中图片大小
				if(html){
					
					let newContent = html.replace(/<img[^>]*>/gi, (match, capture)=>{
						match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
						match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
						match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
						return match;
					});
					newContent = newContent.replace(/style="[^"]+"/gi, (match, capture)=>{
						match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
						return match;
					});
					// let newContentsss = html.replace(/<span[^>]*>/gi, (match, capture)=>{
					// 	console.log('sss---',match, capture)
					// 	if(capture==12428 || capture==12693){
					// 		match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					// 		match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					// 		match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					// 	}
					// 	return match;
					// });
					newContent = newContent.replace(/<br[^>]*\/>/gi, '');
					newContent = newContent.replace(/\<img/gi,
						'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
					// newContentsss = newContentsss.replace(/\<span/gi,
					// 	'<span style="word-wrap:break-word;width:90vw;display:block;margin:10rpx auto;"');newContentsss;
					return newContent;
				}
			}
		},
		onLoad(option) {
			this.issueId=option.issueId
			console.log('issueId',this.issueId)
			let type=option.type;
			if(type&&type==1){
				uni.setNavigationBarTitle({
					title: '我的报名'
				});

			}else{
				uni.setNavigationBarTitle({
					title: '在线报名'
				});
			}
			this.wxUserInfo = uni.getStorageSync('wxUserInfo');
			this.register = uni.getStorageSync('register');		
			// console.log('register--',this.register)
			// console.log('wxUserInfo---',this.wxUserInfo)
			// this.http.quickGet(`/train/course/list?pageNum=1&pageSize=100`).then(res=>{
			// 	 // console.log('res---', res)
			// 	 this.courselist = res.data.rows;
			// 	if(this.courselist.length>0){
			// 		this.courselist.sort((a,b)=>{
			// 			return a.orderNum-b.orderNum
			// 		})
			// 		this.courselist.forEach(item=>{
			// 			if(item.children.length>0){
			// 				item.children.sort((a,b)=>{
			// 					return a.orderNum-b.orderNum
			// 				})
			// 				if(item.orderNum==1){
			// 					item.index='一'
			// 				}else if(item.orderNum==2){
			// 					item.index='二'
			// 				}else if(item.orderNum==3){
			// 					item.index='三'
			// 				}else if(item.orderNum==4){
			// 					item.index='四'
			// 				}else if(item.orderNum==5){
			// 					item.index='五'
			// 				}
			// 			}
			// 		})
			// 	// console.log('课程培训列表--', this.courselist)
			// 	}
			// })
			this.http.quickGet(`/train/issue/detail/${this.issueId}`).then(res=>{
				console.log('报名期号信息---',res)
				this.issueinform=res.data
			})
			if(this.wxUserInfo){
				// this.issigin();
				console.log('this.wxUserInfo---',this.wxUserInfo)
				
				this.http.quickGet(`/train/issue/list`,true).then(res=>{
					// console.log('报名状态---',res)
					let statuslist=res.data
					let flag=null
					if(statuslist.length>0){							
						statuslist.forEach(item=>{
							if(item.status==1){
								flag=item
							}
						})
					}
					if(flag){
						this.currentsign=flag
					}
					console.log('当前报名类型---',this.currentsign)
				})
			}
			
		},
		methods: {
			popcilk(type){
				if(type=='sign'){
					this.isPopupShow=true
				}else if(type=='end'){
					// this.$refs.uToast.show({
					// 	title: '报名已结束',
					// 	type: 'warning',	
					// })
				}else if(type=='registered'){
					// this.$refs.uToast.show({
					// 	title: '已报名',
					// 	type: 'success',	
					// })
				}else{
					this.$refs.uToast.show({
						title: '功能暂未开通',
						type: 'info',
						// url: '/pages/index/index'
					})
				}
			},
		
			onlinesign(){
				let accessToken = uni.getStorageSync('accessToken');
				if(!accessToken){
				   this.tokenshow=true
				}else{
					this.isPopupShow=true
				}
			},
			confirms(){
				uni.navigateTo({
					url:'/pages/personal/login'
				})
			},
			open() {
			  // console.log('open');
			},
			close() {
			  this.isPopupShow = false
			  // console.log('close');
			},
			resource(type){
				if(type=='setes'){
					this.signobj={name:'',qq:'',wechat:''}
				}else{
					if(!this.signobj.name){
						this.$refs.uToast.show({
							title: '请输入姓名',
							type: 'info',
						})
						return;
					}
					if(this.signobj.name.length>4){
						this.$refs.uToast.show({
							title: '姓名最多输入4个中文',
							type: 'info',
						})
						return;
					}
					if(!/^(?:[\u4e00-\u9fa5·]{2,16})$/.test(this.signobj.name)){
						this.$refs.uToast.show({
							title: '姓名为中文',
							type: 'info',
						})
						return;
					}
					if(!this.signobj.qq){
						this.$refs.uToast.show({
							title: '请输入qq号',
							type: 'info',
						})
						return;
					}
					if(!/^[1-9][0-9]{4,9}$/.test(this.signobj.qq)){
						this.$refs.uToast.show({
							title: '请输入正确的QQ号',
							type: 'info',
						})
						return;
					}
					if(!this.signobj.wechat){
						this.$refs.uToast.show({
							title: '请输入微信号',
							type: 'info',
						})
						return;
					}
					if(!/^[a-zA-Z]([-a-zA-Z0-9]{5,19})+$/.test(this.signobj.wechat)){
						this.$refs.uToast.show({
							title: '请输入正确的微信号',
							type: 'info',
						})
						return;
					}
					// this.$refs.signobj.validate(valid => {
					// 	if (valid) { 
							let data={
								userId:this.wxUserInfo.userId,
								userName:this.wxUserInfo.userName,
								phonenumber:this.wxUserInfo.phonenumber,
								email:this.wxUserInfo.email,
								sex:this.wxUserInfo.sex,
								company:this.wxUserInfo.companyName,
								name:this.signobj.name,
								qq:this.signobj.qq,
								wechat:this.signobj.wechat,
								issueId:this.issueinform.issueId,
								// issue:this.issueinform.issue,
								category:this.currentsign.type,
							}
							console.log('data',data)
							// return;
							if(this.currentsign){
								if(this.currentsign.type==0){
									this.http.quickPost(`/train/trainApply`,data,true).then(res=>{
										if(res.data.code==200){
											this.$refs.uToast.show({
												title: '报名成功',
												type: 'success',
												// isTab:true,
												url:'pages/personal/mysignup/notice'
											})
											setTimeout(()=>{
												this.isPopupShow=false
											},1000)
											// this.issigin();
											uni.setStorageSync('register', true)
										}
									})
								}else{
									this.http.quickPost(`/train/examApply`,data,true).then(res=>{
										if(res.data.code==200){
											this.$refs.uToast.show({
												title: '报名成功',
												type: 'success',
												// isTab:true,
												url:'pages/personal/mysignup/notice'
											})
											setTimeout(()=>{
												this.isPopupShow=false
											},1000)
											// this.issigin();
											uni.setStorageSync('register', true)
										}
									})
								}
							}
				// 		}else{
				// 		console.log('验证失败',this.signobj)
				// 	}
				// })
				}
			}
		}
	}
</script>

<style>
	.tabledetails{
		width:100vw;
		/* height: 100vh; */
		/* background-color: #FFFFFF; */
		padding:0 13px 13px 13px;
	}
	.logobg {
		width:100%;
		height:32vw;
		margin-bottom:-7px;
	}
	.deyalimg{
		width:100%;
		height:4.8vw;
		margin:5px 0;
		object-fit: cover;
	}
	.statictosol{
		width:48%;
		height:200px;
		background: #FFFFFF;
		border-radius: 10rpx;
		text-align: center;
		margin-top: 20px;
		padding: 10px;
	}
	.statictosol img{
		width:26vw;
		height:21vw;
	}
	.statictosol p{
		font-size:.9rem;
		color:#808080;
		margin-bottom: 5px;
		line-height:21px
	}
	.lighr{
		width:28vw;
		height:20vw;
	}
	.practice{
		display: flex;
		justify-content:space-between;
		background-color: #FFFFFF;
		padding:13px;
		width: 100%;
		margin:15px 0;
	}
	.lighrt{
		width:22vw;
		height:22vw;
	}
	.linblue{
		width: 46rpx;
		height: 5rpx;
		background: #1578ED;
		border-radius: 3rpx;
		margin: 10px auto;
	}
	.buttonobj{
		width: 320rpx;
		height: 70rpx;
		background: linear-gradient(145deg, #33CABC, #39B4A0);
		border-radius:50rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #FFFFFF;
		text-align: center;
		line-height:70rpx;
		margin: 30px auto -10px auto;
	}
	.course{
		background-color: #FFFFFF;
		padding:10px;
		width: 100%;
		margin:15px 0;
		font-size: 26rpx;
		color: #808080;
	}
	.course p{
		margin:10px 0;
		line-height: 22px;
	}
	.course img{
		width: 28rpx;
		height: 28rpx;
		margin-right:5px;
	}
	.software{
		display: flex;
		align-items: center;
		margin-top: -10px;
	}
	.master{
		display: flex;
		width: 170px;
		margin: 20px auto;
		align-items: center;
		justify-content: space-around;
	}
	.master p{
		font-size:36rpx;
		color: #1A1A1A;
		font-weight: bold;
	}
	.xline{
		width: 11rpx;
		height: 39rpx;
		background: #1578ED;
		transform: rotate(18deg);
	}
	.interface{
		display: flex;
		justify-content:space-between;
		flex-wrap: wrap;
	}
	.testet{
		/* height:120rpx; */
		width:21vw;
		background: #FFFFFF;
		border-radius: 8rpx;
		text-align: center;
		padding: 15px 0;
		margin:0 0 10px 0
	}
	.testet img{
		width:60rpx;
		height:65rpx;
	}
	.testet p{
		font-size:28rpx;
		color: #4D4D4D;
		margin-top: 5px;
	}
	.teams{
		background: #FFFFFF;
		width: 100%;
		padding:15px 12px ;
		border-radius: 8rpx;
		font-size: 27rpx;
		color: #808080;
		margin-top: 80px;
	}
	.teams img{
		width:27vw;
		height:32vw;
		margin-top:-58px;
		margin-right:10px;
	}
	.submitt{
		height:55px;
		font-size: 20px;
		background: #FFFFFF;
		margin-top:60px;
		position: fixed;
		bottom: 0;
		width: 100vw;
		display: flex;
		justify-content: space-between;
	}
	.bottbtn{
		width:94vw;
		margin:7px 3vw;
		height:75rpx;	
		background: linear-gradient(90deg, #5EA6FD, #1A81F9);
		border-radius:43rpx;
		text-align: center;
		line-height:75rpx;
		color: #FFFFFF;
		font-size: 33rpx;
		margin-left:13px;
	}
	.bottbtn img{
		width:23px ;
		height:23px ;
		margin-right: 10px;
	}
	.peodi{
		/* line-height: 15%; */
		margin:5px auto 15px;
		width: 260px;
		text-align: center;
		color: #1A1A1A;
		font-size:36rpx;
		font-weight: bold;
	}
	.button-g{
		width:280rpx;
		height: 80rpx;
		background:transparent;
		border-radius:43rpx;
		text-align: center;
		line-height:80rpx;
		color: #FFFFFF;
		font-size: 33rpx;
		margin-left:13px;
	}
	.sinput{
		display: flex;
		align-items: center;
		height:50px;
		padding: 10px;
		margin-left:30px
	}
	.sinput img{
		width:20px;
		height:20px;
		margin-right: 10px;
		padding-right: 5px;
	}
	.u-input{
		width:72vw;
		height:35px;
		border: 1px solid #E6E6E6;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding-left: 10px!important;
	}
	.innovate{
		width:41vw;
		height:24vw ;
	}
	.tableclas{
		/* width: 230rpx;
		height: 56rpx; */
		background: #DEECFC;
		border-radius:30rpx;
		padding:7px 13px;
		font-size: 28rpx;
		color: #1A7AED;
		margin-right:10px ;
	}
	.vertical{
		width: 6rpx;
		height: 26rpx;
		background: #1578ED;
		border-radius: 3rpx;
		margin-right:10px ;
	}
	.online{
		width: 100%;
		height: 70rpx;
		background: linear-gradient(90deg, #5EA6FD, #1A81F9);
		border-radius: 35rpx;
		line-height: 70rpx;
		font-size: 15px;
		color:#FFFFFF;
		text-align: center;
	}
	.table_heade{	
		width: 90%;
		text-align: center;
		/* margin:5px 0 */
	}
	.table_kheade{
		width: 10%;
		text-align: center;	
	}
	.headert{
		background-color: #3283BE;
		display: flex;
		align-items: center;
		color:#FFFFFF ;
	}
	.bodyt{
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		color:#1A1A1A;
		/* height: 26px; */
		
	}
	.table_obody{
		width: 10%;
		text-align: center;
		
	}
	.table_tbody{
		width: 80%;
		text-align: left;
		padding:4px 8px;
		border-left:1px solid  #CFDDDD;
		border-right:1px solid  #CFDDDD;
		
	}
	.table_hbody{
		width: 10%;
		text-align: center;
	}
	.article-body{
		 line-height: 26px!important;
		/* width: 100%; */
		 /* color:rgb(17, 16, 16)!important; */
	}
	.article-body p {
	            font-size: 34rpx!important;
	            color: #666666!important;
	            line-height: 35rpx!important;
				background-color:transparent!important;
	        }
	.article-body>>> span {
	            font-size: 34rpx!important;
	            color: #666666!important;
	            line-height: 35rpx!important;
				background-color:transparent!important;
	        }
</style>

