<template>
  <div class="bg-detail bg-form">
    <!-- 固定导航 -->
    <div class="bg-tabs-nav--fixed" v-show="showFixedBars">
      <ul v-if="calcTabs().length">
        <li
          v-for="(item, index) in calcTabs()"
          :key="'tab_' + index"
          :class="{
            current: activeName === item.name,
          }"
          @click="changeActiveName(item, index)">
          {{ item.label }}
        </li>
        <li>
          <!-- empty -->
        </li>
      </ul>
    </div>

    <!-- 面包屑 -->
    <div class="bg-breadcrumb">
      <slot name="breadcrumb" />
    </div>

    <!-- 基本信息 -->
    <div class="bg-detail-info" v-if="$slots.info">
      <slot name="info" />
    </div>

    <!-- 兼容意外模块 -->
    <div v-if="$slots.other">
      <slot name="other" />
    </div>

    <!-- 详情 -->
    <div class="bg-tabs bg-detail-tabs">
      <div class="bg-tabs-nav" v-if="calcTabs().length">
        <ul>
          <li
            v-for="(item, index) in calcTabs()"
            :key="'tab_' + index"
            :class="{
              current: activeName === item.name,
            }"
            @click="changeActiveName(item, index)">
            {{ item.label }}
          </li>
          <li>
            <!-- empty -->
          </li>
        </ul>
      </div>
      <div class="bg-tabs-content">
        <slot />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, provide, reactive, onBeforeMount, onMounted, onUnmounted, nextTick, toRefs, useSlots } from "vue";

const slots = useSlots();

const activeName = ref("");

const bgDetail = ref(null);
provide("getActiveName", activeName.value);

provide("getIsTabs", false);

const showFixedBars = ref(false);

const state = reactive({
  scrollCallback: null,
});

const calcTabs = () => {
  let tabSlots = [];

  if (slots.default()) {
    tabSlots = slots
      .default()
      .filter((vnode) => vnode.tag && vnode.componentOptions && vnode.componentOptions.Ctor.options.name === "BgTab")
      .map((vnode) => vnode.componentOptions.propsData);
  }

  return tabSlots;
};
const changeActiveName = ({ name }, index) => {
  let targetEl = bgDetail.value.querySelectorAll(`.bg-tab`)[index];
  let targetCtx = document.querySelector(`.bg-main`);

  targetCtx.scrollTop = targetEl && targetEl.offsetTop - 165;

  activeName.value = name;
  state.scrollCallback = () => {
    activeName.value = name;
  };
};
const scrollAction = () => {
  let targetCtx = document.querySelector(`.bg-main`);
  let ctxScrollTop = targetCtx.scrollTop || 0;
  let targetEls = bgDetail.value.querySelectorAll(`.bg-tab`);
  let tabs = calcTabs();

  for (let i = 0; i < targetEls.length; i++) {
    let targetEl = targetEls[i];

    if (ctxScrollTop >= targetEl.offsetTop) {
      activeName.value = tabs[i].name;
    }
  }

  showFixedBars.value = ctxScrollTop > 222;
  state.scrollCallback && state.scrollCallback();
  state.scrollCallback = null;
};

onMounted(() => {
  nextTick().then(() => {
    let tabs = calcTabs();
    activeName.value = tabs[0] && tabs[0].name;
    scrollAction();
    window.addEventListener("scroll", scrollAction, true);
  });
});

onUnmounted(() => {
  window.removeEventListener("scroll", scrollAction, true);
});
</script>
