<template>
  <div class="carousel-wrapper">
    <transition name="carousel-slide" mode="out-in">
      <keep-alive>
        <component :is="currentComponent" :key="currentComponent" v-if="currentComponent" />
      </keep-alive>
    </transition>
  </div>
</template>
<script>
import ModuleView from './indexModule.vue'
import PackView from './indexPack.vue'

export default {
  name: 'CarouselView',
  components: {
    ModuleView,
    PackView
  },
  data() {
    return {
      componentOrder: ['ModuleView', 'PackView'],
      currentIndex: 0,
      currentComponent: null,
      carouselTimer: null,
      carouselInterval: 30000
    }
  },
  mounted() {
    this.resolveInterval()
    this.switchComponent()
    this.startCarousel()
  },
  beforeDestroy() {
    this.clearCarousel()
  },
  methods: {
    resolveInterval() {
      if (window && window.dt_Config && window.dt_Config.carouselInterval) {
        const dynamicInterval = parseInt(window.dt_Config.carouselInterval, 10)
        if (!Number.isNaN(dynamicInterval) && dynamicInterval > 0) {
          this.carouselInterval = dynamicInterval
        }
      }
    },
    switchComponent() {
      this.currentComponent = this.componentOrder[this.currentIndex]
      this.currentIndex = (this.currentIndex + 1) % this.componentOrder.length
    },
    startCarousel() {
      this.clearCarousel()
      this.carouselTimer = setInterval(() => {
        this.switchComponent()
      }, this.carouselInterval)
    },
    clearCarousel() {
      if (this.carouselTimer) {
        clearInterval(this.carouselTimer)
        this.carouselTimer = null
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.carousel-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

</style>

