<script setup>
import Menubar from 'primevue/menubar'
import {ref} from 'vue';
import configs from "@/views/portal/configs/configs.js";
import TButton from "@/components/ui/TButton.vue";

const props = defineProps({
	ctx: Object,
	active: String
})

const items = ref([
	{
		label: "网站首页",
		url: configs.url("/"),
		class: (props.active == 'index') ? 'active' : ''
	},
	{
		label: "产品",
		class: (props.active == 'products') ? 'active' : '',
		items: [
			{
				label: "CDN",
				url: configs.url("/products/cdn"),
				class: (window.location.toString().indexOf("cdn") > 0) ? 'active' : ''
			},
			/**{
				label: "DNS",
				url: configs.url("/products/dns"),
				class: (window.location.toString().indexOf("dns") > 0) ? 'active' : ''
			}**/
		]
	},
	/**{
		label: "价格",
		url: configs.url("/price"),
		class: (props.active == 'price') ? 'active' : ''
	},**/
	{
		label: "文档",
		url: "/docs",
		class: (props.active == 'docs') ? 'active' : ''
	}
])
</script>

<template>
	<Menubar text :model="items">
		<template #start>
			<div class="pl-4">
				<span v-if="ctx.logoURL.length == 0" class="font-bold">{{ ctx.productName }}</span>
				<a href="/portal" v-else><img :src="ctx.logoURL" alt="[LOGO]" class="logo-image"/></a>
			</div>
		</template>
		<template #end>
			<div>
				<div class="flex flex-wrap items-center gap-4">
					<a href="/dashboard">
						<span>控制台</span>
					</a>
					<a href="/login">
						<TButton>
							<span v-if="!ctx.userIsLogged">登录/注册</span>
							<span v-if="ctx.userIsLogged">进入</span>
						</TButton>
					</a>
				</div>
			</div>
		</template>
	</Menubar>
</template>

<style scoped lang="postcss">
.logo-image {
	height: 1.8rem;
}

.p-menubar {
	border-radius: 0;
	background: white;
	border-left: none;
	border-right: none;
}

:deep(.p-menubar-item.active a) {
	color: var(--p-primary-color) !important;
}

</style>