<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { guid } from '@/utils/common';


const panelId = `slider-panel-${guid()}`
const contentId = `slider-content-${guid()}`


let timer:NodeJS.Timer

const isMove = ref(true)
function startLoop() {
  timer = setInterval(() => {
    if(!isMove.value) return
    const sliderContent = document.getElementById(contentId)
    const sliderPanel = document.getElementById(panelId)
    let prev:number = sliderContent!.style.marginTop ? Number(sliderContent!.style.marginTop.replaceAll("px", "")) : 0
    if (Math.abs(prev) >= sliderPanel!.clientHeight) {
      prev = -5
    }
    sliderContent!.style.marginTop = (prev - 1 ) + `px`;
  }, 35)
}


onMounted(() => {
  startLoop();
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})

function copeMoveSate(state: boolean) {
  isMove.value = state  
}


</script>

<template>
  <div :id="panelId" class="slider-panel" ref="sliderPanel" @mouseover="() => copeMoveSate(false)" @mouseout="() => copeMoveSate(true)">
    <div :id="contentId"  ref="sliderContent" class="slider-content" style="margin-top: 0px;">
      <slot />
      <slot />
    </div>
  </div>
</template>

<style scoped lang="less">
.slider-panel {
  overflow: hidden;
  .slider-content {
  }
}
</style>
