<template>
  <!-- 底部导航栏容器 -->
  <view class="tab-bar">
    <!-- 导航栏项 -->
    <view
      v-for="(tab, index) in tabs"
      :key="index"
      :class="['tab-item', { active: activeTab === index }]"
      @click="activeTab = index"
    >
      <!-- 导航栏图标 -->
      <image :src="activeTab === index ? tab.iconActive : tab.icon" mode="aspectFit" class="tab-icon" />
      <!-- 导航栏标签文字 -->
      <text class="tab-label">{{ tab.label }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 当前激活的导航栏索引
const activeTab = ref(0)

// 导航栏数据列表
const tabs = [
  {
	  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/home.png',
	  iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/home.png',
	  label: '首页',
  },
  {
	  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/course.png',
	  iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/course.png',
	  label: '课程'
  },
  {
	  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/train.png',
	  iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/train.png',
	  label: '训练' ,
  },
  {
	  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/discover.png',
	  iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/discover.png',
	  label: '发现',
  },
  {
	  icon: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/profile.png',
	  iconActive: 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/tabBar/active/profile.png',
	  label: '我的',
  }
]
</script>

<style lang="scss" scoped>
/* 底部导航栏容器样式 */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background: #1A4A6F;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
  border-radius: 32rpx 32rpx 0 0;
}

/* 导航栏项样式 */
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 24rpx;
}

/* 导航栏图标样式 */
.tab-icon {
  width: 40rpx;
  height: 40rpx;
}

/* 导航栏标签文字样式 */
.tab-label {
  font-size: 22rpx;
  color: #94a3b8;
}

/* 导航栏激活状态文字样式 */
.tab-item.active .tab-label {
  color: #f97316;
  font-weight: 600;
}
</style>
