<template>
	<div style="line-height: 4;">
		<el-row class="search-bar" justify="start" align="middle" >
			<el-input placeholder="请输入关键词进行搜索" clearable v-model="keyword" class="search-input"
				@keyup.enter="handleSearch" 
				suffix-icon="Search"
				>
			</el-input>
			<el-button type="primary" @click="handleSearch">搜索</el-button>
			<el-button type="primary" @click="handleAdd">
				<el-icon><CirclePlus /></el-icon>
				<span>新增</span>
			</el-button>
			<el-button type="danger" @click="handeleBatchDel">
				<el-icon><Delete /></el-icon>
				<span>批量删除</span>
			</el-button>
		</el-row>
		<el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="id" label="ID" width="160" align="center" />
			<el-table-column prop="username" label="用户名" width="160" align="center" />
			<el-table-column prop="avatar" label="头像" align="center">
				<template #default="{ row }">
				      <img
				        v-if="row.avatar"
				        :src="row.avatar"
				        alt="头像"
				        class="avatar-img"
				      />
				      <span v-else>无头像</span>
				    </template>
			</el-table-column>
			<el-table-column prop="gender" label="性别" width="160" align="center" />
			<el-table-column prop="email" label="邮箱" width="160" align="center" />
			<el-table-column prop="address" label="地区"  align="center" />
			<el-table-column prop="mobile" label="手机" width="160" align="center" />
			<el-table-column prop="role" label="角色" width="160" align="center" />
			<el-table-column label="操作" width="160">
				<template v-slot="scope">
					<el-button type="success" plain @click="handleEdit(scope.row)">编辑</el-button>
					<el-button type="danger" plain @click="handleDelete(scope.row)">删除</el-button>
				</template>

			</el-table-column>
		</el-table>
		<div class="demo-pagination-block">
			<el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[2, 4, 6, 8]"
				layout="total, sizes, prev, pager, next, jumper" :total="total"
				@size-change="handleSizeChange(pageSize)" @current-change="handleCurrentChange(pageNum)" />
		</div>
		<el-dialog v-model="isDialogVisibleAdd" title="添加用户" width="400px">
			<el-form label-width="auto">
				<el-upload class="avatar-uploader" action="http://localhost:8080/file/upload" :show-file-list="false"
					:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<img v-if="formData.avatar" width="100px" height="100px" :src="formData.avatar" class="avatar">
					<el-icon v-else class="avatar-uploader-icon">
						<Plus />
					</el-icon>
				</el-upload>
				<el-form label-width="auto" style="max-width: 600px">
					<el-form-item label="用户名">
						<el-input v-model="formData.username" placeholder="请输入用户名" />
					</el-form-item>
					<el-form-item label="密码">
						<el-input v-model="formData.password" placeholder="请输入密码" show-password />
					</el-form-item>
					<el-form-item label="性别">
						<el-radio-group v-model="formData.gender">
							<el-radio label="男">男</el-radio>
							<el-radio label="女">女</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="邮箱">
						<el-input v-model="formData.email" placeholder="请填写邮箱" />
					</el-form-item>
					<el-form-item label="地区">
						<el-cascader :options="pcaTextArr" v-model="formData.address" placeholder="请选择地区"
							:props="{ checkStrictly: true }" />
					</el-form-item>
					<el-form-item label="绑定手机">
						<el-input v-model="formData.mobile" placeholder="请输入手机号" />
					</el-form-item>
					<el-form-item label="角色">
						<el-radio-group v-model="formData.role">
							<el-radio label="student">学生</el-radio>
							<el-radio label="teacher">教师</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</el-form>
			<template #footer>
				<el-button @click="isDialogVisibleAdd = false">取消</el-button>
				<el-button type="primary" @click="confirmAdd">确定</el-button>
			</template>
		</el-dialog>
		<el-dialog v-model="isDialogVisibleEdit" title="编辑用户" width="400px">
			<el-form label-width="auto">
				<el-upload class="avatar-uploader" action="http://localhost:8080/file/upload" :show-file-list="false"
					:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<img v-if="formData.avatar" width="100px" height="100px" :src="formData.avatar" class="avatar">
					<el-icon v-else class="avatar-uploader-icon">
						<Plus />
					</el-icon>
				</el-upload>
				<el-form label-width="auto" style="max-width: 600px">
					<el-form-item label="用户名">
						<el-input v-model="formData.username" placeholder="请输入用户名" />
					</el-form-item>
					<el-form-item label="密码">
						<el-input v-model="formData.password" placeholder="请输入密码" show-password />
					</el-form-item>
					<el-form-item label="性别">
						<el-radio-group v-model="formData.gender">
							<el-radio label="男">男</el-radio>
							<el-radio label="女">女</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="地区">
						<el-cascader :options="pcaTextArr" v-model="formData.address" placeholder="请选择地区"
							:props="{ checkStrictly: true }" />
					</el-form-item>
					<el-form-item label="绑定手机">
						<el-input v-model="formData.mobile" placeholder="请输入手机号" />
					</el-form-item>
					<el-form-item label="角色">
						<el-radio-group v-model="formData.role">
							<el-radio label="user">用户</el-radio>
							<el-radio label="admin">管理员</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</el-form>
			<template #footer>
				<el-button @click="isDialogVisibleEdit = false">取消</el-button>
				<el-button type="primary" @click="confirmEdit">确定</el-button>
			</template>
		</el-dialog>
		<el-dialog v-model="isDialogVisibleDelete" title="警告" width="500px" center>
			<span>确定删除此用户信息吗？</span>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="isDialogVisibleDelete = false">取消</el-button>
					<el-button type="primary" @click="confirmDelete()">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog v-model="isDialogVisibleBatchDel" title="警告" width="500px" center>
			<span>确定批量删除这些用户信息吗？</span>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="isDialogVisibleBatchDel=false">取消</el-button>
					<el-button type="primary" @click="confirmBatchDel()">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>

</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue';
	import request from '../../request';
	import { onMounted } from 'vue';
	import { pcaTextArr } from 'element-china-area-data';
	import { ElMessage } from 'element-plus';
	const isDialogVisibleAdd = ref(false)
	const isDialogVisibleEdit = ref(false)
	const isDialogVisibleDelete = ref(false)
	const isDialogVisibleBatchDel = ref(false)
	const multipleSelection = ref([])
	const tableData = ref([])
	const formData = reactive({
		id: '',
		username: '',
		password: '',
		gender: '',
		email: '',
		address: [],
		mobile: '',
		role: '',
		avatar:'',
	});
	const keyword = ref('');
	const pageNum = ref(1)
	const pageSize = ref(6)
	const total = ref(0)
	const handleSearch = () => {
		pageNum.value = 1; // 搜索时从第一页开始
		loadPageData();
	};
	const loadPageData = () => {
		request.get("http://localhost:8080/user/student?pageNum=" + pageNum.value + "&pageSize=" + pageSize.value +
			"&keyword=" + keyword.value)
			.then((res) => {
				if (res.data.code == '200') {
					tableData.value = res.data.data.records;
					total.value = res.data.data.total;
				}
			})
			.catch((err) => console.error(err));
	};
	const handleSizeChange = (newPageSize) => {
		console.log(pageSize)
		pageSize.value = newPageSize
		loadPageData()
	}
	const handleCurrentChange = (newPageNum) => {
		console.log(pageNum)
		pageNum.value = newPageNum
		loadPageData()
	}
	onMounted(() => {
		loadPageData();
	});
	const handleAdd = () => {
		formData.id = '';
		formData.username = '';
		formData.password = '';
		formData.gender = '';
		formData.email = '';
		formData.address = [];
		formData.mobile = '';
		formData.role = '';
		formData.avatar='';
		isDialogVisibleAdd.value = true
	}
	const confirmAdd = () => {
		request.post('http://localhost:8080/user', {
			username: formData.username,
			password: formData.password,
			gender:formData.gender,
			email: formData.email,
			address: formData.address.join(' '),
			mobile: formData.mobile,
			role: formData.role,
			avatar:formData.avatar
			
		})
			.then((res) => {
				if (res.data.code == '200') {
					ElMessage.success('用户信息新增成功');
					loadPageData();
				} else {
					ElMessage.error('用户信息新增失败');
				}
			})
			.catch((error) => {
				console.error('用户信息新增失败:', error);
				ElMessage.error('用户信息新增失败，请稍后再试');
			});

		isDialogVisibleAdd.value = false;
	}
	const handleEdit = (row) => {
		const { id, username, password, gender, email, address, mobile, role, avatar } = row;
		formData.id = id;
		formData.username = username;
		formData.password = password;
		formData.gender = gender;
		formData.email = email;
		formData.address = address?address.split(' '):''; // 假设地址是用空格分隔的字符串
		formData.mobile = mobile;
		formData.role = role;
		formData.avatar=avatar;
		isDialogVisibleEdit.value = true
	}
	const confirmEdit = () => {
		request.post("http://localhost:8080/user", {
			id: formData.id,
			username: formData.username,
			password:formData.password,
			gender: formData.gender,
			email: formData.email,
			address: formData.address?formData.address.join(' '):'',
			mobile: formData.mobile,
			role: formData.role,
			avatar:formData.avatar
		})
			.then((res) => {
				if (res.data.code == '200') {
					ElMessage.success('用户信息修改成功');
					loadPageData();
				} else {
					ElMessage.error('用户信息修改失败');
				}
			})
			.catch((error) => {
				console.error('用户信息修改失败:', error);
				ElMessage.error('用户信息修改失败，请稍后再试');
			});
		isDialogVisibleEdit.value = false;
	}
	const delId = ref(-1)
	const handleDelete = (row) => {
		delId.value = row.id
		isDialogVisibleDelete.value = true
	}
	const confirmDelete = () => {
		request.delete(`http://localhost:8080/user/${delId.value}`).then(res => {
			if (res.data.code == '200') {
				ElMessage.success("删除成功")
				loadPageData()
			} else {
				ElMessage.error("删除失败")
			}
		})
		isDialogVisibleDelete.value = false
	}
	const handleSelectionChange = (val) => {
		multipleSelection.value = val
	}
	const handeleBatchDel = () => {
		isDialogVisibleBatchDel.value = true

	}
	const confirmBatchDel = () => {
		let ids = multipleSelection.value.map(v => v.id)
		if(ids.length==0){
			ElMessage.error("未选择任何用户信息，删除失败")
			isDialogVisibleBatchDel.value = false
			return;
		}
		request.post("http://localhost:8080/user/del/batch", ids).then(res => {
			if (res.data.code == '200') {
				ElMessage.success("批量删除成功")
				loadPageData()
			} else {
				ElMessage.error("批量删除失败")
			}
		})
		isDialogVisibleBatchDel.value = false


	}
	const handleAvatarSuccess = (response) => {
	  if (response && response.data) {
	    formData.avatar = response.data; 
	    ElMessage.success("头像上传成功");
	  } else {
	    ElMessage.error("上传失败，请联系管理员");
	  }
	};
	
	const beforeAvatarUpload = (file) => {
	  const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png';
	  const isLt2M = file.size / 1024 / 1024 < 2;
	
	  if (!isJPGorPNG) {
	    ElMessage.error("上传头像图片只能是 JPG/PNG 格式!");
	  }
	  if (!isLt2M) {
	    ElMessage.error("上传头像图片大小不能超过 2MB!");
	  }
	  return isJPGorPNG && isLt2M;
	};
</script>

<style scoped>
	.search-bar {
		width: 100%;
		padding: 20px 30px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 20px;
	}

	.search-input {
		width: 300px;
	}

	.demo-pagination-block+.demo-pagination-block {
		margin-top: 10px;
	}
	.avatar-img{
		width: 100px;
		height: 100px
	}
</style>