<template>
    <!-- Footer Start -->
    <footer class="footer-wrap">
      <ul class="footer">
        <li class="footer-item" :class="{active: $route.path=='/home'}">
          <router-link to="/" class="footer-link">
            <i class="icon-home icli"></i>
            <span>首頁</span>
          </router-link>
        </li>
        <li class="footer-item" :class="{active: $route.path=='/article'}">
          <router-link to="/article?id=145" class="footer-link">
            <i class="icon-share-alt-square-solid icli"></i>
            <span>品牌故事</span>
          </router-link>
        </li>
        <li class="footer-item" :class="{active: $route.path=='/card'}">
          <router-link to="/card" class="footer-link">
            <i class="icon-local-convenience-store icli"></i>
            <span>立即購買</span>
          </router-link>
        </li>
        <!-- <li class="footer-item" :class="{active: $route.path=='/category'}">
          <router-link to="/category" class="footer-link">
            <i class="icon-cart-variant icli"></i>
            <span>線上商店</span>
          </router-link>
        </li> -->
        <li class="footer-item">
          <a href="https://card.slash1000.com" class="footer-link">
            <i class="icon-card-account-details icli"></i>
            <span>電子名片</span>
          </a>
        </li>
        <li class="footer-item" :class="{active: $route.path=='/user/info'}">
          <router-link to="/user/info" class="footer-link">
            <i class="icon-account icli"></i>
            <span>我的</span>
          </router-link>
        </li>
      </ul>
    </footer>
    <!-- Footer End -->
</template>

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

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

const active = ref('Home')

onMounted(async () => {
  await router.isReady()
  // console.log(route.name)
  active.value = route.name
})

</script>

<style lang="less" scoped>
</style>
