<template>
	<view class="wrap_box">
		<CustomReturn title="听课教室选座" color="#fff" :bgColor="bgColor"/>
		<view class="bg-img">
			<image src="/static/imagesV2/stu_selection/selectseat_bg.png" mode="aspectFill"></image>
		</view>
		
		<PaddingTopB>
			<view v-if="datas.info" class="vio_list">
				<scroll-view scroll-x class="stime_list scroll_x" v-if="datas.type ==2">
					<view class="stime_li" :class="{active:index==0}" v-for="(item,index) in datas.timeArr">
						<view class="li_tit">
							{{item.title}}
						</view>
						<view v-if="index==0" class="li_time">
							<text>{{time_h}}</text>	
							<text>{{time_m}}</text>	
							<text>{{time_s}}</text>	
						</view>
						<view v-else class="li_time">即将开始</view>
					</view>	
				</scroll-view>
				<view v-else class="xzdata_null">
					<view class="icon">
						<image src="/static/imagesV2/stu_selection/icon-success.png" mode=""></image>
					</view>
					<view>
						<view class="d1">
							选座已结束
						</view>
						<view class="d2">
							没有选座的同学赶紧选座吧！
						</view>
					</view>
				</view>
				
				<view class="xz_rule">
					<view class="tit-icon">
						<image src="/static/imagesV2/stu_selection/xuanzuoguize.png" mode="aspectFill"></image>
					</view>
					<view class="rule_msg">
						<view class="xz_room">
							选座教室：{{datas.info.pid}}
						</view>
						<view class="rule_tip">
							活动开始前5分钟可以选座，错过时间等选座活动整体结束后再选
						</view>
					</view>
				</view>
				
				<view class="stu_tit">
					<view class="">以下学员可以选座</view>
				</view>	
				
				<view class="stu_list">
					<view class="stu_li" v-for="(item,index) in datas.user">
						<view v-if="item.seat_type==1" class="stu_status">
							已选
						</view>
						<view v-else class="stu_status stu_status1">
							未选
						</view>
						<view class="stu_name">
							<view class="oh1">{{item.name}}</view>
							<image v-if="item.sex==2" src="/static/imagesV2/stu_selection/icon_female.png" mode="aspectFit"></image>
							<image v-else src="/static/imagesV2/stu_selection/icon_male.png" mode="aspectFit"></image>
						</view>
						<view class="stu_time">
							{{item.add_time}} 入学
						</view>
						
					</view>
					<u-empty v-if="datas.user&&datas.user.length==0"
									mode="data"
									text="暂无数据"
									icon="/static/images/tch/img_blank.png"
					>
					</u-empty>
				</view>
				
				<view  v-if="datas.user&&datas.user.length>0" class="bz_add" >
					<view class="" @click="$service.jump" :data-url="'/pagesStu/stu_seat_list/stu_seat_list?id='+datas.info.id">
						去选座
					</view>
				</view>
				
			</view>
			
		</PaddingTopB>

	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import CustomReturn from "@/components/CustomReturn/index.vue"
	import PaddingTopB from "@/components/PaddingTopB/index.vue"
	var that 
	var djs_name
	export default {
		components: {
			CustomReturn,
			PaddingTopB
		},
		data() {
			return {
				bgColor: 'none',
				options:'',
				time_list:[
					{
						title:'9:00'
					},
					{
						title:'10:00'
					},
					{
						title:'11:00'
					},
					{
						title:'12:00'
					},
					{
						title:'13:00'
					},
					{
						title:'14:00'
					},
					
				],
				time_list1:[],
				datas:'',
				active:'',
				c_time:'999',
				time_h:'00',
				time_m:'00',
				time_s:'00',
			}
		},
		computed: {
			...mapState(['hasLogin', 'forcedLogin', 'userName', 'userinfo','nowtime']),
			startDate() {
					return this.getDate('start');
			},
			endDate() {
					return this.getDate('end');
			}
		},
		onPageScroll(e) {
			if(e.scrollTop > 0 ) {
				this.bgColor = '#3384fc'
			}else {
				this.bgColor = 'none'
			}
		},
		onLoad(e) {
			that=this
			that.options=e||{}
			console.log(e)
			// if(e.type==0){
			// 	uni.setNavigationBarTitle({
			// 		title:'公务员目标制定'
			// 	})
			// }
			// if(e.type==1){
			// 	uni.setNavigationBarTitle({
			// 		title:'事业单位目标制定'
			// 	})
			// }
			// if(e.type==2){
			// 	uni.setNavigationBarTitle({
			// 		title:'特岗教师目标制定'
			// 	})
			// }
			
			
		},
		onShow() {
			that.getdata()
		},
		onhide(){
			clearTimeout(djs_name)
		},
		methods: {
			// ...mapMutations(['wxshouquan','login']),
			getdata(){
				///study/letter_wx
				var datas = {
					page:that.page,
					limit:20
				}
				var jkurl = '/study/class_room'
							
				that.$service.P_post(jkurl, datas).then(res => {
					that.btnkg = 0
					console.log(res)
					if (res.code == 1) {
						that.htmlReset = 0
						var datas = res.data
						console.log(typeof datas)
						that.datas=datas
						if(datas.type==2){
							if(datas.timeArr.length>0){
								that.c_time=datas.timeArr[0].countdown
								that.djs_fuc()
							}
							
							
						}
					} else {
							
						if (res.msg) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '获取数据失败'
							})
						}
					}
				}).catch(e => {
					that.htmlReset = 1
					that.btnkg = 0
					// that.$refs.htmlLoading.htmlReset_fuc(1)
					console.log(e)
					uni.showToast({
						icon: 'none',
						title: '获取数据失败，请检查您的网络连接'
					})
				})
			},
			djs_fuc(){
				if(that.c_time<1){
					clearTimeout(djs_name)
					setTimeout(function(){
						that.getdata()
					},1000)
					return
				}
				clearTimeout(djs_name)
				djs_name=setTimeout(function(){
					var c_time=that.c_time
					var time_h=Math.floor(c_time/(60*60))
					var time_m=Math.floor((c_time-time_h*3600)/60)
					var time_s=Math.floor(c_time%60)
					if(time_h<10){
						time_h='0'+time_h
					}
					if(time_m<10){
						time_m='0'+time_m
					}
					if(time_s<10){
						time_s='0'+time_s
					}
					that.time_h=time_h
					that.time_m=time_m
					that.time_s=time_s
					c_time--
					that.c_time=c_time
					// var 
					that.djs_fuc()
				},1000)
			},
			test(){},
			save_fuc(){
				uni.showToast({
					icon:'none',
					title:'提交成功'
				})
				setTimeout(function(){
					uni.navigateBack({
						delta:1
					})
				},1000)
			},
			setac_fuc(index){
				that.active=index
				this.index=0
			},
			bindDateChange(e){
				this.vio_time = e.detail.value
			},
			bindpickerChange(e){
				this.index = e.detail.value
			},
			getDate(type) {
					const date = new Date();
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();
			
					if (type === 'start') {
							year = year - 60;
					} else if (type === 'end') {
							year = year;
					}
					month = month > 9 ? month : '0' + month;
					day = day > 9 ? day : '0' + day;
					return `${year}-${month}-${day}`;
			},
			
			getimg(img){
				return service.getimg(img)
			},
			jump(e) {
				var that = this
				if (that.btnkg == 1) {
					return
				} else {
					that.btnkg = 1
					setTimeout(function() {
						that.btnkg = 0
					}, 2000)
				}
				console.log(e.currentTarget.dataset.type)
				service.jump(e)
			},
			goback(){
			  uni.navigateBack()
			},
			func(){
				// that.$store.commit('setSystem',datas.system)
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap_box{
	padding-bottom: 120rpx;
}
.bg-img {
	height: 504rpx;
	position: absolute;
	width: 100%;
}

.vio_list{
	width: 100%;
	// padding: 0 30rpx 30rpx;
	padding:30rpx;
	position: relative;
	z-index: 2;
	.main_list{
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding:0 30rpx;
	}
	
}
.stime_list{
	width: 100%;
	margin: 20rpx 0 60rpx 0;
	.stime_li{
		width: 144rpx;
		height: 102rpx;
		// background: #FFFFFF;
		border-radius: 10rpx;
		display: inline-flex;
		font-size: 36rpx;
		font-family: Arial;
		// font-weight: bold;
		color: #FFFFFF;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		&.active{
			background: #FFFFFF;
			color: #2D81FF;
			.li_time{
				font-size: 22rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				text{
					width: 36rpx;
					height: 28rpx;
					background: #2D81FF;
					border-radius: 4rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					&+text{
						margin-left: 5rpx;
					}
				}
			}
		}
		.li_time{
			font-size: 22rpx;
			color: #FFFFFF;
		}
	}
}
.xz_rule{
	width: 100%;
	background: #FFFFFF;
	border-radius: 20rpx;
	position: relative;
	padding: 60rpx 30rpx 30rpx;
	.tit-icon {
		position: absolute;
		left: 0;
		top: 0;
		width: 130rpx;
		height: 40rpx;
	}
	.rule_msg{
		.xz_room{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #323232;
		}
		.rule_tip{
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #979797;
			margin-top: 20rpx;
		}
	}
}
.stu_tit{
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #323232;
	margin: 30rpx 0;
	padding-left: 20rpx;
	position: relative;
	&:before{
		content:'';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 10rpx;
		background: #2D81FF;
		border-radius: 6rpx;
	}
}
.stu_list{
	width: 100%;
	background: #FFFFFF;
	border-radius: 20rpx;
	.stu_li{
		width: 100%;
		padding: 30rpx;
		display: flex;
		align-items: center;
		.stu_name{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #323232;
			display: flex;
			align-items: center;
			
			image {
				width: 30rpx;
				height: 26rpx;
				margin-left: 20rpx;
			}
		}
		.stu_time{
			flex: 1;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #979797;
			text-align: right;
		}
		.stu_status{
			
			padding: 4rpx 6rpx;
			
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			
			background: #F3F4F6;
			border: 1px solid #CACACA;
			border-radius: 2px;
			color: #979797;
			margin-right: 20rpx;
			&.stu_status1{
				background: #FFF1F0;
				border: 1px solid #FFAFAE;
				color: #EC5656;
			}
		}
	}
}
.bz_add{
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
		z-index: 800;
		left: 0;
		padding: 15rpx 25rpx;
		view{
			background: #2D81FF;
			border-radius: 44rpx;
			line-height: 88rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			text-align: center;
			color: #FFFFFF;
		}
	}
	.xzdata_null{
		display: flex;
		align-items: center;
		margin: 50rpx 0;
		.icon {
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
		}
		.d1{
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.d2{
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 20rpx;
		}
	}
</style>