<template>
	<view class="wrap_box">
		<!-- <uParse v-if="datas" :content="datas"></uParse> -->
		<topbar bg_color="#2d81ff">
			<text style="color: #fff;"></text>
			<text style="color: #fff;">首页</text>
			<text style="color: #fff;"></text>
		</topbar>
		<view class="tch_box">
			<view class="tel_index_bg"></view>
			<view v-if="userDatas" class="tch_main">
				<view class="tch_user dis_flex aic " @click="$service.jump" data-url="/pagesA/tch_msg/tch_msg">
					<!-- <image class="user_tx" src="/static/images/tx.png" mode="aspectFill"></image> -->
					<myLazyLoad class="user_tx" :src="$service.getimg(userDatas.img)" mode="aspectFill" :borderRadius="112"></myLazyLoad>
					<view class="flex_1" @click="cli_fuc">
						<view class="user_name dis_flex aic">
							{{userDatas.nick||''}}
							<text v-if="userDatas.is_assistant == 2">班主任</text>
							<text v-else>助教老师</text>
						</view>
						<view class="user_id" >{{userDatas.class_title||''}}</view>
					</view>
					<text class="icon icon-arrow-right-copy"></text>
				</view>
				<!-- 班级概况 start -->
				
				<view class="tit_box">班级概况</view>
				<view class="tch_banji">
					<view class="bjf dis_flex_c aic ju_c" @click="$service.jump" data-url="/pagesA/tch_kq/tch_kq" data-login="true">
						<view class="bjf_num">{{userDatas.class_num||''}}</view>
						<view class="bjf_text">
							班级分
							<text class="icon icon-arrow-right-copy"></text>
						</view>
					</view>
					<view class="bj_sg"></view>
					<view class="bj_xq">
						<view class="bj_pai dis_flex aic" @click="$service.jump" data-url="/pagesA/tch_rank/tch_rank"  data-login="true">
							<text class="bj_pait"></text>
							<view class="flex_1">班级排名</view>	
							<view class="bj_painum">第{{userDatas.class_sort||''}}名</view>
							<text class="icon icon-arrow-right-copy"></text>
						</view>
						<view class="bj_pai dis_flex aic" @click="$service.jump" data-url="/pagesA/tch_vio/tch_vio"  data-login="true"> 
							<text class="bj_paiw"></text>
							<view class="flex_1">违纪情况</view>	
							<view class="bj_painum">{{userDatas.class_break||''}}</view>
							<text class="icon icon-arrow-right-copy"></text>
						</view>
					</view>	
				</view>
				<!-- 班级概况 end -->
				<!-- 学员概况 start -->
				<view class="tit_box">学员概况</view>
				<view class="xygk">
					<view class="gk_li" @click="$service.jump" data-url="/pagesA/stu_list/stu_list"  data-login="true">
						<image src="/static/images/tch/home_icon_namelist.png" mode="aspectFit"></image>
						本班学员名单
					</view>	
					<view class="gk_li" @click="$service.jump" data-url="/pagesA/stumsg_list/stumsg_list"  data-login="true">
						<image src="/static/images/tch/home_icon_archives.png" mode="aspectFit"></image>
						学员档案信息
					</view>	
					<view class="gk_li" @click="$service.jump" data-url="/pagesA/stu_ft_list/stu_ft_list"  data-login="true">
						<image src="/static/images/tch/home_icon_records.png" mode="aspectFit"></image>
						学员访谈记录
					</view>	
					<view class="gk_li" @click="$service.jump" data-url="/pagesA/stu_hddk_add/stu_hddk_add"  data-login="true">
						<image src="/static/images/tch/home_icon_checklist.png" mode="aspectFit"></image>
						核对到课名单
					</view>	
					<view class="gk_li" @click="$service.jump" data-url="/pages_v2/thc_my_pf/thc_my_pf"  data-login="true">
						<image src="/static/images/v2/my_pf.png" mode="aspectFit"></image>
						学员对我的评分
					</view>	
					<view class="gk_li" @click="$service.jump" data-url="/pages_v2/tch_pf_list/tch_pf_list"  data-login="true">
						<image src="/static/images/v2/rank.png" mode="aspectFit"></image>
						星级排行榜
					</view>	
					<view class="gk_li" @click="$service.jump" data-url="/page_admin/teacher_praise/teacher_praise"  data-login="true">
						<image src="/static/images/v2/biaoyangdainz.png" mode="aspectFit"></image>
						点赞表扬
					</view>	
				</view>
				<!-- <view class="tit_box">学员对我的评分</view> -->
				<!-- 学员概况 end -->
				<!-- 近期入学名单 start -->
				<view class="tit_box">近期入学名单</view>
				<view class="rxmd_list">
					<view class="rxmd_li" v-for="(item,index) in md_list" :key="index">
						<view class="rxmd_li_name dis_flex aic">
							<text class="oh1">{{item.name}} </text>
							<image v-if="item.sex==2" src="/static/images/tch/icon_female.png" mode="aspectFit"></image>
							<image v-else src="/static/images/tch/icon_male.png" mode="aspectFit"></image>
						</view>
						<view class="rxmd_li_id flex_1">
							{{item.phone||''}} 
						</view>	
						<view class="rxmd_li_time">
							{{item.add_time||''}} 入学
						</view>	
					</view>
					<u-empty v-if="md_list.length==0"
									mode="data"
									text="暂无名单"
									icon="/static/images/tch/img_blank.png"
					>
					</u-empty>
				</view>	
				<!-- 近期入学名单 end -->
			</view>
		</view>	
		<!-- 阻止滑动 -->
		<!-- <view @touchmove.stop.prevent='test'></view> -->
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	var that 
	export default {
		data() {
			return {
				options:'',
				datas:'',
				md_list:[],
				shownum:0
			}
		},
		computed: {
		...mapState(['hasLogin', 'forcedLogin', 'userName', 'userinfo','nowtime', 'userDatas']),
		},
		onLoad(e) {
			that=this
			that.options=e||{}
			console.log(e)
			
			that.getdata()
		},
		onShow() {
			if(that.shownum>0){
				that.getdata()
			}
			that.shownum++
		},
		methods: {
			// ...mapMutations(['wxshouquan','login']),
			test(){},
			cli_fuc(){
				console.log(1)
			},
			getdata() {
			
				var datas = {}
				var jkurl = '/teacher'
			
				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)
			
						if (typeof datas == 'string') {
							datas = JSON.parse(datas)
						}
						console.log(res)
						that.$store.commit('setuser', datas)
						if(datas.list){
							that.md_list=datas.list.data
						}
					} 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: '获取数据失败，请检查您的网络连接'
					})
				})
			},
			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{
	width: 100%;
	// padding: 30rpx;
	position: relative;
	background: #F8F8F8;
	min-height: 100vh;
}
.tel_index_bg{
	position: absolute;
	top: 0;
	z-index: 1;
	width: 100%;
	min-height: 220rpx;
	background: linear-gradient(0deg, #f8f8f8 0%, #ffffff 25%, #5D9DFD 60%, #428EFE 70%, #2D81FF 100%);
}
.tch_box{
	width: 100%;
	position: relative;
}
.tch_main{
	width: 100%;
	position: relative;
	z-index: 2;
	padding: 28rpx;
}
.tch_user{
	width: 100%;
	min-height: 176rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 28rpx;
	.user_tx{
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 23rpx;
	}
	.icon{
		font-size: 24rpx;
		color: #bbb;
	}
	.user_name{
		font-size: 32rpx;
		color: #545D71;
		margin-bottom: 10rpx;
		font-weight: bold;
		text{
			font-size: 24rpx;
			color: #4086ee;
			padding: 0 9rpx;
			height: 34rpx;
			background: rgba(64, 134, 238, .1);
			border-radius: 4rpx;
			margin-left: 10rpx;
			font-weight: normal;
		}
	}
	.user_id{
		font-size: 28rpx;
		color: #7C8086;
	}
}
.tit_box{
	font-size: 32rpx;
	font-weight: bold;
	color: #545D71;
	height: 80rpx;
	margin-top: 14rpx;
	display: flex;
	align-items: center;
}
.tch_banji{
	width: 100%;
	min-height: 210rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 28rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.bj_sg{
		width: 1px;
		height: 120rpx;
		background: #EEEEEE;
		border-radius: 1px;
	}
	.bjf{
		width: 260rpx;
		padding-right: 30rpx;
		.bjf_num{
			font-size: 60rpx;
			font-family: Arial;
			font-weight: bold;
			color: #545D71;
			line-height: 70rpx;
		}
		.bjf_text{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #545D71;
			display: flex;
			align-items: center;
			padding-left: 35rpx;
			.icon{
				font-size: 18rpx;
				color: #ddd;
				margin-left: 20rpx;
			}
		}
	}
	.bj_xq{
		width: 380rpx;
		padding-left: 28rpx;
		.bj_pai{
			width: 100%;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #7C8086;
			height: 60rpx;
			.bj_pait{
				width: 16rpx;
				height: 16rpx;
				background: #2D81FF;
				border-radius: 50%;
				margin-right: 10rpx;
			}
			.bj_paiw{
				width: 16rpx;
				height: 16rpx;
				background: #FF9A18;
				border-radius: 50%;
				margin-right: 10rpx;
			}
			.bj_painum{
				font-size: 28rpx;
				color: #545D71;
			}
			.icon{
				font-size: 18rpx;
				color: #ddd;
				margin-left: 10rpx;
			}
		}
	}
}
.xygk{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	.gk_li{
		width: 333rpx;
		height: 132rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		padding: 28rpx;
		padding-right: 10rpx;
		font-size: 30rpx;
		margin-right: 28rpx;
		&:nth-child(2n){
			margin-right: 0;
		}
		&:nth-child(n+3){
			margin-top: 28rpx;
		}
		image{
			width: 68rpx;
			height: 76rpx;
			margin-right: 15rpx;
			position: relative;
			top: 4rpx;
		}
	}
}
.rxmd_list{
	width: 100%;
	background: #FFFFFF;
	border-radius: 10rpx;
	.rxmd_li{
		width: 100%;
		height: 94rpx;
		padding: 0 28rpx;
		display: flex;
		align-items: center;
		color: #545D71;
		&+.rxmd_li{
			border-top: 1px solid #eee;
		}
		.rxmd_li_name{
			// padding: 0 14rpx;
			width: 160rpx;
			font-size: 30rpx;
			// padding-right: 10rpx;
			text{
				max-width: 120rpx;
				font-size: 30rpx;
				line-height: 34rpx;
				height: 34rpx;
			}
			image{
				width: 28rpx;
				height: 28rpx;
				margin-left: 12rpx;
				flex: none;
			}
		}
		.rxmd_li_id{
			font-size: 30rpx;
			letter-spacing: 0;
			// padding: 0 14rpx;
			padding-left: 10rpx;
		}
		.rxmd_li_time{
			font-size: 28rpx;
			letter-spacing: 0;
		}
	}
}
</style>