<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="handleBatchDelete">批量删除</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' }" 
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="40" />
			<el-table-column property="number" label="序号" width="55" type="index" />
			<el-table-column property="username" label="用户账号" show-overflow-tooltip />
			<el-table-column property="nickname" label="用户名称" show-overflow-tooltip />
			<el-table-column property="create_time" 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="getUserListData" />
		</div>
		<!-- 删除弹窗组件 -->
		<deleteDialog v-model:dialogVisible="showDeleteDialog"  @get-user-list="getUserListData"
			:ids="userIds" :deleteMode="deleteMode" :id="userId" />
		<!-- 创建用户弹窗组件 -->
		<addUserDialog v-model:dialogVisible="dialogVisible" :mode="mode" :nickName="nickName" :userName="userName"
			:id="userId" :userRole="userRole" :userStatus="userStatus" :userPassword="userPassword"
			@get-user-list="getUserListData" />
	</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'
import { getUserList, addUser, deleteUser, updateUser, batchDeleteUser } from '@/api/user.ts'
import { DeleteMode } from '@/components/Delete/enum.ts'
import { AddMode } from './components/enum.ts';

const userId = ref<any>([])
const userIds = ref<any>()
const nickName = ref<string>('')
const userName = ref<string>('')
const userRole = ref<number>(0)
const userStatus = ref<boolean>(true)
const userPassword = ref<string>('')
const showDeleteDialog = ref(false)
const deleteMode = ref<DeleteMode>(DeleteMode.SINGLE_DELETE)
const dialogVisible = ref<boolean>(false)
const mode = ref<AddMode>(AddMode.ADD_MODE)
const tableData = ref()
const pageObj = ref({
	total: 12,
	pageSize: 10,
	pageNo: 1
})
const handleEdit = async (row: any) => {
	mode.value = AddMode.UPDATE_MODE
	nickName.value = row.nickname
	userName.value = row.username
	userRole.value = row.role
	userStatus.value = row.status
	userPassword.value = row.password
	dialogVisible.value = true
	userId.value = row.id
	// console.log(row);
}

const handleDelete = async (row: any) => {
	showDeleteDialog.value = true
	deleteMode.value = DeleteMode.SINGLE_DELETE
	userId.value = row.id
	console.log(userId.value);
}
const handleBatchDelete = async () => {
	deleteMode.value = DeleteMode.BATCH_DELETE
	showDeleteDialog.value = true
}
const handleSelectionChange = (data: any) => {
	let array = []
	for (let i = 0; i < data.length; i++) {
		array.push(data[i].id)
	}
	userIds.value = array
	console.log(userIds.value);
	
}

const openAddUserDialog = () => {
	mode.value = AddMode.ADD_MODE
	dialogVisible.value = true
}
const getUserListData = async () => {
	const userList = await getUserList({
		// page: 1,
		size: 10
	})
	tableData.value = userList.data
	pageObj.value.total = tableData.value.length
	console.log(tableData.value.length);

}
onMounted(async () => {
	getUserListData()
})
</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>
