<template>
	<el-dialog
		title="学生列表"
		width="840px"
		:visible.sync="open"
		@close="closeDialog"

	>
		<el-table 
			v-loading="load"
			:data="tableData" 
			height="380" border 
			style="width: 100%">
			<!-- <el-table-column prop="schoolName" label="学校">
			</el-table-column>
			<el-table-column prop="className" label="班级">
			</el-table-column> -->
			<el-table-column prop="studentName" label="姓名">
			</el-table-column>
			<el-table-column prop="studentNum" label="学号">
			</el-table-column>
			<el-table-column
				label="学生照片"
				align="center"
				prop="studentPic"
				width="100"
			>
				<template slot-scope="scope">
					<image-preview
						:src="scope.row.studentPic"
						:width="50"
						:height="50"
					/>
				</template>
			</el-table-column>
			<el-table-column prop="studentGender" label="性别">
				<template slot-scope="scope">
					<dict-tag
						:options="dict.type.sys_user_sex"
						:value="scope.row.studentGender"
					/>
				</template>
			</el-table-column>
		</el-table>
	</el-dialog>
</template>

<script>
import {
	listStudentAll,
} from '@/api/system/student';
export default {
	name: 'ClassStudentList',
	dicts: ['sys_user_sex'],
	data() {
		return {
			open: false,
			load: false,
			tableData: [],
			form: {
				schoolId: null,
				classId: null,
			}
		};
	},
	methods: {
		closeDialog() {
			this.open = false;
		},
		openDialog(data) {
			this.open = true;
			this.form.schoolId = data.schoolId;
			console.log(data);
			this.form.classId = data.id;
			this.getList();
		},
		getList() {
			this.load = true;
			listStudentAll(this.form).then(res => {
				this.tableData = res.data;
			}).finally(() => {
				this.load = false;
			})
		}
	},
};
</script>

<style scoped lang="scss">
// .el-dialog__body{height: 30vh;}

</style>