<template>
  <div class="formContainer">
    <div class="formLeft" v-if="showAnchor && scrollContainerSelector">
      <el-affix :offset="affixOffset">
        <el-anchor
          :direction="direction"
          :type="type"
          :offset="anchorOffset"
          @click="handleAnchorClick"
        >
          <!-- -->
          <el-anchor-link
            v-for="item in anchorList"
            :key="item.title"
            :href="'#' + item.title"
            :title="item.name"
            @click="e => handleLinkClick(e, item.title)"
          />
        </el-anchor>
      </el-affix>
    </div>
    <div class="formRight" :class="showAnchor ? 'formRightSelf' : ''">
      <slot name="form-right"></slot>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'

const props = defineProps({
  containerRef: {
    type: Object,
    default: () => {
      return {}
    }
  },
  direction: {
    type: String,
    default: 'vertical'
  },
  type: {
    type: String,
    default: 'default'
  },
  anchorOffset: {
    type: Number,
    default: 30
  },
  affixOffset: {
    type: Number,
    default: 60
  },
  anchorList: {
    type: Array,
    default: () => {
      return []
    }
  },
  // 新增：滚动容器的选择器
  scrollContainerSelector: {
    type: String,
    default: ''
  },
  // 新增：滚动到元素时额外的偏移量
  scrollOffset: {
    type: Number,
    default: 0
  },
  domIndex: {
    type: Number,
    default: 0
  },
  showAnchor: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['anchor-click'])

// 处理锚点点击
const handleAnchorClick = e => {
  // 阻止默认的锚点跳转
  e.preventDefault()
}

// 处理链接点击
const handleLinkClick = (e, anchorId) => {
  e.preventDefault()
  e.stopPropagation()

  emit('anchor-click', anchorId)

  // 延迟执行滚动，确保 DOM 已经更新
  setTimeout(() => {
    scrollToAnchor(anchorId)
  }, 50)
}

// 滚动到锚点
const scrollToAnchor = anchorId => {
  const targetElement = document.getElementById(anchorId)

  if (!targetElement) return

  let scrollContainer
  if (props.scrollContainerSelector) {
    scrollContainer = document.querySelectorAll(props.scrollContainerSelector)
  }

  if (scrollContainer.length > 0) {
    // 计算在容器内的相对位置
    const containerRect = scrollContainer[props.domIndex].getBoundingClientRect()
    const targetRect = targetElement.getBoundingClientRect()

    // 计算滚动位置
    const scrollTop =
      targetRect.top -
      containerRect.top +
      scrollContainer[props.domIndex].scrollTop -
      props.scrollOffset
    // 平滑滚动
    scrollContainer[props.domIndex].scrollTo({
      top: scrollTop,
      behavior: 'smooth'
    })
  } else {
    // 如果没有指定容器，使用默认滚动
    targetElement.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    })
  }
}
// 预留备用
// const scrollToAnchor = async (anchorId: string) => {
//   // 确保 DOM 更新完成（尤其在 tab 切换后）
//   await nextTick()

//   const target = document.getElementById(anchorId)
//   if (!target) {
//     console.warn(`[Anchor Scroll] Target element not found: #${anchorId}`)
//     return
//   }

//   // 关键：从目标元素向上查找最近的 .appointmentTabPaneBox
//   let scrollContainer: HTMLElement | null = target
//   while (scrollContainer && !scrollContainer.classList.contains('appointmentTabPaneBox')) {
//     scrollContainer = scrollContainer.parentElement
//   }

//   if (!scrollContainer) {
//     // 如果没找到，回退到全局滚动
//     target.scrollIntoView({ behavior: 'smooth', block: 'start' })
//     return
//   }

//   // 计算相对滚动位置
//   const containerRect = scrollContainer.getBoundingClientRect()
//   const targetRect = target.getBoundingClientRect()

//   const scrollTop =
//     scrollContainer.scrollTop +
//     (targetRect.top - containerRect.top) -
//     props.scrollOffset

//   scrollContainer.scrollTo({
//     top: scrollTop,
//     behavior: 'smooth'
//   })
// }
// 暴露方法给父组件
defineExpose({
  scrollToAnchor
})
</script>
<style lang="scss" scoped>
.formContainer {
  width: 100%;
  box-sizing: border-box;
  display: flex;
}
.formLeft {
  width: 15%;
  box-sizing: border-box;
  height: 100vh;
}
.formRight {
  flex: 1;
  padding-left: 10px;
  box-sizing: border-box;
}
.formRightSelf {
  border-left: 3px solid rgb(247 247 247);
}
</style>
