<script setup lang="ts">
  import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';

  const scrollContainer = ref<HTMLElement | null>(null);
  const isSnap = ref<boolean>(true)

  const isLeftEdge = ref<boolean>(true)

  const isRightEdge = ref<boolean>(false)

   const changeScroll=(Dom:HTMLElement,target:number)=>{
    const startTime = performance.now();
    const startScroll = Dom.scrollLeft;
    const duration = 150;
    const animate = (timestamp: number) => {
      const progress = (timestamp - startTime) / duration;
      if (progress < 1) {
        // 线性插值计算当前位置
        const current = startScroll + (target - startScroll) * progress;
        Dom.scrollLeft = current;
        window.requestAnimationFrame(animate);
      } else {
        // 动画结束，跳转到目标位置（避免误差）
        isSnap.value = true;
        nextTick(()=>{
          setTimeout(()=>{
            Dom.scrollLeft = target-1;
          },0)
        })
      }
    };

    window.requestAnimationFrame(animate);
  }

  const handleScrollClick=(type:'prev'|'next')=>{
    const container = scrollContainer.value
    const containerWidth = container?.clientWidth || 0;
    const currentScroll = container?.scrollLeft || 0;
    isSnap.value = false;
    let scrollLeft = 0;
    if(type==='prev'){
      scrollLeft = currentScroll - containerWidth;
    }else{
      scrollLeft = currentScroll + containerWidth;
    }
    scrollLeft=scrollLeft<0?0:scrollLeft
    // 有动画
    setTimeout(()=>{
      changeScroll(container as HTMLElement, scrollLeft)
    },0)
  }

  const scrollTimer = ref<null>(null); // 定时器引用
  const currentScreenIndex = ref(0); // 当前屏索引
  const isInteracting = ref(false);


  // 判断第几屏吗
  const changeSwiperIndex = (index:number) =>{
    currentScreenIndex.value=index
    console.log('当前第'+(currentScreenIndex.value+1)+'屏')
  }


  const handleScroll = () => {
    if (!scrollContainer.value) return;
    
    const container = scrollContainer.value;
    // 当前滚动位置
    const currentScroll = container.scrollLeft;

    const maxScroll = container.scrollWidth - container.clientWidth - 5

    nextTick(() => {
      isLeftEdge.value = currentScroll < 5;
      isRightEdge.value = currentScroll >= maxScroll;
      // console.log(isLeftEdge.value, isRightEdge.value)
    });

      // 清除之前的定时器
    if (scrollTimer.value) {
      clearTimeout(scrollTimer.value);
      scrollTimer.value = null;
    }
      if (!isInteracting.value) {
      scrollTimer.value = setTimeout(() => {
        // 计算当前滚动到第几屏
        const screenWidth = container.clientWidth;
        const currentScreen = Math.round(currentScroll / screenWidth);
        changeSwiperIndex(currentScreen)
      }, 100); //
    }
  };
  
  onMounted(() => {
    window.onresize = function () {
      const container = scrollContainer.value as HTMLElement;
      container.scrollLeft = container.scrollLeft + 1;
    }
    if (scrollContainer.value) {
      scrollContainer.value.addEventListener('touchstart', () => {
      isInteracting.value = true; // 标记用户开始交互
    });

    scrollContainer.value.addEventListener('touchend', () => {
      isInteracting.value = false; // 标记用户结束交互
      handleScroll(); // 立即触发滚动计算
    });

    // 添加鼠标事件监听（兼容桌面端）
    scrollContainer.value.addEventListener('mousedown', () => {
      isInteracting.value = true;
    });

    scrollContainer.value.addEventListener('mouseup', () => {
      isInteracting.value = false;
      handleScroll();
    });
    scrollContainer.value.removeEventListener('scroll', handleScroll);
    scrollContainer.value.addEventListener('scroll', handleScroll);
    }
  })
  onBeforeUnmount(() => {
    if (scrollContainer.value) {
      scrollContainer.value.removeEventListener('touchstart', () => {});
      scrollContainer.value.removeEventListener('touchend', () => {});
      scrollContainer.value.removeEventListener('mousedown', () => {});
      scrollContainer.value.removeEventListener('mouseup', () => {});
      scrollContainer.value.removeEventListener('scroll', handleScroll);
    }
  });

</script>

<template>
  <div class="firstTitle">最后在h5端看效果</div>
  <div class="scroll-main">
   <div class="scroll-head">
      <div class="title">
        提示
      </div>
      <div class="right">
        <div 
          @click="isLeftEdge ? () => {} : handleScrollClick('prev')" 
          class="prev" 
          :class="{ 'lookClick': !isLeftEdge }"
        >
          <
        </div>
        <div 
          @click="isRightEdge ? () => {} : handleScrollClick('next')" 
          class="next" 
          :class="{ 'lookClick': !isRightEdge }"
        >
          >
        </div>
      </div>
    </div>
    <div 
      ref="scrollContainer" 
      class="scroll-container" 
      @scroll="handleScroll"
      :class="{ 'scroll-snap': isSnap }"
    >
      <div class="scroll-content">
        <div 
          v-for="(item, index) in 20" 
          :key="index" 
          class="scroll-item"
        >
           {{item}}
          <!-- 元素内容 -->
        </div>
      </div>
    </div>
  </div>
</template>
<style>
#app{
  padding: 0 !important;
}
.firstTitle{
  color: #000;
  font-size: 16px;
  text-align: center;
  margin: 20px 0;
}
</style>
<style scoped >
.scroll-main{
  margin-top: 10px;
  width: 375px;
  margin: 0 auto;
}
.scroll-head{
    display: flex;
    padding: 0 13px;
    justify-content: space-between;
    align-items: center;
    
}
.title{
  color: #000;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: bolder;
  flex: 1;
}


.right{
  display: flex;
}

.prev,.next{
        display: flex;
        border-radius: 4px;
        background: #31363A;
        display: flex;
        width: 30px;
        height: 30px;
        padding: 10px 8px;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #fff;
        margin-left: 10px;
        cursor: pointer;
}

.lookClick{
  background: #394143;
}


/*下面时滚动的 */
.scroll-container {
  margin: 10px auto;
  width: 375px;
  overflow-x: auto;
  white-space: nowrap;
}
.scroll-container.scroll-snap{
  scroll-snap-type: x mandatory; /* 强制滚动到snap目标 */
  -webkit-scroll-snap-type: x mandatory; 
  -webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */
  scroll-behavior: smooth; /**强制平滑滚动（电脑端） */
}
.scroll-container::-webkit-scrollbar {
  display: none;
}

.scroll-content{
  display: flex;
  width: fit-content;
  padding: 0 0.26rem;
}

.spacer{
  flex-shrink: 0;
  width: 10px;
  height: 149px;
  scroll-snap-align: start;
  -webkit-scroll-snap-align: start;
  display: inline-block;
}
.scroll-item {
  flex-shrink: 0;
  /* scroll-snap-align: start;
  -webkit-scroll-snap-align: start; */

  /**由于设置了 scroll-margin-left 和 scroll-margin-right  会到导致  scroll-snap-align 的 对齐方式都会受到影响，慎重使用*/
  scroll-snap-align: end;
  -webkit-scroll-snap-align: end;
  display: inline-block;
  margin-left: 6px;
  width: 112px;
  height: 149px;
  background-color: red;
  border-radius: 10px;
  

  /*每个 .scroll-item 会向左和向右偏移 13px,视觉效果：滚动到某个元素时，该元素居中，前后元素各露出 13px*/
  scroll-margin-left: 13px;
  scroll-margin-right:13px;
  -webkit-scroll-margin-left: 13px;
  -webkit-scroll-margin-right: 13px;
}

/* 存在 .spacer 时，第二个子元素（即第一个 .scroll-item） */
.scroll-content > :not(.scroll-item) + .scroll-item {
  margin-left: 0;
}

/* 不存在 .spacer 时，第一个子元素就是 .scroll-item */
.scroll-content > .scroll-item:first-child {
  margin-left: 0;
}

</style>
