import { computed, defineComponent, h, ref, watch } from "vue";
import "./index.scss";
import { useCool } from "/@/cool";

export default defineComponent({
	name: "cl-menu-slider",

	setup() {
		const { router, route, store } = useCool();

		// 是否可见
		const visible = ref<boolean>(true);
		// 菜单列表
		const menuList = computed(() => store.getters.menuList);
		// 菜单是否折叠
		const menuCollapse = computed(() => store.getters.menuCollapse);
		// 浏览器信息
		const browser: any = computed(() => store.getters.browser);

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

		// 刷新菜单
		function refresh() {
			visible.value = false;

			setTimeout(() => {
				visible.value = true;
			}, 0);
		}

		// 监听菜单变化
		watch(menuList, refresh);

		return {
			route,
			visible,
			menuList,
			menuCollapse,
			browser,
			toView,
			refresh
		};
	},

	render(ctx: any) {
		function deepMenu(list: any, index: number) {
			return list
				.filter((e: any) => e.isShow)
				.map((e: any) => {
					let html = null;

					if (e.type == 0) {
						html = h(
							<el-sub-menu></el-sub-menu>,
							{
								index: String(e.id),
								key: e.id,
								"popper-class": "cl-slider-menu__popup"
							},
							{
								title: () => {
									return ctx.menuCollapse && index == 1 ? (
										<icon-svg name={e.icon}></icon-svg>
									) : (
										<span>
											<icon-svg name={e.icon}></icon-svg>
											<span>{e.name}</span>
										</span>
									);
								},
								default() {
									return deepMenu(e.children, index + 1);
								}
							}
						);
					} else {
						html = h(
							<el-menu-item></el-menu-item>,
							{
								index: e.path,
								key: e.id
							},
							{
								title() {
									return <span>{e.name}</span>;
								},
								default() {
									return <icon-svg name={e.icon}></icon-svg>;
								}
							}
						);
					}

					return html;
				});
		}

		const children = deepMenu(ctx.menuList, 1);

		return (
			ctx.visible && (
				<div class="cl-slider-menu">
					<el-menu
						default-active={ctx.route.path}
						background-color="transparent"
						collapse-transition={false}
						collapse={ctx.browser.isMini ? false : ctx.menuCollapse}
						onSelect={ctx.toView}
					>
						{children}
					</el-menu>
				</div>
			)
		);
	}
});