<template>
	<a-row>
		<a-col :span="12" style="display: flex;align-items: center;">
			<a-space>
				<menu-unfold-outlined v-if="collapsed" class="trigger" @click="onCollapsed" />
				<menu-fold-outlined v-else class="trigger" @click="onCollapsed" />
				<a-breadcrumb>
					 <a-breadcrumb-item v-for="(item, index) in routes">{{item.meta.title}}</a-breadcrumb-item>
				</a-breadcrumb>
				<a-cascader v-model:value="value" :options="menuList" :show-search="{ filter }" placeholder="请搜索想进入的管理页面"
					:field-names="{ label: 'title', value: 'name', children: 'children' }" @change="inputChange"
					style="margin-left: 10px;width: 100%;" />
			</a-space>
		</a-col>
		<a-col :span="12">
			<a-row type="flex" justify="end" :gutter="20">
				<a-col flex="200px">
					<div>{{time}}</div>
				</a-col>
				<a-col flex="50px">
					<a-avatar src="@/static/images/logo_1.jpg"></a-avatar>
				</a-col>
				<a-col flex="50px">
					<div>admin</div>
				</a-col>
				<a-col flex="16px">
					<LogoutOutlined @click="loginOut" />
				</a-col>
			</a-row>

		</a-col>
	</a-row>

</template>
<script lang="ts" setup>
	import { ref, onMounted, computed } from 'vue';
	import { store } from '@/store';
	import { router } from '@/router';
	import { MenuUnfoldOutlined, MenuFoldOutlined, LogoutOutlined } from '@ant-design/icons-vue';
	import { getTime } from '@/utils/timeHelper';
	import { useComputed } from '@/hooks/useComputed';
	import { useMenu } from '@/hooks/useMenu';
	import type { ShowSearchType } from 'ant-design-vue/es/cascader';
	let { menuList, onMenu, message } = useMenu();

	let routerValue : string = ref('');
	const time : string = ref('');
	const currentTime = () => {
		setInterval(() => {
			time.value = getTime().nowTime + " " + getTime().nowDate + " " + getTime().nowWeek;
		}, 500);
	};
	const collapsed = computed(() => {
		return store.state.collapsed
	})

	const routes = computed(() => {
		return store.state.crumbList
	})
	const onCollapsed = () => {
		store.commit('getCollapsed');
	}
	onMounted(async () => {
		currentTime();
	});
	const loginOut = () => {
		sessionStorage.clear();
		window.location.reload();
		router.replace('/login');
	}

	const value = ref<string[]>([]);

	const filter : ShowSearchType['filter'] = (inputValue, path) => {
		const pathLabel = path.map(item => item.title).join(' / ');
		return pathLabel.toLowerCase().includes(inputValue.toLowerCase());
	};

	const inputChange = (val, selectedOptions) => {
		console.log(val, selectedOptions)
		onMenu(selectedOptions[selectedOptions.length - 1].path)
	}
</script>

<style>
</style>