<template>
	<div class="app-container">
		<el-form
			:model="queryParams"
			ref="queryForm"
			size="small"
			:inline="true"
			v-show="showSearch"
			label-width="68px"
		>
			<el-form-item label="老师姓名" prop="teacherName">
				<el-input
					v-model="queryParams.teacherName"
					placeholder="请输入老师姓名"
					clearable
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item label="性别" prop="gender">
				<el-select
					v-model="queryParams.gender"
					placeholder="请选择性别"
					clearable
				>
					<el-option
						v-for="dict in dict.type.sys_user_sex"
						:key="dict.value"
						:label="dict.label"
						:value="dict.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="联系电话" prop="phone">
				<el-input
					v-model="queryParams.phone"
					placeholder="请输入联系电话"
					clearable
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					size="mini"
					@click="handleQuery"
					>搜索</el-button
				>
				<el-button
					icon="el-icon-refresh"
					size="mini"
					@click="resetQuery"
					>重置</el-button
				>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					type="primary"
					plain
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					v-hasPermi="['system:teacher:add']"
					>新增</el-button
				>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="success"
					plain
					icon="el-icon-edit"
					size="mini"
					:disabled="single"
					@click="handleUpdate"
					v-hasPermi="['system:teacher:edit']"
					>修改</el-button
				>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="danger"
					plain
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDelete"
					v-hasPermi="['system:teacher:remove']"
					>删除</el-button
				>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="warning"
					plain
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					v-hasPermi="['system:teacher:export']"
					>导出</el-button
				>
			</el-col>
			<right-toolbar
				:showSearch.sync="showSearch"
				@queryTable="getList"
			></right-toolbar>
		</el-row>

		<el-table
			v-loading="loading"
			:data="teacherList"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="序号" align="center" type="index" />
			<!-- todo 显示 学校名称 -->
			<el-table-column label="所属学校" align="center">
				<template slot-scope="scope">
					<dict-tag
						:options="dictTables.schoolDict"
						:value="scope.row.schoolId"
					/>
				</template>
			</el-table-column>

			<el-table-column
				label="老师姓名"
				align="center"
				prop="teacherName"
			/>
			<el-table-column label="性别" align="center" prop="gender">
				<template slot-scope="scope">
					<dict-tag
						:options="dict.type.sys_user_sex"
						:value="scope.row.gender"
					/>
				</template>
			</el-table-column>
			<el-table-column label="联系电话" align="center" prop="phone" />
			<el-table-column
				label="操作"
				align="center"
				class-name="small-padding fixed-width"
			>
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row)"
						v-hasPermi="['system:teacher:edit']"
						>修改</el-button
					>
					<el-button
						size="mini"
						type="text"
						@click="handleBindClass(scope.row)"
					>
						<i class="el-icon-bind"></i>
						绑定班级
					</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['system:teacher:remove']"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total > 0"
			:total="total"
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			@pagination="getList"
		/>

		<!-- 添加或修改教师管理对话框 -->
		<el-dialog
			:title="title"
			:visible.sync="open"
			width="500px"
			append-to-body
		>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="所属学校" prop="schoolId">
					<el-select
						v-model="form.schoolId"
						:disabled="disabled"
						placeholder="请选择学校"
						style="width: 100%"
					>
						<el-option
							v-for="dict in dictTables.schoolDict"
							:key="dict.value"
							:label="dict.label"
							:value="dict.value"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="老师姓名" prop="teacherName">
					<el-input
						v-model="form.teacherName"
						placeholder="请输入老师姓名"
					/>
				</el-form-item>
				<el-form-item label="性别" prop="gender">
					<el-select
						v-model="form.gender"
						placeholder="请选择性别"
						style="width: 100%"
					>
						<el-option
							v-for="dict in dict.type.sys_user_sex"
							:key="dict.value"
							:label="dict.label"
							:value="dict.value"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="联系电话" prop="phone">
					<el-input
						v-model="form.phone"
						placeholder="请输入联系电话"
					/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>

		<!-- 绑定班级对话框 -->
		<bind-class-teacher
			ref="bindClassTeacher"
			:dictTables="dictTables"
			@ok="getList"
		/>
	</div>
</template>

<script>
import {
	listTeacher,
	getTeacher,
	delTeacher,
	addTeacher,
	updateTeacher,
} from '@/api/system/teacher';
import Textyixia from '@/mixin/Textyixia';
import BindClassTeacher from './module/BindClassTeacher';

export default {
	name: 'Teacher',
	mixins: [Textyixia],
	dicts: ['sys_user_sex'],
	components: {
		BindClassTeacher,
	},
	data() {
		return {
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 教师管理表格数据
			teacherList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				schoolId: null,
				teacherName: null,
				gender: null,
				phone: null,
			},
			// 表单参数
			form: {},
			disabled: false,
			// 表单校验
			rules: {
				schoolId: [
					{
						required: true,
						message: '学校id不能为空',
						trigger: 'change',
					},
				],
				teacherName: [
					{
						required: true,
						message: '老师姓名不能为空',
						trigger: 'blur',
					},
				],
				gender: [
					{
						required: true,
						message: '性别；0男   1女不能为空',
						trigger: 'change',
					},
				],
				phone: [
					{
						required: true,
						message: '联系电话不能为空',
						trigger: 'blur',
					},
				],
			},
			dictTables: {
				schoolDict: [],
				classDict: [],
			},
		};
	},
	created() {
		this.getList();
		this.dictTableData('tb_school,school_name,id').then(data => {
			this.dictTables.schoolDict = data;
			console.log(this.this.dictTables.schoolDict);
		});
	},
	methods: {
		/** 查询教师管理列表 */
		getList() {
			this.loading = true;
			listTeacher(this.queryParams).then(response => {
				this.teacherList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 表单重置
		reset() {
			this.form = {
				id: null,
				schoolId: null,
				teacherName: null,
				gender: null,
				phone: null,
				delFlag: null,
				createBy: null,
				createTime: null,
				updateBy: null,
				updateTime: null,
			};
			this.resetForm('form');
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.id);
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '添加教师管理';
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			const id = row.id || this.ids;
			this.disabled = true
			getTeacher(id).then(response => {
				this.form = response.data;
				this.open = true;
				this.title = '修改教师管理';
			});
		},
		/** 提交按钮 */
		submitForm() {
			this.$refs['form'].validate(valid => {
				if (valid) {
					if (this.form.id != null) {
						updateTeacher(this.form).then(response => {
							this.$modal.msgSuccess('修改成功');
							this.open = false;
							this.getList();
						});
					} else {
						addTeacher(this.form).then(response => {
							this.$modal.msgSuccess('新增成功');
							this.open = false;
							this.getList();
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const ids = row.id || this.ids;
			this.$modal
				.confirm('是否确认删除教师管理编号为"' + ids + '"的数据项？')
				.then(function () {
					return delTeacher(ids);
				})
				.then(() => {
					this.getList();
					this.$modal.msgSuccess('删除成功');
				})
				.catch(() => {});
		},
		/** 绑定班级按钮操作 */
		handleBindClass(row) {
			this.$refs.bindClassTeacher.handleBindClass(row);
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download(
				'system/teacher/export',
				{
					...this.queryParams,
				},
				`teacher_${new Date().getTime()}.xlsx`
			);
		},
	},
};
</script>
