<template>
	<el-row :gutter="20">
		<el-col :span="24">
			<el-card shadow="hover">
				<el-form :inline="true" :model="state.queryParams">
					<el-form-item label="用户账号">
						<el-input v-model="state.queryParams.username" placeholder="请输入账号" clearable @clear="handleReset" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleQuery"><i class="el-icon-search"></i> 查询</el-button>
						<el-button @click="handleReset"><i class="el-icon-refresh"></i> 重置</el-button>
						<el-button type="success" @click="handleAdd"><i class="el-icon-plus"></i> 新增</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</el-col>
	</el-row>

	<!-- 用户表格 -->
	<el-row style="margin-top: 20px">
		<el-col :span="24">
			<el-table :data="state.getList" style="width: 100%" border>
				<el-table-column prop="id" label="用户编号" align="center" />

				<el-table-column prop="username" label="用户账号" align="center" />
				<el-table-column prop="role" label="角色" align="center">
					<template #default="scope">
						<el-tag :type="scope.row.role === 0 ? 'danger' : 'success'">
							{{ scope.row.role === 0 ? '管理员' : '普通用户' }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="180">
					<template #default="scope">
						<el-button limit="small" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button limit="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-col>
	</el-row>

	<!-- 分页 -->
	<el-row style="margin-top: 20px">
		<el-col :span="24" style="text-align: right">
			<el-pagination
				background
				layout="prev, pager, next, limits, total"
				:total="state.page.total"
				:page-limits="[10, 20, 50]"
				:page-limit="state.page.limit"
				@page-change="handlePageChange"
				@limit-change="handlelimitChange"
			/>
		</el-col>
	</el-row>

	<!-- 新增/编辑对话框 -->
	<el-dialog :title="state.dialog.title" v-model="state.dialog.visible" width="500px">
		<el-form :model="state.form" :rules="rules" ref="formRef" label-width="80px">
			<el-form-item label="用户账号" prop="username">
				<el-input v-model="state.form.username" placeholder="请输入账号" />
			</el-form-item>

			<el-form-item label="密码" prop="password" v-if="state.dialog.isAdd">
				<el-input v-model="state.form.password" placeholder="请输入密码" show-password />
			</el-form-item>
			<el-form-item label="角色" prop="role">
				<el-select v-model="state.form.role" placeholder="请选择角色">
					<el-option label="管理员" :value="0" />
					<el-option label="普通用户" :value="1" />
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="state.dialog.visible = false">取消</el-button>
			<el-button type="primary" @click="submitForm">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
interface User {
	id?: number
	username: string
	phone: string
	role: number
	password?: string
}
const formRef = ref<FormInstance>()
const state = reactive({
	getList: [] as User[],
	page: {
		page: 1,
		limit: 10,
		total: 0
	},
	queryParams: {
		username: ''
	},
	form: {
		id: undefined,
		username: '',
		phone: '',
		role: 1,
		password: ''
	} as User,
	dialog: {
		visible: false,
		title: '',
		isAdd: false
	}
})

const rules = reactive<FormRules>({
	username: [{ required: true, message: '请输入用户账号', trigger: 'blur' }],

	role: [{ required: true, message: '请选择角色', trigger: 'change' }],
	password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})

// 初始化数据
function init() {
	adminRequest.get("/api/users/page", {
		params: {
			page: state.page.page,
			limit: state.page.limit,
			username: state.queryParams.username
		}
	}).then(res => {
		state.getList = res.data.list
		state.page = res.data.page
	})
}

// 查询
function handleQuery() {
	state.page.page = 1
	init()
}

// 重置查询
function handleReset() {
	state.queryParams.username = ''
	handleQuery()
}

// 分页变化
function handlePageChange(page: number) {
	state.page.page = page
	init()
}

// 每页条数变化
function handlelimitChange(limit: number) {
	state.page.limit = limit
	init()
}

// 新增
function handleAdd() {
	state.dialog = {
		visible: true,
		title: '新增用户',
		isAdd: true
	}
	state.form = {
		username: '',
		phone: '',
		role: 1,
		password: ''
	}
}

// 编辑
function handleEdit(row: User) {
	state.dialog = {
		visible: true,
		title: '编辑用户',
		isAdd: false
	}
	state.form = JSON.parse(JSON.stringify(row))
}

// 删除
function handleDelete(row: User) {
	ElMessageBox.confirm(`确认删除用户【${row.username}】吗？`, '提示', {
		type: 'warning'
	}).then(() => {
		adminRequest.delete(`/api/users/${row.id}`).then(() => {
			ElMessage.success('删除成功')
			init()
		})
	}).catch(() => {})
}

// 提交表单
function submitForm() {
	formRef.value?.validate((valid) => {
		if (valid) {
			const url = state.dialog.isAdd ? '/api/users' : `/api/users/${state.form.id}`
			const method = state.dialog.isAdd ? 'post' : 'put'
			adminRequest[method](url, state.form).then(() => {
				ElMessage.success(state.dialog.isAdd ? '新增成功' : '修改成功')
				state.dialog.visible = false
				init()
			})
		}
	})
}

onMounted(() => {
	init()
})
</script>

<style scoped>
.el-form--inline .el-form-item {
	margin-right: 10px;
}
</style>
