import { defineComponent, h, watch } from 'vue';
import { useBase } from '/$/base';
import { useCool } from '/@/cool';
import { debounce } from 'lodash-es';

export default defineComponent({
	name: 'b-menu',

	props: {
		keyWord: String
	},

	setup(props) {
		const { router, route, browser, refs, setRefs } = useCool();
		const { menu, app } = useBase();

		// 页面跳转
		function onSelect(url: string) {
			if (url != route.path) {
				router.push(url);
			}

			// 小屏下点击收起左侧菜单
			if (browser.isMini) {
				app.fold(true);
			}
		}

		// 渲染子菜单
		function renderMenu() {
			function deep(list: Menu.Item[], show?: boolean) {
				const keyWord = props.keyWord?.toLowerCase() || '';

				function filterMenu(item: Menu.Item): boolean {
					if (!item.isShow) return false;

					if (show) {
						return true;
					}

					if (item.meta?.label?.toLowerCase().includes(keyWord)) return true;

					if (item.children) {
						return item.children.some(filterMenu);
					}

					return false;
				}

				return list.filter(filterMenu).map(e => {
					if (e.meta?.label?.toLowerCase().includes(keyWord)) {
						show = true;
					}

					const item = (e: Menu.Item) => {
						const arr = [
							<cl-svg name={e.icon} size={18} />,
							<span class="ml-4 tracking-wider text-[14px] mr-auto text-ellipsis overflow-hidden whitespace-nowrap">
								{e.meta?.label}
							</span>
						];

						if (e.type == 1 && e.badge) {
							arr.push(
								<div class={['b-menu__badge', `is-${e.badgeColor}`]}>
									<span>{e.badge}</span>
								</div>
							);
						}
						return arr;
					};

					if (e.type == 0) {
						return h(
							<el-sub-menu />,
							{
								index: String(e.id),
								key: e.id,
								popperClass: 'app-slider__menu'
							},
							{
								title() {
									return item(e);
								},
								default() {
									return deep(e.children || [], show);
								}
							}
						);
					} else {
						return h(
							<el-menu-item />,
							{
								index: e.meta?.isHome ? '/' : e.path,
								key: e.id
							},
							{
								default() {
									return item(e);
								}
							}
						);
					}
				});
			}

			return deep(menu.list);
		}

		// 展开所有
		const expand = debounce(() => {
			if (!props.keyWord) {
				return;
			}

			const deep = (list: Menu.Item[]) => {
				list.forEach(e => {
					if (e.type == 0) {
						try {
							refs.menu?.open(String(e.id));
						} catch (err) { }

						if (e.children) {
							deep(e.children);
						}
					}
				});
			};

			deep(menu.list);
		}, 300);

		watch(() => props.keyWord, expand);

		return () => {
			return (
				<div class="app-slider__menu">
					<el-menu
						ref={setRefs('menu')}
						default-active={route.path}
						background-color="transparent"
						collapse-transition={false}
						collapse={browser.isMini ? false : app.isFold}
						onSelect={onSelect}
						popper-offset={10}
					>
						{renderMenu()}
					</el-menu>
				</div>
			);
		};
	}
});