<template>
  <q-layout view="hHh lpR fFf">
    <q-header class="bg-dark text-white">
      <q-toolbar class="sd-page-padding" style="max-width: 1920px; margin: 0 auto; height: 100%;">
        <div class="row items-center no-wrap">
          <!-- Logo -->
          <!-- <img src="~assets/images/logo.png" alt="logo" style="width: 170px; height: 44px;" /> -->
          <!-- Navigation -->
          <q-tabs class="" shrink>
            <q-route-tab to="/" label="Home" class="text-weight-bold" />
            <q-route-tab to="/games" label="Games" />
            <q-route-tab to="/blog" label="Blog" />
            <q-route-tab to="/help" label="Help Center" />
          </q-tabs>
        </div>
        <q-space />
        <div class="row items-center no-wrap q-gutter-x-md">
          <!-- Search -->
          <q-btn flat round icon="search" />

          <!-- Cart -->
          <q-btn flat round>
            <q-icon name="shopping_cart" />
            <q-badge color="red" floating>1</q-badge>
          </q-btn>

          <!-- Language/Currency -->
          <span>$USD l EN</span>

          <!-- User Profile -->
          <q-avatar>
            <q-icon name="account_circle" size="48px" />
          </q-avatar>
        </div>
      </q-toolbar>
    </q-header>

    <q-page-container>
      <template v-if="$q.platform.is.mobile">
        <router-view v-slot="{ Component }">
          <transition appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
            <component :is="Component" :key="$route.path" />
          </transition>
        </router-view>
        <!-- 移动端页脚 -->
        <q-footer class="bg-white text-black border-top">
          <q-toolbar class="q-pa-md">
            <div class="row items-center justify-around full-width">
              <q-btn flat class="col text-center" to="/">
                <div class="column items-center">
                  <q-icon name="home" size="24px" />
                  <div class="text-caption q-mt-xs">首页</div>
                </div>
              </q-btn>
              <q-btn flat class="col text-center" to="/games">
                <div class="column items-center">
                  <q-icon name="sports_esports" size="24px" />
                  <div class="text-caption q-mt-xs">游戏</div>
                </div>
              </q-btn>
              <q-btn flat class="col text-center">
                <div class="column items-center">
                  <q-icon name="shopping_cart" size="24px" />
                  <q-badge color="red" floating>1</q-badge>
                  <div class="text-caption q-mt-xs">购物车</div>
                </div>
              </q-btn>
              <q-btn flat class="col text-center" to="/help">
                <div class="column items-center">
                  <q-icon name="help" size="24px" />
                  <div class="text-caption q-mt-xs">帮助</div>
                </div>
              </q-btn>
              <q-btn flat class="col text-center">
                <div class="column items-center">
                  <q-icon name="account_circle" size="24px" />
                  <div class="text-caption q-mt-xs">我的</div>
                </div>
              </q-btn>
            </div>
          </q-toolbar>
        </q-footer>
      </template>
      <template v-else>
        <CustomScrollContainer height="calc(100vh - 50px)" :top-offset="50">
          <router-view v-slot="{ Component }">
            <transition appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" mode="out-in">
              <component :is="Component" :key="$route.path" />
            </transition>
          </router-view>
        </CustomScrollContainer>
      </template>
    </q-page-container>

  </q-layout>
</template>

<script setup>
import CustomScrollContainer from 'src/components/CustomScrollContainer.vue'
</script>

<style scoped>
.animated {
  animation-duration: 0.5s;
  animation-fill-mode: both;
}

.fadeIn {
  animation-name: fadeIn;
}

.fadeOut {
  animation-name: fadeOut;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>
