<template>
	<view class="container">
		<Home v-if="curTabIndex == 0"></Home>
		<Brand v-if="curTabIndex == 1"></Brand>
		<Integral v-if="curTabIndex == 2"></Integral>
		<My v-if="curTabIndex == 3"></My>
		<TabBar :curTabIndex="curTabIndex" @tabClick="handleTabClick" />
	</view>
</template>

<script>
	import TabBar from '@/components/TabBar.vue'
	import Home from '@/views/Home.vue';
	import Brand from '@/views/Brand.vue';
	import Integral from '@/views/Integral.vue';
	import My from '@/views/My.vue';

	export default {
		data() {
			return {
				curTabIndex: 0,
			};
		},
		onLoad() {},
		methods: {
			handleTabClick({
				index,
				item
			}) {
				console.log('Tab clicked:', index, item)
				// 这里可以根据index或item进行相应的页面跳转或其他操作
				this.curTabIndex = index
			}
		},
		components: {
			TabBar,
			Home,
			Brand,
			Integral,
			My
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;

		.content {
			padding-bottom: 100rpx; // 为底部TabBar留出空间
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>