<template>
  <div class="container">
    <!-- 背景圖 -->
    <div class="bgpic">...</div>
    
    <!-- Tab 欄（添加 ref 用于獲取 DOM） -->
    <div class="tab" :class="{'h5-tab': isMobile}" ref="tabRef">
      <div class="tab-box">
        <div class="tab-content">
          <span 
            v-for="item in sortedMenuList" 
            :key="item.id"
            @click="handleChose(item)"
            :class="{ 'current-tab': currentTab == item.menuName }"
          >
            {{ item.menuName }}
          </span>
        </div>
      </div>
    </div>

    <!-- 內(nèi)容區(qū)（各 Tab 對應組件） -->
    <div class="content">
      <div v-show="currentTab == '流域項目'">...</div>
      <div v-show="currentTab == '省級項目'">...</div>
      ...
    </div>
  </div>
</template>

.tab {
  height: 96px;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* ?? 核心：sticky 定位實現(xiàn)吸頂 */
  position: sticky;
  top: 95px; /* 與 App.vue 中 .content 的 padding-top 一致 */
  z-index: 10;
}

.content { padding-top: v-bind('isWelcome ? 0 : "95px"'); }

const handleChose = (val, skipAnimation = false) => {
  // 1. 更新當前 Tab 和菜單 ID
  currentTab.value = val.menuName;
  menuId.value = val.id;

  // 2. 重置子組件狀態(tài)（略）

  // 3. 【關(guān)鍵】移動端或跳過動畫時直接返回
  if (isMobile.value || skipAnimation) return;

  // 4. 平滑滾動到 Tab 位置
  nextTick(() => {
    const bgpic = document.querySelector('.bgpic');
    const bgpicHeight = bgpic ? bgpic.offsetHeight : 0;
    const layout = document.querySelector('.layout');
    
    if (layout) {
      setTimeout(() => {
        // 目標滾動位置 = 背景圖高度（即 Tab 的 offsetTop）
        layout.scrollTo({
          top: bgpicHeight,
          behavior: 'smooth'
        });
      }, 0);
    }
  });
};

// 通用獲取元素相對于滾動容器的 offsetTop
function getOffsetTop(element, container) {
  let offsetTop = 0;
  let el = element;
  while (el && el !== container && el !== document.body) {
    offsetTop += el.offsetTop;
    el = el.offsetParent;
  }
  return offsetTop;
}

// 在 handleChose 中使用
nextTick(() => {
  const layout = document.querySelector('.layout');
  const tabEl = tabRef.value;
  if (layout && tabEl) {
    const offsetTop = getOffsetTop(tabEl, layout);
    const headerHeight = 95; // 或動態(tài)獲取
    layout.scrollTo({
      top: offsetTop - headerHeight,
      behavior: 'smooth'
    });
  }
});