<template>
	<!-- <router-view /> -->
	<div :class="style['base-header']">
		<div :class="style['container']">
			<div :class="style['welcome-text']">
				<img
					:class="style['logo']"
					src="~@/assets/svg/header_logo.svg"
				/>
				<span :class="style[collapsed ? 'text-collapsed' : 'text']">{{
					getI18n('common', 'Common_JcBussiness_Design_System')
				}}</span>
				<menu-unfold-outlined
					v-if="collapsed"
					class="trigger"
					@click="onCollapsedClick"
				/>
				<menu-fold-outlined
					v-else
					class="trigger"
					@click="onCollapsedClick"
				/>
			</div>
		</div>
	</div>
	<router-view />
</template>
<script lang="ts">
import style from './basic-layout.module.less'
import { getI18n } from '@/utils/i18n'
import { defineComponent, ref } from 'vue'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue'
export default defineComponent({
	components: {
		MenuUnfoldOutlined,
		MenuFoldOutlined,
	},
	setup() {
		const collapsed = ref<boolean>(false)
		// 隐藏、展开侧边栏
		const onCollapsedClick = () => {
			collapsed.value = !collapsed.value
		}
		return {
			style,
			collapsed,
			getI18n,
			onCollapsedClick,
		}
	},
})
</script>
