<template>
  <q-footer class="bg-white text-black border-top">
    <q-toolbar class="">
      <div class="row items-center justify-around full-width">
        <q-btn flat class="q-pa-sm col text-center" @click="goToPage('/')">
          <div class="column items-center">
            <q-icon name="home" size="24px" />
            <div class="text-caption q-mt-xs">{{ $t('navigation.home') }}</div>
          </div>
        </q-btn>
        <q-btn flat class="q-pa-sm col text-center" @click="goToPage('/games')">
          <div class="column items-center">
            <q-icon name="sports_esports" size="24px" />
            <div class="text-caption q-mt-xs">{{ $t('navigation.games') }}</div>
          </div>
        </q-btn>
        <q-btn flat class="q-pa-sm col text-center" @click="goToCart">
          <div class="column items-center">
            <q-icon name="shopping_cart" size="24px" />
            <q-badge v-if="cartItemCount > 0" color="red" floating>{{ cartItemCount }}</q-badge>
            <div class="text-caption q-mt-xs">{{ $t('navigation.cart') }}</div>
          </div>
        </q-btn>
        <q-btn flat class="q-pa-sm col text-center" @click="goToProfile">
          <div class="column items-center">
            <q-icon name="account_circle" size="24px" />
            <div class="text-caption q-mt-xs">{{ $t('navigation.profile') }}</div>
          </div>
        </q-btn>
      </div>
    </q-toolbar>
  </q-footer>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 购物车商品数量（可以从store中获取）
const cartItemCount = ref(1)

// 导航函数
const goToPage = (path) => {
  router.push(path)
}

// 购物车页面导航
const goToCart = () => {
  // 这里可以添加购物车相关的逻辑
  router.push('/cart')
}

// 个人中心页面导航
const goToProfile = () => {
  // 这里可以添加用户认证检查等逻辑
  router.push('/profile')
}
</script>

<style scoped>
/* 底部导航样式 */
.q-footer {
  border-top: 1px solid #e0e0e0;
}

.text-caption {
  font-size: 12px;
}
</style>