<link rel="stylesheet" href="/css/swiper-3.3.1.min.css" type="text/css">
<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper" id="studentItem">
    </div>
    <!-- Add Scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>
<!--swiper-3.3.1.min.js的引入需放在body的后面-->
<script src="/js/swiper-3.3.1.min.js"></script>

.swiper-container { margin: 0 auto 15px auto; width: 100%; height: 100px;}
.swiper-slide { position: relative; margin-right: 10px; width: 100px; display: flex; flex-direction:column; justify-content: center; align-items: center; text-align: center; font-size: 12px; background: #f7f8f8; border-radius: 10px;}
.slide_student_img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover;}
.slide_close{ position: absolute; top: 8px; right: 8px; width: 12px; height: 12px;}
.swiper-slide .d1{ margin-top: 8px;}

var classStudentsArr = []//选中的数组
$(function(){	
	var swiper = new Swiper('.swiper-container', {
        scrollbar: '.swiper-scrollbar',
        scrollbarHide: true,
        slidesPerView: 'auto',
        centeredSlides: false,//true的话是居中显示
        spaceBetween: 0,
        // 防止左右滑动出现无限空白
        observer:true,
        observeParents:true,
        grabCursor: true
    });
})

function getStudentItem(classStudentsArr){
	$("#studentItem").html("")
	for(var q = 0; q < classStudentsArr.length; q++){
		let res = classStudentsArr[q]
   		let name = res.studentName.length > 4 ? (res.studentName.substr(0,4) + '...') : res.studentName
		let odiv = '<div class="swiper-slide">\n'+
		'	<img src="/static/images/physical/close.png" class="slide_close" />\n'+
		'	<img src="'+ res.headPortrait +'" class="slide_student_img" />\n'+
		'	<div class="d1">'+(res.studentNumber ? (res.studentNumber +'号&nbsp;' + name) : ('未知&nbsp;' + name))+'</div>\n'+
		'</div>'
		$("#studentItem").append(odiv)
	}
}

$(document).on('click', '.swiper-wrapper .slide_close',function(){
	if(classStudentsArr.length <= 1){
		$.toptip("至少评价一个学生！", 'error');
		return
	}
    let oidx = $(this).parent().index()
    $.confirm({
	    title: '提示',
	    text: '是否删除该学生',
	    onOK: function () {
	        //点击确认
	        classStudentsArr.splice(oidx, 1);//删除选中的项
	        getStudentItem(classStudentsArr)
	    },
	    onCancel: function () {}
	});
});