<script setup lang="ts">
import { onMounted, ref, watchEffect } from 'vue';
import { SimpleTimer } from '@imengyu/imengyu-utils';
import FlexRow from '../layout/FlexRow.vue';
import VerticalScrollOneText, { type VerticalScrollOneTextProps } from './VerticalScrollOneText.vue';

export interface VerticalScrollTextsProps extends VerticalScrollOneTextProps {
  /**
   * 文字字符串
   */
  texts?: string[];
  /**
   * 切换延时
   * @default 2000
   */
  interval?: number;
}

const {
  interval = 2000,
  texts = [],
} = defineProps<VerticalScrollTextsProps>();

const str = ref('');
let index = 0;

watchEffect((onCleanUp) => {
  const timer = new SimpleTimer(undefined, () => {
    loadText()
  }, interval)
  timer.start();

  onCleanUp(() => {
    timer.stop();
  });
})

function loadText() {
  if (index >= texts.length)
    index = 0;
  str.value = texts[index];
  index++;
}

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

</script>

<template>
  <FlexRow>
    <VerticalScrollOneText v-bind="$props" :oneStr="str" />
  </FlexRow>
</template>