<template>
	<view style="min-height: calc(100vh - 120rpx); background-color: #ebf2f5; padding: 20rpx;">
		<z-nav-bar title="班内学员"></z-nav-bar>
		<public-module></public-module>	
		<view class="classMateBox" v-show="students.length> 0">
		<view class="tips ">
			<view class="flex_box">
				<view class="item flex_box">
					<span class=""></span><text>普通用户</text>
				</view>
				<view class="item flex_box">
					<span class="superVip"></span><text>超级VIP</text>
				</view>
				<view class="item flex_box">
					<span class="wumenVip"></span><text>医学VIP</text>
				</view>
				<view class="item flex_box">
					<span class="zmVip"></span><text>国学VIP</text>
				</view>
			</view>
			<view class="goumaiTips flex_box">
							<view class="item flex_box">
								<span class="redBorder">
									<!-- <uni-icons type="shop" size="24" color="#999"></uni-icons> -->
								</span>
								<text>购买部分课程或未购买</text>
							</view>
							<view class="item flex_box">
								<span class="greenBorder">
									<!-- <uni-icons type="shop-filled" size="24" color="#55aa00"></uni-icons> -->
								</span>
								<text>购买全套课程</text>
							</view>
			</view>
		</view>
		<view class="studentsNumber">
			学员总数：【{{students.length}}】人
		</view>
			<view class="newBox studentsList flex_box">
				
				<view :class="['item',
				item.student.vip == '1' ? 'superVip' : '',
				item.student.vip == '2' ? 'wumenVip' : '', 
				item.student.vip == '3' ? 'zmVip' : '',
				item.buyState == '会员 ' ? 'greenBorder' : '',
				item.buyState != '会员 ' ? 'redBorder' : ''
				]" v-for="(item, index) in students" :key="index" @click="clickItem(item)" >
					<view class="flex_box">
						<view class="classmateImg">
							<image v-if="item.student.avatar != null && item.student.avatar != ''"
								:src="item.student.avatar" mode="aspectFit"></image>
							<image v-else src="/static/icon/morenAvavter.png" mode="aspectFit"></image>
						</view>
						<view class="textItems flex_box">
							<text class="nick"
								v-if="item.student.name != null && item.student.name != ''">
								{{item.student.name}}								
							</text>
							<text class="nick" v-else>
								匿名用户
							</text>					
						</view>
					</view>				
					<!-- <view class="">
						<template v-if="isDirector || isMonitor">
						 <text>（{{item.student.tel}}）</text> 
							<text @click="outClass(item.student.id)"
								class="outBtn">踢出班级</text>
						</template>
					</view> 
					 <view class="courseBuyOrNo" v-if="item.buyState !='会员 ' ">
						<view class="">
							<text>{{ item.buyState }}</text>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="" v-show="students.length == 0">
			<u-divider text="暂无学员加入"></u-divider>
		</view>	
		<u-popup key="1" v-if="showEditBlank" :show="showEditBlank" :round="10" @close="closePup" ref="">
			<view class="upopBox" style="">
				<h3 style="margin-bottom: 20rpx;">{{thisStudent.student.name != null && thisStudent.student.name != '' ? thisStudent.student.name : "匿名用户"}}</h3>
				<view class="item">
					<text><b>身份信息：</b></text>					
					<text v-if="thisStudent.student.vip == '0'">普通用户</text>
					<text v-if="thisStudent.student.vip == '1'">超级VIP</text>
					<text v-if="thisStudent.student.vip == '2'">医学VIP</text>
					<text v-if="thisStudent.student.vip == '3'">国学VIP</text>
				</view>
				<view class="item">
					<text><b>电话：</b>{{thisStudent.student.tel}}</text>
				</view>
				<view class="item">
					<b>课程购买情况：</b><br/>{{thisStudent.buyState}}
				</view>
				<view class="btnBox">
					<text @click="outClass(thisStudent.student.id)"
						class="outBtn">踢出班级</text>
				</view>
			</view>
			
		</u-popup>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import $http from '@/config/requestConfig.js';
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				showEditBlank:false,
				students:[],
				thisClass:{},
				isDirector:false,
				isMonitor:false,
				userMes:{},
				roleCode:undefined,
				thisStudent:{},
				roleCode:undefined
			}
		},
		onLoad(e) {
			e.id ? this.getClassInfo(e.id) : ''
			this.roleCode = e.type
			
		},
		onShow() {
			this.getUserInfo()
		},
		computed: {
			...mapState(["userInfo"]),
			getRoleName() {
				var _roleName = ''
				switch (this.roleCode) {
					case '主任':
						_roleName = '主任';
						break;
					case '副主任':
						_roleName = '副主任';
						break;
					case '0':
						_roleName = '学员';
						break;
					case '1':
						_roleName = '班长';
						break;
					case '2':
						_roleName = '副班长';
						break;
					case '3':
						_roleName = '学习委员';
						break;
					case '4':
						_roleName = '评分员';
						break;
					case '5':
						_roleName = '记分员';
						break;					
				}
				return _roleName
			},
		},
		methods: {
			// 退出班级 // 踢出班级
			outClass(userId) {
				this.closePup()
				let that = this
				// var _useId = undefined
				var _txt = '即将踢出该学员，是否继续？'				
			
				uni.showModal({
					title: '提示',
					content: `${_txt}`,
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							$http.request({
									url: "common/class/quitClass",
									method: "POST",
									data: {
										"classId": that.thisClass.id,
										"userId": userId
									},
									header: { //默认 无 说明：请求头
										'Content-Type': 'application/json'
									},
								})
								.then(res => {
									if (res.code == 0) {
										that.isHave = true
										uni.showToast({
											title: `操作成功！`,
											icon: 'success'
										})										
									}
								}).catch(e => {
									console.log(e, '数据报错')
									// this.status = 3
									uni.showToast({
										title: `退出失败`,
										icon: 'error'
									})
								});
						} else if (res.cancel) {
							console.log('用户点击取消');
							return
						}
					}
				});
			},
			closePup(){
				this.showEditBlank = false				
			},
			// 获取真实的身份信息
			getRealRole() {
				$http.request({
						url: "common/class/getUserRole",
						method: "POST",
						data: {
							"classId": this.thisClass.id
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then((res) => {
						console.log('res获取身份信息', res);
					}).catch(e => {
						uni.showToast({
							title: '获取身份信息失败',
							icon: 'error'
						})
					});
			},
			getUserInfo() {
				// 获取个人信息
				if (this.userInfo.id != undefined) {
					this.$http.post("common/user/getUserInfo").then((res) => {
						this.userMes = res.result;
						this.isMonitor = res.isMonitor
						this.isDirector = res.isDirector
						if (this.isDirector) {
							this.roleCode = '66'
						} else if (this.isMonitor) {
							this.getRealRole()
						} else {
			
						}
					}).catch(e => {
						uni.showToast({
							title: '获取用户信息失败',
							icon: 'none'
						})
					});
				}
			},
			clickItem(item){
				console.log('item',item);
				this.thisStudent = item
				this.showEditBlank = true
			},
			getClassInfo(id) {
				uni.showLoading({
					title: '正在加载'
				})
				$http.request({
						url: "common/class/getClassInfo",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {
							"classId": id // 班类型 0小班 1联合班 2精英班
						},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						this.refresh = false
						if (res.code == 0) {
							
							this.thisClass = res.result.class
							this.students = res.result.students
							
			
						}
						uni.hideLoading()
					}).catch(e => {
						uni.hideLoading()
						console.log(e, '数据报错')
						// this.status = 3
						uni.showToast({
							title: '获取班级信息失败',
							icon: 'none'
						})
					});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	.upopBox{padding: 40rpx; max-height: 80vh; overflow-y:scroll; color: #666;
		.item{padding: 10rpx 0; border-bottom: 1px solid #eee;}
	}
	.redBorder{ border: 1px solid #ff8f8f !important;}
	.greenBorder{border: 1px solid #55aa00 !important;}
	.studentsNumber{color: #666; font-size: 28rpx; margin: 20rpx 0; display: block;}
	.studentsList{ background-color: rgba(255, 255, 255, .8); padding: 10rpx; border-radius: 10rpx; flex-wrap: wrap; justify-content: space-around;
		.item{width: 32% !important; font-size: 26rpx; padding: 6rpx !important;}
	}
	.btnBox{margin-top: 10rpx; text-align: center;}
	.outBtn {
		padding: 6rpx 10rpx;
		display: inline-block;
		border-radius: 10rpx;
		color: red;
		border: 1px solid red;
		font-size: 26rpx;
	}
	.goumaiTips{
		margin-top: 20rpx;
		.item{align-items: center;}
		// span{border: none !important; background-color: transparent !important; margin-right: 20rpx !important;}
	}
	.newBox {
	
		.item {
			
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			@include ptop_bottm(10px);
			@include pleft_right(10px);
	
			// @include mshadow(10px, 1) 
			.imgcontainer {
				display: block;
				width: 80rpx;
				margin-right: 20rpx;
				// background-size: cover;
				// background-position: center;
				height: 120rpx;
				flex-grow: 1;
				// @include ptop_bottm(10px);
				overflow: hidden;
	
				// @include pleft_right(10px);
				image {
					width: 100%;
					height: 120rpx;
				}
			}
	
			.btn_box {
				text-align: right;
	
				text {
					border-radius: 20rpx;
					padding: 3px 5px;
					@include theme("btn_bg");
					font-size: 28rpx;
					color: #fff;
				}
			}
	
			.buyItems {
				width: 60%;
				
				text{
					display:block; width: 100%; background-color: red;
				font-size: 26rpx;
				color: #000;
				@include toe()}
			}
	
			.jianjie {
				line-height: 30rpx;
				height: 60rpx;
				overflow: hidden;
				overflow: hidden !important;
				margin-top: 10rpx;
				font-size: 24rpx;
				@include bov();
				color: #9c9c9c;
			}
	
			.txt555 {
				display:block; width: 100%;
				font-size: 26rpx;
				color: #000;
				@include toe()
			}
		}
	}
	.tips{ font-size: 24rpx; color: #666;  margin: 20rpx 0; margin-bottom: 30rpx;
	
	.item{align-items: center;}
	
		span{display: inline-block; margin-right: 10rpx; border-radius: 4rpx;; width: 30rpx; height: 30rpx; background-color: #fff; border: 1px solid #999;}
	}
	.classMateBox {
		.zmVip {
			background-image: linear-gradient(-60deg, #53966a 0%, #e1feef 50%, #e1feef 100%);
		}

		.wumenVip {
			background-image: linear-gradient(-60deg, #578df0 0%, #f1f4fd 50%, #f1f4fd 100%);
		}

		.superVip {
			background-image: linear-gradient(-60deg, #965af0 0%, #fdf0ed 50%, #fdf0ed 100%);
		}

		.item {
			width: 100%;
			position: relative;

			.textItems { overflow: hidden;
				width: 100%;
				align-items: center;
				.nick{ display: block;
					@include toe();
				}
				.outBtn {
					padding: 6rpx 10rpx;
					display: inline-block;
					border-radius: 10rpx;
					color: $themeColor;
					border: 1px solid $themeColor;
					font-size: 26rpx;
				}

				// .txt555 {
				// 	font-size: 28rpx;
				// 	color: #333;
				// }

				.userType {
					position: absolute;
					font-size: 26rpx;
					right: 30rpx;
					top: 8rpx;
					color: #fff;
				}
			}
		}
	}

	.classmateImg {
		width: 40rpx;
		margin-right: 20rpx;
		height: 40rpx;
		border-radius: 100rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>
