<template>
  <div class="header">
    <h3>{{name}}</h3>
    <img class="menu" @click="showAside=!showAside" :src="require(`@/assets/images/icon/mb_menu.png`)" alt="">
  </div>

  <teleport to='body'>
    <transition name="right">
      <div v-if="showAside" @click="showAside=false" class="aside">
        <div @click.stop class="sider">
          <ul>
            <li @click="onClick(item)" :class="{active:currentTab==item.id}" v-for="(item,i) in menu" :key="i">
              <div>{{item.name}}</div>
            </li>
          </ul>
        </div>
      </div>
    </transition>
  </teleport>
</template>

<script setup>
import { ref, onMounted, computed, nextTick, provide } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Loading } from "@/components/UI";

import { getConfig } from "@/config/api";


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

const showAside = ref(false)
const name = ref('')


const menu = ref([
  {
    name: '首页',
    id: 'home',
  },
  {
    name: '广东省博物馆',
    id: 'gdmuseum',
  },
  {
    name: '热门展览',
    id: 'exhibition',
  },
  {
    name: '精品典藏',
    id: 'collection',
  },
  // {
  //   name: '展馆概况',
  //   id: 'overview',
  // },
])

const currentTab = computed(() => route.name)

const onClick = data => {
  if (data.id == 'home') {
    console.log(1111);
    Loading.show()
  }
  setTimeout(() => {
    router.push({ name: data.id })
    showAside.value = false
  });

}

onMounted(() => {
  getConfig(data=>{
    name.value = data.data.name
  })
})
</script>

<style lang="scss" scoped>
.header {
  background: var(--main-color);
  width: 100%;
  height: 60px;
  display: flex;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  >h3 {
    text-align: center;
  }

  .menu {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 20px;
  }
}

.aside {
  position: fixed;
  right: 0;
  width: 100%;
  height: 100%;
  top: 60px;
  z-index: 999999;

  .sider {
    float: right;
    background: rgba(255, 254, 246, 0.94);
    backdrop-filter: blur(20px);
    width: 80%;
    height: 100%;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);

    >ul {
      width: 90%;
      margin: 0 auto;

      >li {
        width: 100%;
        font-size: 16px;
        line-height: 2;
        padding: 16px 0;
        color: #999999;
        border-bottom: 1px solid rgba(185, 185, 185, 1);

        &.active {
          color: var(--main-color);
          font-weight: bold;
        }
      }
    }
  }
}
</style>