<template>
	<a-layout style="min-height: 100vh">
		<a-layout-header class="header" :style="headerStyle">
			<div
				class="ant-pro-top-nav-header-logo"
				:style="{
					lineHeight: `${config.layout.headerHeight}px`,
				}"
			>
				<a href="/">
					<a-avatar shape="square" :src="app.logo || '/logo.png'" />
					<h1 :style="{ color: token.colorText }">
						{{ app.title }}
					</h1>
				</a>
			</div>
			<div style="display: flex; flex: 1 1 0%"></div>
		</a-layout-header>
		<a-layout-content>
			<a-card :body-style="{ backgroundColor: '#f5f5f5' }">
				<a-result :status="status" :title="title" :sub-title="message">
					<template #extra>
						<a-button key="console" type="primary" @click="() => router.push('/')">
							<template #icon>
								<icon-font type="icon-back" />
							</template>
							返回首页
						</a-button>
						<a-button key="buy" href="mailto:kerbores@riemann.tech?subject=开发平台问题反馈">
							<template #icon>
								<icon-font type="icon-email" />
							</template>
							联系管理员
						</a-button>
					</template>
				</a-result>
			</a-card>
		</a-layout-content>
		<a-layout-footer style="text-align: center">
			{{ app.copyright }}
		</a-layout-footer>
	</a-layout>
</template>

<script setup lang="ts">
	import { useAppStore } from '@/stores/app'
	import { config } from '@/settings/application'
	import { theme } from 'ant-design-vue'
	import { ResultStatusType } from 'ant-design-vue/es/result'
	const route = useRoute()
	const router = useRouter()

	const status = computed(() => {
		return (route.query.status || '404') as ResultStatusType
	})
	const title = computed(() => {
		if (route.query.title) {
			return route.query.title as string
		}
		switch (status.value) {
			case 'success':
				return '操作成功'
			case 'error':
				return '发生了错误'
			case 'info':
				return '提示'
			case 'warning':
				return '警告'
			case '404':
				return '找不到页面'
			case '403':
				return '你没有权限'
			case '500':
				return '服务器错误'
		}
		return ''
	})
	const message = computed(() => {
		if (route.query.message) {
			return route.query.message as string
		}
		switch (status.value) {
			case 'success':
				return '您的操作依据成功执行!'
			case 'error':
				return '您的操作发生了错误,请您重试一下或者联系管理员'
			case 'info':
				return '这是一个提示信息'
			case 'warning':
				return '您的操作可能存在风险,请谨慎操作!'
			case '404':
				return '你访问的资源没有找到'
			case '403':
				return '你没有权限,进行此操作,请联系管理员'
			case '500':
				return '服务器发生了错误,请联系管理员'
		}
		return ''
	})
	const { useToken } = theme
	const { token } = useToken()
	const app = useAppStore()
	const headerStyle = computed(() => {
		return Object.assign(
			app.layout.fixedHeader ? { position: 'fixed', zIndex: 1, width: '100%' } : {},
			app.layout.layout === 'mix'
				? {
						height: `${config.layout.headerHeight}px`,
					}
				: {
						height: `${config.layout.headerHeight}px`,
						backgroundColor: token.value.colorBgContainer,
						borderBottom: `1px solid ${token.value.colorBorder}`,
					},
		)
	})
</script>

<style scoped>
	.site-layout .site-layout-background {
		background: #fff;
	}

	[data-theme='dark'] .site-layout .site-layout-background {
		background: #141414;
	}

	.header {
		display: flex;
		padding: 0 16px;
	}

	.ant-menu-inline-collapsed .ant-menu-item-selected {
		margin-right: 0;
	}

	.ant-pro-sider-logo {
		position: relative;
		display: flex;
		align-items: center;
		width: 208px;
		padding: 16px;
		cursor: pointer;
		transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	.ant-layout-sider-collapsed .ant-pro-sider-logo {
		width: 64px;
	}

	.ant-pro-top-nav-header-logo {
		position: relative;
		min-width: 165px;
		height: 100%;
		padding-right: 50px;
		overflow: hidden;
	}

	h1 {
		display: inline-block;
		margin: 0 0 0 12px;
		overflow: hidden;
		font-size: 18px;
		font-weight: 800;
		vertical-align: middle;
	}

	img {
		display: inline-block;
		height: 32px;
		vertical-align: middle;
	}
</style>
