<template>
	<div>

		<el-card shadow="never">
			<el-row>
				<el-col :span="24">
					<el-form :inline="true" :model="state.query" class="demo-form-inline">
						<el-form-item label="账号：">
							<el-input v-model="state.query.username" placeholder="请输入账号" clearable />
						</el-form-item>

						<el-form-item>
							<el-button type="primary"  @click="init">查询</el-button>
						</el-form-item>
						<el-form-item >
							<el-button type="success"  @click="openAddDialog">新增</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</el-card>

		<el-card  shadow="never">
			<!--表格-->
			<el-row>
				<el-col :span="24">
					<el-table :data="state.getList">
						<!--					列表结开始-->
						<el-table-column prop="username" label="账号" align="center"/>
						<el-table-column prop="nickName" label="昵称" align="center"/>
						<el-table-column prop="phone" label="手机号" align="center"/>
						<el-table-column label="密钥" align="center">
							<template #default="scope">
								<el-button type="primary" size="small" @click="viewHex(scope.row.hex)">查看密钥</el-button>
							</template>
						</el-table-column>

						<el-table-column prop="createDate" label="创建时间" align="center"/>
						<!--列表结束-->
						<el-table-column label="操作" align="center" >
							<template #default="scope">
								<el-button @click="edit(scope.row)" size="small">编辑</el-button>
								<el-button @click="del(scope.row.id)" type="danger" size="small">删除</el-button>
							</template>
						</el-table-column>
						<template v-slot:empty>
							<el-empty description="数据去外太空了~" />
						</template>
					</el-table>


					<!-- 分页 -->
					<div class="pagination-container" v-if="state.query.total > 0">
						<el-pagination
							:current-page="state.query.page"
							:page-size="state.query.limit"
							:total="state.query.total"
							:page-sizes="[5,10,20,50]"
							layout="total, sizes, prev, pager, next, jumper"
							background
							@size-change="handleSizeChange"
							@current-change="handlePageChange"
						/>
					</div>

				</el-col>
			</el-row>
		</el-card>

		<!-- 新增/编辑对话框 -->
		<el-dialog v-model="state.dialogVisible" title="新增" width="50%">
			<el-form :model="state.formData" ref="formRef" label-width="100px">
				<!--				表单开始===============================================================================================================================-->
				<el-form-item label="账号" prop="username" :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]">
					<el-input v-model="state.formData.username"/>
				</el-form-item>
				<el-form-item label="密码" >
					<el-input v-model="state.formData.password"/>
				</el-form-item>

				<el-form-item label="昵称" prop="nickName" :rules="[{ required: true, message: '请输入昵称', trigger: 'blur' }]">
					<el-input v-model="state.formData.nickName"/>
				</el-form-item>
				<el-form-item label="手机号" prop="phone" :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }]">
					<el-input v-model="state.formData.phone"/>
				</el-form-item>
				<!--表单结束===============================================================================================================================-->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="state.dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveTransaction(formRef)">保存</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script setup lang="ts">
import { ElMessageBox, FormInstance } from 'element-plus'
const formRef = ref<FormInstance>()
const state = reactive({
	route:"sys/user-front",
	dialogVisible:false,
	getList: [],//获取数据
	query:{
		total: 0, // 总记录数
		page: 1, // 当前页码
		limit: 10, // 每页显示的记录数
		username: "",
	},
	formData:{}
})
// 查看密钥弹窗
const viewHex = (hex: string) => {
	ElMessageBox.alert(hex, '密钥内容', {
		confirmButtonText: '确定',
		type: 'info'
	})
}
// 生成年份列表 1990-2015
const years = [];
for (let year = 1990; year <= 2015; year++) {
	years.push(year.toString());
}

// 获取交易记录
const init = () => {
	adminRequest.get(`${state.route}/page`, {
		params: state.query
	}).then((res:any) => {
		state.getList = res.data.list
		state.query.total = res.data.total
	})
}
// 新增交易记录
const openAddDialog = () => {
	state.formData = {}
	state.dialogVisible = true
}
// 编辑交易记录
const edit = (row: any) => {
	state.formData = row
	delete  state.formData.password
	state.dialogVisible = true
}

// 保存记录
const saveTransaction = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			if (state.formData.id) {
				// 更新交易记录
				adminRequest.put(`${state.route}`, state.formData).then(()=>{
					init()
					state.dialogVisible = false
					ElMessage.success("提交成功~")
				})
			} else {
				// 新增交易记录
				adminRequest.post(`${state.route}`, state.formData).then(()=>{
					init()
					state.dialogVisible = false
					ElMessage.success("提交成功~")
				})
			}

		}
	})
}



// 删除记录
const del = async (id: number) => {
	try {
		await adminRequest.delete(`${state.route}/${id}`)
		init()
		ElMessage.success("删除成功~")
	} catch (error) {
		ElMessage.error("删除失败~")
	}
}

// 页码改变时的处理函数
const handlePageChange = (page: number) => {
	state.query.page = page
	init()
}
// 页面加载时获取交易记录
onMounted(() => {
	init()
})
</script>
<style scoped>
.dialog-footer {
	text-align: right;
}
.pagination-container {
	margin-top: 16px;
	display: flex; justify-content: flex-end;
}
</style>
<route lang="json">
{
"meta": {
"layout": "admin"
}
}
</route>
