<template>
	<view class="menu">

		<image class="homelogo" @click="jump(0)" src="/static/homelogo.png" />
		<div v-for="item in data" key="item.id" @click="jump(item.id)" :class="type==item.id?'menu-active':''">
			{{item.title}}
			<span v-if="type==item.id" class="triangle">&#9650; </span>
		</div>
	</view>
</template>

<script setup>
	const props = defineProps({
		type: {
			type: Number,
			default: 0,
		},
	})

	const data = [{
			id: 1,
			title: "品牌展示"
		},
		{
			id: 2,
			title: "区位配套"
		},
		{
			id: 3,
			title: "项目规划"
		},
		{
			id: 4,
			title: "户型展示"
		},
		{
			id: 5,
			title: "动线漫游"
		},
		{
			id: 6,
			title: "建筑细节"
		},
		{
			id: 7,
			title: "科技系统"
		}

	]

	const jump = (index) => {
		let u;
		switch (index) {
			case 0:
				u = '/pages/index/index';
				break;
			case 1:
				u = '/pages/BrandDisplay/BrandDisplay';
				break;
			case 2:
				u = '/pages/LocationAmenities/LocationAmenities';
				break;
			case 3:
				u = '/pages/ProjectPlanning/ProjectPlanning';
				break;
			case 4:
				u = '/pages/FloorPlanShowcase/FloorPlanShowcase';
				break;
			case 5:
				u = '/pages/RouteNavigation/RouteNavigation';
				break;
			case 6:
				u = '/pages/ArchitecturalDetails/ArchitecturalDetails';
				break;
			case 7:
				u = '/pages/TechnologySystems/TechnologySystems';
				break;
		}
		if (props.type != index) {
			uni.navigateTo({
				url: u,
				animationType: "fade-in"
			});
		}
	}
</script>

<style scoped>
	.homelogo {
		width: 16vw;
		height: 3.8vw;
		margin-left: 2vw;
		margin-right: 2vw;
	}

	.menu {
		display: flex;
		height: 100%;
		background-color: rgba(44 61, 43, 0.5);
		justify-content: center;
		align-items: center;
		font-size: 0.4rem;
		border-top: 0.3vw solid #FFE7CE;
	}

	.menu div {
		color: white;
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.menu .menu-active {
		background-color: rgba(255 231, 206, 0.3);
		position: relative;
	}

	.triangle {
		color: #FFE7CE;
		font-size: 0.25rem;
		position: absolute;
		bottom: 0px
	}
</style>