<!-- 当前学生组件 -->
<template>
<view class="ech-card" :class="{'purple':props.bgIndex % 3 === 0,'green':(props.bgIndex-1) % 3 === 0,'blue':(props.bgIndex-2) % 3 === 0}">
	<view class="change-stu">
		<view class="person-tag" :style="{color:(props.bgIndex % 3 === 0?'#6B86FF':(props.bgIndex-1) % 3 === 0?'#45CB9F':(props.bgIndex-2) % 3 === 0?'#22C1F2':'')}">
			执器于身，共建未来
		</view>
		<view class="change" v-if="props.isChange&&listLength!==1" @click="changeStudent">
			<view class="change-icon"></view>
			<view class="change-text">切换学生</view>
		</view>
		<view class="person-contain">
			<view class="stu-img">
				<image src="https://minio.23544.com:9010/data-center/gzh/Avatar.png" mode="学生头像"></image>
			</view>
			<view class="person-info">
				<view class="school">
					<view class="house-icon"></view>
					<view class="school-name">{{props.datas.SchoolName}}</view>
				</view>
				<view class="person-ma">
					<text>{{props.datas.RealName}}</text> | {{props.datas.Grade+props.datas.ClassName}}
				</view>
			</view>
			<view class="person-btn" v-if="!props.isChange">
				<view class="look" @click="openStuInfo()">查看</view>
				<view class="un-bind" @click="unBind()">解绑</view>
			</view>
		</view>
	</view>
</view>
</template>

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
	isChange: {
		type: Boolean,
		required: true
	},
	datas: {
		type: Object,
		required: true
	},
	bgIndex: {
		type: Number,
		required: true
	},
	listLength: {
		type: Number,
		// required: true
	}
})
const emit = defineEmits(['changeStu','onOpenStu','onUnBind'])
// 点击切换
const changeStudent=()=>{
	emit('changeStu')
}
// 点击查看
const openStuInfo=()=>{
	emit('onOpenStu')
}
// 点击解绑
const unBind=()=>{
	emit('onUnBind')
}
</script>

<style lang="scss" scoped>
.ech-card {
	width: 343px;
	height: 121px;
	position: relative;
	left: 50%;
	transform: translate(-50%);
	margin-bottom: 10px;
	overflow: hidden;
}
.purple{
	background: url('@/static/education/purple-bg.png') no-repeat !important;
	background-size: 100% 100% !important;
	.look{
		color: #6B86FF !important;
	}
}
.green{
	background: url('@/static/education/green-bg.png') no-repeat !important;
	background-size: 100% 100% !important;
	.look{
		color: #45CB9F !important;
	}
}
.blue{
	background: url('@/static/education/blue-bg.png') no-repeat !important;
	background-size: 100% 100% !important;
	.look{
		color: #22C1F2 !important;
	}
}
.person-tag{
	position: absolute;
	left: 38rpx;
	top: 10rpx;
	font-size: 20rpx;
	letter-spacing: 22rpx;
}
.change-stu{
	.change {
		position: absolute;
		right: 20px;
		top: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #999;
		font-size: 11px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		.change-icon {
			width: 16px;
			height: 16px;
			background: url('@/static/education/change.png');
			background-size: 100% 100%;
		}
	}
	.person-contain {
		position: absolute;
		left: 5px;
		bottom: 5px;
		display: flex;
		align-items: center;
		width: 95%;
		.stu-img {
			width: 90px;
			height: 90px;
			display: flex;
			justify-content: center;
			align-items: center;
			image{
				width: 68px;
				height: 68px;
				border-radius: 50%;
			}
		}
		.person-info {
			width: 52%;
			.school {
				display: flex;
				align-items: center;
			}
			.house-icon {
				width: 16px;
				height: 16px;
				background: url('@/static/education/house.png');
				background-size: 100% 100%;
				margin-right: 5px;
			}
			.school-name {
				height: 20px;
				color: #FFF;
				font-size: 15px;
				font-style: normal;
				font-weight: 600;
				line-height: 20px;
				letter-spacing: 0.84px;
			}
			.person-ma {
				margin-top: 8px;
				height: 20px;
				color: #FFF;
				font-size: 13px;
				font-style: normal;
				font-weight: 400;
				line-height: 20px;
				letter-spacing: 0.72px;
				text{
					font-weight: 500;
				}
			}
		}
		.person-btn{
			margin:10px 0 0 20px;
			.look {
				width: 55px;
				height: 22px;
				border-radius: 21px;
				background: #FFF;
				box-shadow: 0px 1px 5px 0px rgba(182, 187, 214, 0.66);
				font-size: 12px;
				font-style: normal;
				line-height: 22px;
				letter-spacing: 0.6px;
				text-align: center;
			}
			.un-bind{
				margin-top: 8px;
				width: 55px;
				height: 22px;
				border-radius: 21px;
				background: rgba(0,0,0,0);
				border: 1px solid #fff;
				box-shadow: 0px 1px 5px 0px rgba(182, 187, 214, 0.66);
				font-size: 12px;
				font-style: normal;
				line-height: 22px;
				letter-spacing: 0.6px;
				text-align: center;
				color: #fff;
			}
		}
	}
}
</style>