<template>
	<van-popup :show="show" :round="true" position="bottom" custom-style="height: 80%" @close="closepopup">
		<view class="studentsPopu-box flex">
			<view class="studentsPopu-title">
				选择学员 <text>({{chooseStuArray?chooseStuArray.length:0}} / {{stuList?stuList.length:0}})</text>
			</view>
			<view class="studentsPopu-search flex">
				<van-search :value="Keywords" shape="round" style="border-radius: 20rpx;width: 100%;" input-align="center"
				 background="#F6F6F6" @change="searchKeywords" placeholder="请输入搜索关键词" />
			</view>
			<view class="studentsPopuImg">
				<view class="studentsPopu-img-box flex">
					<template v-for="(item,index) in stuList">
						<view class="studentsPopu-img-list flex" @click="clickChoose(item)"
						:class="item.state?'active':''">
							<view class="studentsPopu-imgbox flex">
								<view class="studentsPopu-img flex">
									<view>
										<van-image width="119rpx" height="119rpx" fit="cover" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653894197000_691.png" />
									</view>
								</view>
							</view>
							<text class="studentsPopu-text">{{item.StuName}}</text>
						</view>
					</template>
				</view>
			</view>
			<view class="footer">
				<view class="studentsPopu-save flex">
					<view @click="save">确认</view>
				</view>
			</view>

		</view>
	</van-popup>
</template>
<script>
	import {
		ref,
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject,
		watch
	} from "vue";
	import {
		uploadFile
	} from "@/utils/index";
	export default {
		props: ["courseStuList"],
		emits: ['getdata'],
		components: {},
		setup(props, ctx) {
			let {
				proxy
			} = getCurrentInstance();
			let data = reactive({
				show: false,
				loading: false,
				Keywords: '',
				stuList: [],
				chooseStuArray: []
			});
			let methods = {
				// 选中
				clickChoose(item) {
					item.state = !item.state
					if(item.state){
						data.chooseStuArray.push(item);
					}else{
						data.chooseStuArray.forEach((i,index)=>{
							if(i.StuId==item.StuId){
								data.chooseStuArray.splice(index,1)
							}
						})
					}
				},
				// 搜索
				searchKeywords() {

				},
				showFun() {
					data.show = true
				},
				closepopup() {
					data.show = false
				},
				save() {
					ctx.emit("getdata", data.chooseStuArray);
					data.show = false
				}
			};
			//监听属性数组
			watch(() => props["courseStuList"], (newValue, oldValue) => {
				if (newValue != oldValue && newValue && newValue.length > 0) {
					let addList = function(arr) {
						arr.forEach((item) => {item.state = false;})
					}
					addList(newValue);
					data.stuList = newValue;
				}
			}, {
				deep: true,
			});
			let that = methods;
			return {
				...toRefs(data),
				...methods
			};
		},
		onLoad() {

		},
		onShow() {

		}
	};
</script>
<style scoped>
	.studentsPopu-text {
		text-align: center;
		font-weight: 500;
		font-size: 26rpx;
		color: #282828;
		letter-spacing: 1rpx;
		margin-top: 15rpx;
	}

	.studentsPopu-img view {
		width: 119rpx;
		height: 119rpx;
		/* border: 1rpx solid #E5E5E5; */
		background: #E5E5E5;
		border-radius: 50%;
		overflow: hidden;
	}
	.studentsPopu-img-list.active .studentsPopu-text{
		color: #C91928;
	}
	.studentsPopu-img-list.active .studentsPopu-img {
		background: #C91928;
		box-shadow: 0rpx 0rpx 59rpx 0rpx rgba(201, 23, 39, 0.34);
	}

	.studentsPopu-img {
		width: 130rpx;
		height: 130rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 29rpx 0rpx rgba(76, 76, 76, 0.09);
		border-radius: 50%;
		justify-content: center;
		align-items: center;
	}

	.studentsPopu-imgbox {
		justify-content: center;
	}

	.studentsPopu-img-list {
		flex: 0 0 25%;
		flex-direction: column;
	}

	.studentsPopu-img-box {
		height: 90%;
		padding: 40rpx 25rpx;
		flex-wrap: wrap;
		margin-bottom: 100rpx;
		overflow-y: auto;
	}

	.studentsPopuImg {
		max-height: 670rpx;
		overflow: hidden;
	}

	.studentsPopu-search {
		padding: 30rpx 27rpx 5rpx 27rpx;
	}

	.studentsPopu-title text {
		font-size: 26rpx;
		color: #949494;
		font-weight: 400;
		margin-left: 20rpx;
	}

	.studentsPopu-title {
		font-size: 36rpx;
		font-weight: 800;
		color: #282828;
		letter-spacing: 1rpx;
		padding: 48rpx 55rpx 0 55rpx;
	}

	.studentsPopu-save view {
		background: #C91727;
		font-size: 30rpx;
		font-weight: bold;
		letter-spacing: 1rpx;
		width: 260rpx;
		line-height: 88rpx;
		border-radius: 44rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.studentsPopu-save {
		justify-content: center;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.studentsPopu-box {
		background: #f6f6f6;
		/* padding: 48rpx 0 60rpx 0; */
		flex-direction: column;
		height: 100%;
		overflow: hidden;
	}

	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>
