<template>
  <div ref="bgDetail" class="bg-detail bg-form">
    <!-- 固定导航 -->
    <div v-show="showFixedBars" class="bg-tabs-nav--fixed">
      <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"></slot>
    </div>

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

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

    <!-- 详情 -->
    <div class="bg-tabs bg-detail-tabs">
      <div v-if="calcTabs().length" class="bg-tabs-nav">
        <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></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>
