<template>
	<view class="wrap_box">
		<view class="stu_list">
			<view class="stu_search">
				<u-icon name="search" size="24" color="#979797"></u-icon>
				<input v-model="keywords" confirm-type="search" @confirm="confirm" class="stu_search-input" type="text"
					placeholder="搜索姓名" placeholder-style="color: #C3C3C3">
			</view>
			<view class="stu_num">
				共<text class="stu_num-text">{{datas.length}}</text>人
			</view>
			<scroll-view style="height: 1200rpx;" :scroll-y="true">
				<view v-for="(item,index) in datas" :key="index" class="stu_item">
					
					<view class="avatar">
						<image class="avatar-img" v-if="item.img" :src="$service.getimg(item.img)" mode="aspectFill"></image>
						<image class="avatar-img" v-else src="/static/imagesV2/tch_index/default-avatar.png" mode="aspectFill"></image>
						<view class="gender">
							<image v-if="item.sex!=1" 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>
					
					<view class="info">
						<view class="name">
							{{item.name}}
						</view>
						<view>
							<text>
								{{item.class_name}}
							</text>
							<text style="margin-left: 20rpx;">
								{{item.add_time}}入学
							</text>
						</view>
					</view>
				</view>
				<u-empty v-if="datas.length==0" mode="data" text="暂无名单" icon="/static/images/tch/img_blank.png">
				</u-empty>
			</scroll-view>
		</view>

		<!-- 阻止滑动 -->
		<!-- <view @touchmove.stop.prevent='test'></view> -->
	</view>
</template>

<script>
	// import api from '@/api/tch_index.js'

	import Vue from 'vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	var that

	export default {
		data() {
			return {
				options: '',
				datas: [],
				page: 1,
				data_last: false,
				keywords: ''
			}
		},
		computed: {
			...mapState(['hasLogin', 'forcedLogin', 'userName', 'userinfo', 'nowtime']),
		},
		onLoad(e) {
			that = this
			that.options = e || {}
			// console.log(e)

			that.getdata()

		},
		onShow() {

		},
		methods: {
			// ...mapMutations(['wxshouquan','login']),
			test() {},
			onRetry() {
				that.page = 1
				that.datas = []
				that.getdata()
			},
			confirm() {
				this.onRetry()
			},
			getdata() {

				var jkurl = "/teacher/student"
				var datas = {
					page: that.page,
					keywords: that.keywords
				}
				// if(that.data_last == true){
				// 	return
				// }
				if (that.btnkg == 1) {
					return
				} else {
					that.btnkg = 1
				}
				var page_now = that.page
				that.$service.P_post(jkurl, datas).then(res => {
					that.btnkg = 0
					console.log(res)
					if (res.code == 1) {
						var datas = res.data
						console.log(typeof datas)

						if (typeof datas == 'string') {
							datas = JSON.parse(datas)
						}

						if (page_now == 1) {

							that.datas = datas

						} else {
							// if (datas.data.length == 0) {
							// 	that.data_last = true
							// 	return
							// }
							// that.data_last = false
							// that.datas = that.datas.concat(datas.data)
						}
						that.page++

					} else {
						if (res.msg) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '操作失败'
							})
						}
					}
				}).catch(e => {
					that.btnkg = 0
					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)
			},
			async loadstudentList() { // 获取新闻列表数据

				// const token = uni.getStorageSync('token');
				// const {
				// 	data
				// } = await api.getstudentList(token)
				// this.datas = data.data
				// console.log(this.datas);
				// this.datas.forEach(item => {
				// 	item.img = that.BASE_URL + item.img
				// })
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrap_box {
		width: 100%;
		// padding: 30rpx;
		min-height: 100vh;
		// #ifdef H5
		min-height: calc(100vh - 44px);
		// #endif
		background: #F8F8F8;
		position: relative;
	}

	.stu_list {
		position: relative;
		z-index: 2;
		width: 100%;
		padding: 30rpx;

		.stu_search {
			background-color:#fff;
			display: flex;
			border-radius: 36rpx;
			align-items: center;
			padding: 15rpx 20rpx 15rpx 30rpx;
			border-radius: 36rpx;
			.stu_search-input {
				flex-grow: 1;
			}
		}

		.stu_num {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #323232;
			padding: 20rpx 0;
			.stu_num-text {
				color: #2D81FF;
			}
		}

		.stu_item {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			display: flex;
			align-items: center;
			
			& + .stu_item {
				margin-top: 20rpx;
			}
			
			.avatar {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
				position: relative;
				margin-right: 30rpx;
				.avatar-img {
					border-radius: 50%;
				}
				.gender {
					position: absolute;
					width: 29rpx;
					height: 24rpx;
					right: 0rpx;
					bottom: 12rpx;
				}
			}
			.info {
				flex: 1;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #646464;
				.name {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					margin-bottom: 24rpx;
					color: #323232;
				}
			}
		}

	}
</style>