<template>
	<page-container :title="$t(String($route.meta.title))" :sub-title="$t('pages.acl.user.subTitle')">
		<template #ops>
			<a-row>
				<a-col :span="18">
					<a-input-search
						v-model:value="searchKey"
						:placeholder="$t('pages.acl.user.search.placeholder')"
						allow-clear
						enter-button
						@search="loadUsers()"
					>
						<template #addonBefore>
							<a-select
								v-model:value="selectedSex"
								allow-clear
								:placeholder="$t('pages.acl.user.sex.placeholder')"
								style="width: 80px"
							>
								<a-select-option v-for="sex in sexes" :key="sex.code" :value="sex.name">
									{{ useAppStore().isCN ? sex.description : sex.code }}
								</a-select-option>
							</a-select>
						</template>
					</a-input-search>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" style="margin-left: 10px" @click="addOrEditUser()">
						<template #icon>
							<icon-font type="icon-plus" />
						</template>
						{{ $t('pages.acl.user.add') }}
					</a-button>
				</a-col>
			</a-row>
		</template>
		<div style="min-height: calc(100vh - 305px)">
			<a-table
				:columns="columns"
				:data-source="userPage?.records"
				bordered
				:pagination="pagination"
				:loading="loading"
				row-key="name"
				@expand="tryLoadPermissions"
			>
				<template #expandedRowRender="{ record }">
					<permission-info-panel
						type="user"
						:ref-key="record.name"
						:name="record.fullName"
						:permissions="record.permissions"
					></permission-info-panel>
				</template>
				<template #bodyCell="{ column, record }">
					<template v-if="column.dataIndex === 'sex'">
						<icon-font v-if="record.sex === 'MALE'" type="icon-male" :title="record.sexInfo?.description"></icon-font>
						<icon-font v-else type="icon-female" :title="record.sexInfo.description"></icon-font>
					</template>
					<template v-if="column.dataIndex === 'operation'">
						<a-button type="link" @click="addOrEditUser(record)">
							<template #icon>
								<icon-font type="icon-edit" />
							</template>
							{{ $t('pages.acl.user.edit') }}
						</a-button>
						<a-popconfirm @confirm="resetPassword(record.name)">
							<template #title>
								<p>
									{{ $t('pages.acl.user.confirm.reset.title', { name: record.name }) }}
								</p>
								<p>{{ $t('pages.acl.user.confirm.reset.description') }}</p>
							</template>
							<a-button type="link" style="margin-left: 10px">
								<template #icon>
									<icon-font type="icon-reset-password" />
								</template>
								{{ $t('pages.acl.user.reset') }}
							</a-button>
						</a-popconfirm>
						<a-popconfirm
							:title="$t('pages.acl.user.confirm.delete.title', { name: record.name })"
							@confirm="deleteUser(record.id)"
						>
							<a-button type="link" danger style="margin-left: 10px">
								<template #icon>
									<icon-font type="icon-delete" />
								</template>
								{{ $t('pages.acl.user.delete') }}
							</a-button>
						</a-popconfirm>
					</template>
				</template>
			</a-table>
		</div>
		<!-- 重置密码的回显框 -->
		<a-modal
			v-model:open="passwordModalShow"
			:title="$t('pages.acl.user.modal.reset.title')"
			@ok="passwordModalShow = false"
		>
			<a-alert
				:message="$t('pages.acl.user.modal.reset.title')"
				:description="$t('pages.acl.user.modal.reset.description')"
				type="success"
				show-icon
			></a-alert>
			<a-typography-paragraph copyable>{{ newPassword }}</a-typography-paragraph>
		</a-modal>
		<!-- 添加编辑用户弹窗 -->
		<form-drawer
			ref="modalForm"
			v-model="user"
			:form-items="items"
			:config="formConfig"
			:hidden-fields="hiddenFields"
			:disabled-fields="disabledFields"
			:title="modalTitle"
			@ok="doAddUser"
		/>
	</page-container>
</template>
<script lang="ts" setup>
	import { api } from '@/api'
	import type { Codebook, IPage } from '@/api/api'
	import PermissionInfoPanel from '../components/permission-info-panel.vue'
	import { notification } from 'ant-design-vue'
	import { useI18n } from 'vue-i18n'
	import { useAppStore } from '@/stores/app'
	import FormDrawer from '@/components/form-render/form-drawer.vue'
	import { config, formItems } from './userForm'
	import { FormDataType } from '@/components/form-render/form-render-types'
	const { t } = useI18n()
	const sexes = ref<Codebook[]>([])
	api.aclApi.user.sexes((data) => {
		sexes.value = data
	})

	const searchKey = ref('')
	const selectedSex = ref<'MALE' | 'FEMALE' | undefined>()
	const userPage = ref<IPage<acl.User>>()
	const loading = ref(false)
	const loadUsers = (sex: 'MALE' | 'FEMALE' | undefined = undefined, page = 1, size = 10) => {
		loading.value = true
		api.aclApi.user.users(
			{
				page: page || userPage.value?.current,
				size: size || userPage.value?.size,
				key: searchKey.value,
				sex: sex || selectedSex.value,
			},
			(data) => {
				loading.value = false
				userPage.value = data
			},
		)
	}
	loadUsers()
	//表格列
	const columns = [
		{
			title: t('pages.acl.user.table.columns.name'),
			dataIndex: 'name',
		},
		{
			title: t('pages.acl.user.table.columns.fullName'),
			dataIndex: 'fullName',
		},
		{
			title: t('pages.acl.user.table.columns.mobile'),
			dataIndex: 'mobile',
		},
		{
			title: t('pages.acl.user.table.columns.email'),
			dataIndex: 'email',
		},
		{
			title: t('pages.acl.user.table.columns.sex'),
			dataIndex: 'sex',
		},
		{
			title: t('pages.acl.user.table.columns.operation'),
			dataIndex: 'operation',
		},
	]

	//分页信息
	const pagination = computed(() => {
		return {
			current: userPage.value?.current,
			pageSize: userPage.value?.size,
			total: userPage.value?.total,
			onChange: (page: number, pageSize: number) => {
				console.log(page, pageSize)
				loadUsers(undefined, page, pageSize)
			},
		}
	})

	//待添加/编辑的用户
	const user = ref<Partial<acl.User>>({})
	//表单
	const modalForm = ref<typeof FormDrawer>()

	const formConfig = computed(() => {
		return config
	})
	//表单配置
	const items = computed(() => {
		return formItems(sexes.value)
	})

	//禁用字段
	const disabledFields = computed(() => {
		return user.value.id ? ['name'] : []
	})
	const hiddenFields = computed(() => {
		return user.value.id ? ['password'] : []
	})

	//弹窗标题
	const modalTitle = computed(() => {
		return t(user.value.id ? 'pages.acl.user.edit' : 'pages.acl.user.add')
	})

	const addOrEditUser = (u?: Record<string, unknown>) => {
		user.value = { ...(u ?? { sex: 'FEMALE' }) }
		modalForm.value?.show()
	}

	//添加/编辑用户接口调用
	const doAddUser = (user: FormDataType) => {
		api.aclApi.user.saveOrUpdateUser(user as unknown as acl.User, () => {
			modalForm.value?.close()
			notification.success({
				message: t('pages.acl.user.notification.success'),
				description: t('pages.acl.user.notification.addOrEdit.description'),
				onClose: () => {
					loadUsers(undefined, 1)
				},
			})
		})
	}

	const newPassword = ref('')
	const passwordModalShow = ref(false)

	//重置密码
	const resetPassword = (name: string) => {
		api.aclApi.user.resetPassword(name, (data) => {
			newPassword.value = data
			passwordModalShow.value = true
		})
	}

	const deleteUser = (id: number) => {
		api.aclApi.user.deleteUser(id, () => {
			notification.success({
				message: t('pages.acl.user.notification.success'),
				description: t('pages.acl.user.notification.delete.description'),
				onClose: () => {
					loadUsers(undefined, 1)
				},
			})
		})
	}
	const tryLoadPermissions = (expanded: boolean, record: acl.User & { permissions?: acl.Permission[] }) => {
		if (expanded && !record.permissions) {
			api.aclApi.user.permissions(record.name, (data) => {
				record.permissions = data
			})
		}
	}
</script>
