<template>
	<lay-menu v-model:selectedKey="selectKey" v-model:openKeys="openKeys" :collapse="collapse" :tree="isTree"
		:level="appStore.level" :inverted="appStore.inverted">
		<view v-for="(mItem,mIndex) in menuList">
			<lay-sub-menu v-if="mItem['FChild'].length>0" :id="mItem['FRemark']||mIndex">
				<template #icon>
					<lay-icon :type="mItem['FIcon']||'layui-icon-home'"></lay-icon>
				</template>
				<template #title> {{mItem['FName']}} </template>
				<view v-if="mItem['FChild'].length>0" v-for="(cItem,cIndex) in mItem['FChild']">
					<lay-menu-item :id="cItem['FRemark']">
						<template #icon>
							<lay-icon :type="cItem['FIcon']||'layui-icon-home'"></lay-icon>
						</template>
						<template #title> {{cItem['FName']}} </template>
					</lay-menu-item>
				</view>
			</lay-sub-menu>
			<lay-menu-item v-else :id="mItem['FRemark']||mIndex">
				<template #icon>
					<lay-icon :type="mItem['FIcon']||'layui-icon-home'"></lay-icon>
				</template>
				<template #title> {{mItem['FName']}} </template>
			</lay-menu-item>
		</view>
	</lay-menu>
</template>

<script lang="ts">
	import {
		ref
	} from 'vue';
	import {
		getMenuList
	} from "../../api/api/user"
	export default {
		name: "GlobalMenu",
		data() {
			const menuList = ref([]);
			return {
				menuList
			}
		},
		mounted() {
			getMenuList(null).then((data: Array < Object > ) => {
				this.menuList = data || [];
			});
		}
	};
</script>

<script lang="ts" setup>
	import {
		useRoute,
		useRouter
	} from "vue-router";
	import {
		watch
	} from "vue";
	import {
		useAppStore
	} from "../../store/app";
	const appStore = useAppStore();
	interface MenuProps {
		collapse: boolean;
	}
	const props = withDefaults(defineProps < MenuProps > (), {
		collapse: false,
	});
	const route = useRoute();
	const routers = useRouter();
	const selectKey = ref(route.path);
	const openKeys = ref(["0"]);
	const isTree = ref(true);
	watch(route, (val) => {
		selectKey.value = route.path;
	});
	watch(selectKey, (val) => {
		routers.push(val);
	});
</script>
