<template>
    <header class="header">
      <div class="logo-wrap">
        <i class="icon-menu icli nav-bar" @click="toggleMenu"></i>
        <!-- <a href="###"> <img class="logo logo-w" src="@/assets/images/logo/logo-w.png" alt="logo" /></a> -->
        <a href="###"> 
          <img class="logo" src="@/assets/images/logo/logo_w.jpg" alt="logo" />
        </a>
      </div>
      <div class="avatar-wrap" @click="$router.push('/cart')">
        <!-- <span class="font-sm"><i class="iconly-Location icli font-xl"></i> Los Angeles</span> -->
        <van-icon name="cart-o" :badge="cartStore.cartNum" />
      </div>
    </header>

    <!-- Sidebar Start -->
    <a href="javascript:void(0)" class="overlay-sidebar" :class="{show: showMenu}" @click="toggleMenu"></a>
    <aside class="header-sidebar" :class="{show: showMenu}">
      <div class="wrap">
        <div class="user-panel">
          <!-- <div class="media">
            <a href="account.html"> <img src="assets/images/avatar/avatar.jpg" alt="avatar" /></a>
            <div class="media-body">
              <a href="account.html" class="title-color font-sm"
                >Andrea Joanne
                <span class="content-color font-xs">andreajoanne@gmail.com</span>
              </a>
            </div>
          </div> -->
          <i class="icon-close-circle icli close" @click="toggleMenu"></i>
        </div>

        <!-- Navigation Start -->
        <nav class="navigation">
          <ul>
            <li @click="$router.push('/home')">
              <a class="nav-link title-color font-sm">
                <i class="iconly-Home icli"></i>
                <span>首頁</span>
              </a>
              <a class="arrow" href="###"><i data-feather="chevron-right"></i></a>
            </li>
            <li @click="$router.push('/article?id=145')">
              <a class="nav-link title-color font-sm">
                <i class="iconly-Home icli"></i>
                <span>分銷說明</span>
              </a>
              <a class="arrow" href="###"><i data-feather="chevron-right"></i></a>
            </li>
            <li @click="$router.push('/card')">
              <a class="nav-link title-color font-sm">
                <i class="iconly-Home icli"></i>
                <span>立即購買</span>
              </a>
              <a class="arrow" href="###"><i data-feather="chevron-right"></i></a>
            </li>
            <!-- <li @click="$router.push('/category')">
              <a class="nav-link title-color font-sm">
                <i class="iconly-Home icli"></i>
                <span>線上商店</span>
              </a>
              <a class="arrow" href="###"><i data-feather="chevron-right"></i></a>
            </li> -->
            <li @click="$router.push('/user/info')">
              <a class="nav-link title-color font-sm">
                <i class="iconly-Home icli"></i>
                <span>我的</span>
              </a>
              <a class="arrow" href="###"><i data-feather="chevron-right"></i></a>
            </li>
          </ul>
        </nav>
        <!-- Navigation End -->
      </div>

      <div class="contact-us">
        <span class="title-color">聯絡我們</span>
        <p class="content-color font-xs">如果您有任何問題，立即聯絡我們</p>
        <p class="content-color font-xs">{{ shopStore.config.service_phone}}</p>
        <p class="content-color font-xs">{{ shopStore.config.service_email}}</p>
        <!-- <a href="javascript:void(0)" class="btn-solid"> LINE@客服 </a> -->
        <p class="content-color font-xs">匯康科技有限公司</p>
      </div>
    </aside>
    <!-- Sidebar End -->

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useCartStore } from '@/store/Cart'

import { useShopStore } from '@/store/Shop'

const showMenu = ref(false)

function toggleMenu(){
  showMenu.value = !showMenu.value
}

const cartStore = useCartStore()

const shopStore = useShopStore()

</script>

<style lang="less" scoped>
.logo{
  width: 130px !important;
}

.user-panel{
  text-align: right !important;
  i{
    font-size: 20px;
  }
}
</style>
