<template>
	<div>
		<div class="text-left p-8">
			<el-form inline>
				<el-form-item>
					<el-button type="primary" plain @click="openAddUserDialog">创建用户</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="danger" plain @click="handleDelete">批量删除</el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-table :data="tableData" style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
			:cell-style="{ textAlign: 'center' }" :row-style="{ height: '58px' }">
			<el-table-column type="selection" width="40" />
			<el-table-column property="number" label="序号" width="55" />
			<el-table-column property="userCount" label="用户账号" show-overflow-tooltip />
			<el-table-column property="userName" label="用户名称" show-overflow-tooltip />
			<el-table-column property="userRemark" label="备注" show-overflow-tooltip />
			<el-table-column property="userPassword" label="用户密码" show-overflow-tooltip />
			<el-table-column property="createTime" label="创建时间" width="280" show-overflow-tooltip />
			<el-table-column label="操作" width="220">
				<template #default="scope">
					<el-button type="primary" 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="pagination w-full flex flex-row-reverse pr-4 m-t-4">
			<Pagination :total="pageObj.total" v-model:page="pageObj.pageNo" v-model:limit="pageObj.pageSize"
				@pagination="getData" />
		</div>
		<!-- 删除弹窗组件 -->
		<deleteDialog v-model:dialogVisible="showDeleteDialog"  @mode="deleteMode" />
		<!-- 创建用户弹窗组件 -->
		<addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :user-count="userCount" :user-name="userName"
			:user-remark="userRemark" :user-password="userPassword" />
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import deleteDialog from '@/components/Delete/index.vue'
import addUserDialog from './components/addUserDialog.vue'

const userCount = ref('')
const userName = ref('')
const userRemark = ref('')
const userPassword = ref('')
const showDeleteDialog = ref(false)
const deleteMode = ref('2')
const dialogVisible = ref(false)
const mode = ref('1')
const tableData = ref([
	{
		number: '1',
		userCount: 'admin',
		userName: '管理员',
		userRemark: '-',
		userPassword: '123456',
		createTime: '2025-01-01 00:00:00',
	},
	{
		name: '1',
	},
	{
		name: '1',
	},
	{
		name: '1',
	},
	{
		name: '1',
	},
	{
		name: '1',
	},
	{
		name: '1',
	},
	{
		name: '1',
	},
	{
		name: '1',
	},
	{
		name: '1',
	}
])
const pageObj = ref({
	total: 10,
	pageSize: 10,
	pageNo: 1
})
const handleEdit = (row: any) => {
	mode.value = '2'
	// userCount.value = row.name
	// userName.value = row.name
	// userRemark.value = row.name
	// userPassword.value = row.name
	dialogVisible.value = true
	console.log(row);
}

const handleDelete = (row: any) => {
	showDeleteDialog.value = true
}

const getData = () => {
	console.log('getData');
}

const handleDeleteConfirm = () => {

}
const openAddUserDialog = () => {
	mode.value = '1'
	dialogVisible.value = true
}

onMounted(() => {
	console.log('系统管理');
})
</script>

<style scoped>
/* 去除按钮边框 */
.el-button:focus {
	outline: none;
}
</style>

<style>
/* 修改弹窗样式 */
.el-dialog {
	background-image: url("@/assets/picture/dialog1.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;

	.el-dialog__title {
		color: #ffffff;
	}
}

/* 修改el输入框的样式 */
.el-input__wrapper {
	background-color: #1d5484;
	box-shadow: none;
}
</style>
