<template>
	<a-layout class="portal-layout">
		<a-layout-header class="header" :style="{ background: menuColor, color: token.colorPrimary }">
			<div class="logo">
				<img :src="chinare" alt="logo" />
			</div>
			<a-menu
				:selected-keys="current"
				theme="dark"
				mode="horizontal"
				:items="items"
				:style="{ background: menuColor, height: '64px', lineHeight: '64px', flex: ' 1 1 0%' }"
			/>
			<a-space class="right-content">
				<a-dropdown v-if="user.userName">
					<a class="ant-dropdown-link" @click.prevent>
						<a-avatar v-if="user?.avatar" :size="36" :title="user?.fullName || user?.userName" :src="user?.avatar" />
						<a-avatar
							v-else
							:size="36"
							:title="user?.fullName || user?.userName"
							:style="{
								backgroundColor: menuColor,
							}"
							class="right-acatar"
						>
							{{ (user?.fullName || user?.userName || '').substring(0, 1).toUpperCase() }}
						</a-avatar>
						<a-typography-text :style="{ color: '#eee' }">{{ user.fullName }}</a-typography-text>
					</a>
					<template #overlay>
						<a-menu>
							<a-menu-item v-if="user.isAdmin">
								<a href="javascript:;" @click="router.push('/admin')">进入管理</a>
							</a-menu-item>
							<a-menu-item>
								<a href="javascript:;" @click="resetPassword">修改密码</a>
							</a-menu-item>
							<a-menu-item>
								<a href="javascript:;" @click="logout">退出登录</a>
							</a-menu-item>
						</a-menu>
					</template>
				</a-dropdown>
				<a-button v-else type="primary" ghost @click="router.push('/auth')">登录</a-button>
				<a-avatar shape="square" :size="48" :style="{ backgroundColor: menuColor, fontSize: '24px' }">
					<template #icon>
						<a-badge :count="1">
							<icon-font type="icon-notification" :style="{ color: '#eee', fontSize: '24px' }" />
						</a-badge>
					</template>
				</a-avatar>
				<a-dropdown v-if="config.enableI8n">
					<template #overlay>
						<a-menu v-model:selected-keys="currentLanguage" @click="switchLanguage">
							<a-menu-item key="zh_CN">
								<template #icon>
									<icon-font type="icon-chinese" />
								</template>
								<span>中文-简体</span>
							</a-menu-item>
							<a-menu-item key="en_US">
								<template #icon>
									<icon-font type="icon-english" />
								</template>
								<span>English</span>
							</a-menu-item>
						</a-menu>
					</template>
					<a-avatar shape="square" :size="48" :style="{ backgroundColor: menuColor, fontSize: '24px' }">
						<template #icon>
							<icon-font
								:type="app.isCN ? 'icon-language-zh' : 'icon-language'"
								:style="{ color: '#eee', fontSize: '24px' }"
							/>
						</template>
					</a-avatar>
				</a-dropdown>
			</a-space>
		</a-layout-header>
		<a-layout-content class="main-content" :style="{ padding: '0' }">
			<router-view></router-view>
		</a-layout-content>
	</a-layout>
	<theme-switcher-drawer ref="themeDrawer"></theme-switcher-drawer>
	<a-modal v-model:open="open" :mask-closable="false" title="修改密码">
		<form-render v-model="data" :items="formItems" :config="formConfig"></form-render>
	</a-modal>
</template>
<script lang="ts" setup>
	import chinare from '@/assets/chinare.png'
	import { config } from '@/settings/application'
	import { theme, MenuProps, Modal } from 'ant-design-vue'
	import ThemeSwitcherDrawer from './components/theme-switcher-drawer.vue'
	import { useAppStore } from '@/stores/app'
	import { useUserStore } from '@/stores/user'
	import { useI18n } from 'vue-i18n'
	import { createVNode } from 'vue'
	import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
	import { FormConfig, FormItem } from '@/components/form-render/form-render-types'
	import IconFont from '@/components/icon-font/icon-font.vue'
	import { MenuInfo } from 'ant-design-vue/es/menu/src/interface'
	const router = useRouter()

	const { useToken } = theme
	const { token } = useToken()
	const currentLanguage = computed(() => {
		return [useAppStore().language]
	})
	// const menuColor = ref('#001529')
	const menuColor = token.value.colorPrimary
	const t = useI18n()
	const switchLanguage = ({ key }: MenuInfo) => {
		t.locale.value = String(key)
		const html = document.querySelector('html')
		html?.setAttribute('lang', String(key))
		useAppStore().changeLocale(key as 'zh_CN' | 'en_US')
	}
	const app = useAppStore()
	const user = useUserStore()
	const route = useRoute()
	const current = computed(() => {
		return route.path.split('/')
	})
	const items = computed(() => {
		return [
			{
				key: 'budget',
				label: h('a', { href: '#/budget' }, t.t('menus.budget.name')),
				icon: h(IconFont, { type: 'icon-budget' }),
				title: t.t('menus.budget.name'),
			},
			{
				key: 'summary',
				label: h('a', { href: '#/summary' }, t.t('menus.summary')),
				icon: h(IconFont, { type: 'icon-summary' }),
				title: t.t('menus.summary'),
			},
			{
				key: 'approval',
				label: h('a', { href: '#/approval' }, t.t('menus.approval')),
				icon: h(IconFont, { type: 'icon-approval' }),
				title: t.t('menus.approval'),
			},
			{
				key: 'import',
				label: h('a', { href: '#/import' }, t.t('menus.import')),
				icon: h(IconFont, { type: 'icon-import' }),
				title: t.t('menus.import'),
			},
			{
				key: 'analysis',
				label: h('a', { href: '#/analysis' }, t.t('menus.analysis')),
				icon: h(IconFont, { type: 'icon-analysis' }),
				title: t.t('menus.analysis'),
			},
			{
				key: 'settings',
				label: h('span', {}, t.t('menus.settings.name')),
				title: t.t('menus.settings.name'),
				icon: h(IconFont, { type: 'icon-cogs' }),
				theme: 'light',
				children: [
					{
						key: 'dictionary',
						label: h('a', { href: '#/settings/dictionary' }, t.t('menus.dictionary')),
						icon: h(IconFont, { type: 'icon-dictionary' }),
						title: t.t('menus.dictionary'),
					},
					{
						key: 'project',
						label: h('a', { href: '#/settings/project' }, t.t('menus.settings.project')),
						icon: h(IconFont, { type: 'icon-project' }),
						title: t.t('menus.settings.project'),
					},
					{
						key: 'permission',
						label: h('a', { href: '#/settings/permission' }, t.t('menus.settings.permission')),
						icon: h(IconFont, { type: 'icon-permission' }),
						title: t.t('menus.settings.permission'),
					},
				],
			},
		] as MenuProps['items']
	})

	const logout = () => {
		Modal.confirm({
			title: t.t('layout.user.modal.logout.title'),
			icon: createVNode(ExclamationCircleOutlined),
			content: createVNode('div', { style: 'color:red;' }, t.t('layout.user.modal.logout.content')),
			onOk() {
				user.logout()
			},
		})
	}

	const themeDrawer = ref<typeof ThemeSwitcherDrawer>()
	const open = ref(false)
	const formItems: FormItem[] = [
		{
			group: 'form',
			type: 'input-password',
			config: {
				autoLink: true,
				hasFeedback: false,
				label: '新密码',
				name: 'password',
				required: true,
			},
			properties: {
				size: 'default',
				visibilityToggle: true,
				allowClear: true,
				bordered: true,
				showCount: true,
				placeholder: '请输入新密码',
			},
			rules: [],
		},
		{
			group: 'form',
			type: 'input-password',
			config: {
				autoLink: true,
				hasFeedback: false,
				label: '确认新密码',
				name: 'check',
				required: true,
			},
			properties: {
				size: 'default',
				visibilityToggle: true,
				allowClear: true,
				bordered: true,
				showCount: true,
				placeholder: '请再次输入新密码',
			},
			rules: [],
		},
	]
	const formConfig: FormConfig = {
		layout: 'horizontal',
		colon: true,
		hideRequiredMark: false,
		labelAlign: 'right',
		scrollToFirstError: false,
		validateOnRuleChange: true,
		labelCol: {
			span: 6,
		},
	}
	const data = ref({
		password: '',
		check: '',
	})
	const resetPassword = () => {
		open.value = true
	}
</script>
<style lang="css" scoped>
	.portal-layout::before {
		position: absolute;
		inset: 0;
		pointer-events: none;
		content: '';
		background-image: var(--bg);
		background-position: 50%;
		background-size: 100% 100%;
		opacity: 0.75;
	}

	.logo {
		position: relative;
		width: 300px;
		min-width: 165px;
		height: 100%;
		overflow: hidden;
	}

	.logo img {
		display: inline-block;
		height: 50px;
		margin-top: -5px;
		vertical-align: middle;
	}

	.logo h1 {
		display: inline-block;
		margin: 0 0 0 12px;
		font-size: 24px;
		font-weight: 600;
		color: #eee;
		vertical-align: top;
	}

	.ant-row-rtl .logo {
		float: right;
		margin: 16px 0 16px 24px;
	}

	.site-layout-background {
		background: #fff;
	}

	.main-content {
		min-height: calc(100vh - 64px);
	}

	.header {
		display: flex;
	}

	.right-content {
		color: #eee;
	}

	.right-content .ant-typography {
		padding-left: 5px;
		font-weight: 600;
	}

	.right-content .ant-avatar {
		cursor: pointer;
	}

	:deep(.header .ant-select-selection-item) {
		color: #fff;
	}

	:deep(.ant-input-group-addon) {
		border: none;
	}

	:deep(.ant-select-arrow) {
		color: #fff;
	}

	:deep(.ant-select-single.ant-select-open .ant-select-selection-item) {
		color: #fff;
	}

	:deep(.ant-menu-dark .ant-menu-item-selected) {
		margin-bottom: 5px !important;
		font-size: 16px;
		font-weight: 600;
		border-bottom: 2px solid #fff;
	}

	:deep(.ant-menu-dark .ant-menu-item-active) {
		font-size: 16px;
		font-weight: 600;
	}

	:deep(.ant-menu-dark .ant-menu-submenu-selected) {
		margin-bottom: 5px !important;
		font-size: 16px;
		font-weight: 600;
		border-bottom: 2px solid #fff;
	}

	:deep(.ant-menu-dark .ant-menu-submenu-open) {
		font-size: 16px;
		font-weight: 600;
	}

	:deep(.ant-menu-dark .ant-menu-dark.ant-menu-submenu > .ant-menu) {
		background-color: var(--ant-primary-color);
	}
</style>
