<template>
  <div class="tab-bar">
    <div v-for="(item, index) in tabItems" :key="index" class="tab-item" :class="{ active: currentPath === item.path }"
      @click="switchTab(item.path)">
      <img :src="getIconSrc(item)" alt="icon" class="tab-icon" />
      <span class="tab-text">{{ item.text }}</span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

// 引入图标
import homeNormal from '@/assets/components/icon_home_normal.png'
import homeActive from '@/assets/components/icon_home_active.png'
import exhibitionNormal from '@/assets/components/icon_exhibition_normal.png'
import exhibitionActive from '@/assets/components/icon_exhibition_active.png'
import cultureNormal from '@/assets/components/icon_culture_normal.png'
import cultureActive from '@/assets/components/icon_culture_active.png'
import userNormal from '@/assets/components/icon_user_normal.png'
import userActive from '@/assets/components/icon_user_active.png'

const router = useRouter()
const route = useRoute()

// 计算当前路径
const currentPath = computed(() => route.path)

// 定义导航项
const tabItems = [
  {
    text: '首页',
    path: '/indexPage',
    iconNormal: homeNormal,
    iconActive: homeActive
  },
  {
    text: '展览',
    path: '/exhibition',
    iconNormal: exhibitionNormal,
    iconActive: exhibitionActive
  },
  {
    text: '典藏',
    path: '/collection',
    iconNormal: cultureNormal,
    iconActive: cultureActive
  },
  {
    text: '我的',
    path: '/user',
    iconNormal: userNormal,
    iconActive: userActive
  }
]

// 获取图标源
const getIconSrc = (item) => {
  return currentPath.value === item.path ? item.iconActive : item.iconNormal
}

// 切换标签
const switchTab = (path) => {
  // 检测当前URL是否有preview=1参数
  const isPreviewMode = route.query.preview === '1'

  // 如果是预览模式且要跳转到'我的'页面，则阻止跳转
  if (path === '/user') {
    return
  }

  // 如果是预览模式，在跳转时保留preview=1参数
  if (isPreviewMode) {
    router.push({
      path: path,
      query: { preview: '1' }
    })
  } else {
    router.push(path)
  }
}
</script>

<style lang="scss" scoped>
.tab-bar {
  // position: fixed;
  // bottom: 0;
  // left: 0;
  width: 100%;
  height: 78px;
  display: flex;
  background-color: #fff;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 5px 0;
  transition: all 0.3s;

  &.active {
    .tab-text {
      color: #B1967B; // 高亮文字颜色
    }
  }
}

.tab-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 2px;
}

.tab-text {
  font-size: 14px;
  color: #412A12;
}

@media (min-width: 1024px) {
  .tab-bar {
    display: flex;
    place-items: center;
  }
}
</style>