<template>
  <Teleport to="body">
    <ul class="nav" v-show="current != 0">
      <li data-menuanchor="section2" class="active" @click="handleSlideTo(2)">
        <i></i>
        <div class="title">
          <h3>首页</h3>
        </div>
      </li>
      <li data-menuanchor="section3" @click="handleSlideTo(3)">
        <i></i>
        <div class="title">
          <h3>开篇</h3>
        </div>
      </li>

      <li @click="handleSlideTo(4)">
        <i></i>
        <div class="title">
          <p>第一章</p>
          <h3>玉生华夏</h3>
        </div>
      </li>

      <li @click="handleSlideTo(14)">
        <i></i>
        <div class="title">
          <p>第二章</p>
          <h3>玉成中国</h3>
        </div>
      </li>

      <li @click="handleSlideTo(23)">
        <i></i>
        <div class="title">
          <p>第三章</p>
          <h3>玉美神州</h3>
        </div>
      </li>

      <li @click="handleSlideTo(30)">
        <i></i>
        <div class="title">
          <h3>尾篇</h3>
        </div>
      </li>
    </ul>
  </Teleport>
</template>
<script setup>
import { computed,ref, onMounted, onUnmounted, watch, watchEffect } from "vue";
import { emitter } from "../emitter.js";
const current =ref(0)
const props = defineProps({
  fullpage: Object,
});
defineOptions({
  name: "nav-guide",
});
onMounted(() => {
  emitter.on("onLeave", (params) => {
    console.log("onLeave", params);
  });
  emitter.on("afterLoad", (params) => {
    current.value = params.index && params.index.index
  });
});
onUnmounted(() => {
  emitter.off("onLeave");
  emitter.off("afterLoad");
});

const handleSlideTo = (index) => {
  if (props.fullpage) {
    props.fullpage.api.moveTo(index);
  }
};
</script>
<style lang="scss" scoped>
@import "/src/assets/style/index.css";
.nav {
  position: fixed;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  // z-index: 1000;
  li {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 10vh;
    cursor: pointer;

    &::after {
      content: "";
      position: absolute;
      width: 1px;
      top: 0.5rem;
      height: 13vh;
      background-color: #7b6f54;
    }
    i {
      position: relative;
      width: 1.25rem;
      height: 1.25rem;
      z-index: 1;
      cursor: pointer;
      &::after {
        content: "";
        position: absolute;
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 50%;
        background-color: #423c2e;
        border: 1px solid #7b6f54;
        box-sizing: border-box;
        box-shadow: 0 0 0px 2px #000;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.6s;
      }
    }
    .title {
      position: absolute;
      color: #d09d68;
      opacity: 0;
      visibility: hidden;
      left: 0;
      padding-left: 1rem;
      width: 8em;
      top: 50%;
      transform: translateY(-50%);
      transition: all 0.6s;
      h3 {
        font-family: "syst-bold";
        font-size: 1.25rem;
      }
    }

    &:hover,
    &.active {
      .title {
        opacity: 1;
        visibility: visible;
        padding-left: 2rem;
      }
    }
  }
}
</style>
