<template>
	<div
		class="app-slider"
		:class="{
			'is-collapse': app.isFold
		}"
	>
		<div class="app-slider__logo">
			<img src="/logo.png" />
			<span v-if="!app.isFold || browser.isMini">{{ app.info.name }}</span>
		</div>

		<div class="app-slider__search">
			<el-input
				v-model="keyWord"
				:placeholder="$t('搜索关键字')"
				clearable
				@focus="app.fold(false)"
			>
				<template #prefix>
					<cl-svg name="search" :size="16" />
				</template>
			</el-input>
		</div>

		<div class="app-slider__container">
			<el-scrollbar>
				<b-menu :keyWord="keyWord" />
			</el-scrollbar>
		</div>
	</div>
</template>

<script lang="ts" setup>
defineOptions({
	name: 'app-slider'
});

import { useBase } from '/$/base';
import { useBrowser } from '/@/cool';
import BMenu from './bmenu';
import { ref } from 'vue';

const { browser } = useBrowser();
const { app } = useBase();

const keyWord = ref('');
</script>

<style lang="scss">
.app-slider {
	$slider-menu-height: 50px;
	--slider-bg-color: #2c3147;
	--slider-text-color: #e5eaf3;

	height: 100%;
	background-color: var(--slider-bg-color);
	border-right: 1px solid var(--el-border-color-extra-light);

	&__logo {
		display: flex;
		align-items: center;
		height: 66px;
		padding: 0 21px;
		user-select: none;

		img {
			height: 24px;
			width: 24px;
		}

		span {
			color: #fff;
			font-weight: bold;
			font-size: 20px;
			margin-left: 10px;
			white-space: nowrap;
			letter-spacing: 1px;
		}
	}

	&__search {
		margin: 0 10px 10px 10px;
		overflow: hidden;
		border-radius: 6px;

		.el-input__wrapper {
			background-color: rgba(200, 200, 200, 0.1);
			box-shadow: none;
			height: 36px;
			padding: 0 14px;

			.el-input__inner {
				color: var(--slider-text-color);
			}
		}
	}

	&__container {
		height: calc(100% - 112px);
	}

	&__menu {
		user-select: none;

		.b-menu__badge {
			display: flex;
			align-items: center;
			justify-content: center;
			height: $slider-menu-height;
			font-size: 10px;
			height: 14px;
			min-width: 14px;
			padding: 0 3px;
			border-radius: 4px;
			background-color: rgba(255, 255, 255, 0.2);
			font-weight: bold;
			color: #fff;
			transition: background-color 0.3s;
		}

		.el-menu {
			width: 100%;
			border-right: 0;
			background-color: transparent;

			&--popup {
				border-radius: 6px;
				padding: 5px;

				&-container {
					padding: 0;
				}

				.el-menu-item,
				.el-sub-menu__title {
					height: $slider-menu-height;
					border-radius: 6px;

					&:hover {
						background-color: var(--el-fill-color-light);
					}
				}
			}

			&:not(&--popup) {
				--el-menu-base-level-padding: 23px;

				.el-menu-item,
				.el-sub-menu__title {
					height: $slider-menu-height;
					color: var(--slider-text-color);

					.cl-svg {
						flex-shrink: 0;
					}

					&.is-active,
					&:hover {
						background-color: rgba(0, 0, 0, 0.25);
						color: #fff;
					}

					&.is-active {
						background-color: var(--el-color-primary);
					}
				}
			}
		}
	}

	&.is-collapse {
		.app-slider__search {
			.el-input__inner {
				opacity: 0;
			}
		}

		.app-slider__menu {
			.el-sub-menu {
				&.is-active {
					background-color: rgba(0, 0, 0, 0.25);
				}
			}
		}
	}
}
</style>
