<template>
	<view class="studentList-box flex">
		<block v-if="dataList && dataList.length>0" >
        <view class="studentList-content" @click="selectStuHandler(item)" v-for="(item,index) in dataList" :key="index">
            <view class="studentList flex">
                <view class="studentList-img">
                    <van-image width="100%" height="100%" fit="cover" class="img"
                        src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653894192000_645.png" />
                </view>
                <text>
                    {{item.StuName}}
                </text>
            </view>
        </view>
		</block>
		<view class="noData" v-else>
			<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1653902791000_806.png" mode="widthFix"></image>
			<view>暂无学员信息</view>
		</view>
	</view>
</template>
<script>
	import {
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject
	} from "vue";

	export default {
		props: {
			dataList: [],
		},
		components: {},
		emits:['selected'],
		setup(props,ctx) {

			let data = reactive({
				obj: {
					Name: '',
					Photo: '',
				},
				showPhone: false,
				showLogin: true, //多次点击
                dataList: props.dataList
			});
            let methods = {
				selectStuHandler(item){
					console.log(item)
					ctx.emit("selected",item.StuId,item.StuName)
				}
            }
			return {
				...toRefs(data),
                ...methods
			};
		},
	};
</script>
<style scoped>
	.studentList-box .noData{
		text-align: center;
		flex:1;
		width: 100%;
	}
	.studentList-box .noData image{
		width:200rpx;
		margin-bottom: 40rpx;
	}
	.studentList-box .noData view{
		font-size: 24rpx;
		color: #cecece;
		text-align: center;
	}
    .studentList text{
        text-align: center;
        color: #2E2E2E;
        font-size: 30rpx;
        font-weight: 500;
        letter-spacing: 1rpx;
    }
    .studentList-img .img{
        display: block;
		border: 2rpx solid #DBDBDB;
		border-radius: 50%;
		overflow: hidden;
		width: 150rpx;
		height: 150rpx;
		box-sizing: border-box;
        margin: 10rpx;
        overflow: hidden;
    }
    .studentList-img{
        width: 169rpx;
        height: 169rpx;
        border-radius: 50%;
        overflow: hidden;
        text-align: center;
        background: #ffffff;
        margin-bottom: 5rpx;
        margin: auto;
    }
    .studentList{
        flex-direction: column;
        justify-content: center;
        margin-bottom: 35rpx;
    }
    .studentList-content{
        flex: 0 0 33.33%;
    }
    .studentList-box{
        flex-wrap: wrap;
    }
</style>
