<template>
  <full-page ref="fullpage" :options="options" @after-load="afterLoad">
    <View :fullpage="fullpage" />
  </full-page>
</template>

<script setup>
import FullPage from "./components/fullpage/fullpage.vue";
import View from "./view/index.vue";
import { onMounted, ref, watchEffect, getCurrentInstance } from "vue";
import { emitter } from "./emitter.js";

const instance = getCurrentInstance();
const fullpage = ref();
onMounted(() => {
  watchEffect(() => {
    if (instance.proxy.$refs.fullpage) {
      fullpage.value = instance.proxy.$refs.fullpage;
    }
  });
});
const onLeave = (index, nextIndex, direction) => {
  emitter.emit("onLeave", { index, nextIndex, direction });
  // console.log("onOnLeave", index, nextIndex, direction);
};

const afterLoad = (anchorLink, index) => {
  emitter.emit("afterLoad", { anchorLink, index });
  // console.log("afterLoad", anchorLink, index);
};

const options = ref({
  licenseKey: "",
  menu: ".nav",
  // anchors: ["section1", "page2", "page3"],
  controlArrows: true,
  scrollOverflow: false,
  normalScrollElements: ".can-scroll",
  // scrollBar: true,
  // sectionsColor: ["#41b883", "#ff5f45", "#0798ec"],
  onLeave: onLeave,
  afterLoad: afterLoad,
});
</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
