<template>
	<div>
		<a-space direction="vertical" size="middle" style="width: 100%">
			<a-page-header
				:style="{ backgroundColor: token.colorBgContainer }"
				:title="title || $t(String(route.meta.title))"
				:sub-title="subTitle"
				:back-icon="backIcon"
				:breadcrumb="breadcrumb"
				@back="() => $router.go(-1)"
			>
				<template #tags>
					<slot name="tags"></slot>
				</template>
				<template #extra>
					<!-- 这里是一个操作区插槽 -->
					<slot name="ops"></slot>
				</template>
				<template #footer>
					<!--这里可以是一个插槽 -->
					<a-tabs v-if="tabs.length" v-model:active-key="activeKey">
						<a-tab-pane v-for="tab in tabs" :key="tab.key">
							<template #tab>
								<span>
									<icon-font v-if="tab.icon" :type="tab.icon"></icon-font>
									{{ tab.title }}
								</span>
							</template>
						</a-tab-pane>
					</a-tabs>
				</template>
				<div class="content">
					<div class="main">
						<!-- 这里是一个主插槽 -->
						<slot name="main-content"></slot>
					</div>
					<div class="extra">
						<div
							:style="{
								display: 'flex',
								width: 'max-content',
								justifyContent: 'flex-end',
							}"
						>
							<!-- 这里是一个扩展插槽 -->
							<slot name="extra-content"></slot>
						</div>
					</div>
				</div>
			</a-page-header>
			<a-card>
				<slot></slot>
			</a-card>
		</a-space>
	</div>
</template>
<script lang="ts" setup>
	import { ArrowLeftOutlined } from '@ant-design/icons-vue'
	import { theme } from 'ant-design-vue'
	import { useI18n } from 'vue-i18n'
	import IconFont from '@/components/icon-font/icon-font.vue'
	import { RouterLink } from 'vue-router'
	import { PropType } from 'vue'
	import { Key } from 'ant-design-vue/es/_util/type'
	const { useToken } = theme
	const { token } = useToken()
	// title 默认处理
	// 面包屑默认处理
	const route = useRoute()
	const { t } = useI18n()
	const routes = computed(() => {
		if (route.meta.hideBreadcrumb) {
			return []
		}
		return route.matched.map((item) => {
			return { path: item.path, breadcrumbName: t(String(item.meta.title)), icon: item.meta.icon || 'icon-home' }
		})
	})

	interface Route {
		path: string
		breadcrumbName: string
		icon: string
		children?: Array<Route>
	}

	const breadcrumb = computed(() => {
		return {
			routes: routes.value,
			itemRender: ({ route }: { route: Route }) => {
				return routes.value.indexOf(route) === routes.value.length - 1
					? h('span', null, [h(IconFont, { type: route.icon }), route.breadcrumbName])
					: h(
							RouterLink,
							{ to: route.path },
							{
								default: () => {
									return h('span', null, [h(IconFont, { type: route.icon }), route.breadcrumbName])
								},
							},
						)
			},
		}
	})
	const props = defineProps({
		title: {
			type: String,
			required: false,
			default: () => '',
		},
		subTitle: {
			type: String,
			required: false,
			default: () => '',
		},
		showBack: {
			type: Boolean,
			required: false,
			default: () => false,
		},
		tabs: {
			type: Array as PropType<Array<{ key: string; title: string; icon?: string }>>,
			required: false,
			default: () => [],
		},
		currentTab: {
			type: String,
			required: false,
			default: () => '',
		},
	})
	const { title, subTitle, showBack, tabs, currentTab } = toRefs(props)
	const emit = defineEmits<{
		tabChanged: [key: Key]
	}>()

	const firestTab = computed(() => {
		return tabs.value.length ? tabs.value[0].key : ''
	})
	const activeKey = computed({
		get: () => currentTab.value || firestTab.value,
		set: (val) => {
			emit('tabChanged', val)
		},
	})

	const backIcon = computed(() => {
		if (showBack.value) {
			return h(ArrowLeftOutlined, { type: 'icon-back' })
		}
		return false
	})
</script>
<style scoped>
	.components-page-header-demo-responsive {
		padding-bottom: 20px;
	}

	.components-page-header-demo-responsive tr:last-child td {
		padding-bottom: 0;
	}

	.content {
		display: flex;
	}

	.ant-statistic-content {
		font-size: 20px;
		line-height: 28px;
	}

	@media (width <=576px) {
		.content {
			display: block;
		}

		.main {
			width: 100%;
			margin-bottom: 12px;
		}

		.extra {
			width: 100%;
			margin-left: 0;
			text-align: left;
		}
	}
</style>
