<template>
	<view>
		<view>
			<view>
				<pets v-if="currentTabbar === 0"></pets>
			</view>
			<view>
				<records v-if="currentTabbar === 1"></records>
			</view>
			<view>
				<schedules v-if="currentTabbar === 2"></schedules>
			</view>
			<view>
				<discovery v-if="currentTabbar === 3"></discovery>
			</view>
			<view>
				<mine v-if="currentTabbar === 4"></mine>
			</view>
		</view>

		<TnTabbar v-model="currentTabbar" fixed switch-animation :placeholder="false">
			<TnTabbarItem
				v-for="(item, index) in tabbarData"
				:key="index"
				:icon="item.icon"
				:active-icon="item.activeIcon"
				:text="item.name"
			/>
		</TnTabbar>
	</view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import TnTabbar from "@/uni_modules/tuniaoui-vue3/components/tabbar/src/tabbar.vue";
import TnTabbarItem from "@/uni_modules/tuniaoui-vue3/components/tabbar/src/tabbar-item.vue";
import pets from "./pets.vue";
import records from "./records.vue";
import schedules from "./schedules.vue";
import discovery from "./discovery.vue";
import mine from "./mine.vue";

const currentTabbar = ref(0);

// 导航栏数据
const tabbarData = [
	{
		name: "萌宠",
		icon: "floral",
		activeIcon: "floral-fill",
	},
	{
		name: "记录",
		icon: "write",
		activeIcon: "write-fill",
	},
	{
		name: "日程",
		icon: "calendar",
		activeIcon: "calendar-fill",
	},
	{
		name: "百科",
		icon: "inventory",
		activeIcon: "inventory-fill",
	},
	{
		name: "我的",
		icon: "my-circle",
		activeIcon: "my-circle-fill",
	},
];
</script>

<style>
.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>
