<template>
  <div>
    <img src="@/assets/loading.gif" alt="" />
    <div class="text-center text-xs absolute top-16 left-14 mt-5">
      <span v-for="(item, index) in text" :key="index" ref="text">{{
        item
      }}</span>
    </div>
  </div>
</template>

<script lang="ts">
const MAX_VALUE = 1;
const MIN_VALUE = 0.3;
import Vue from 'vue';

export default Vue.extend({
  data() {
    return {
      text: "loading...",
      timerIDs: [] as number[],
      timerID: 0,
    };
  },
  mounted() {
    const list = this.$refs.text as HTMLSpanElement[];
    this.startWave(list, 140, 0.2);
  },
  beforeDestroy() {
    clearInterval(this.timerID);
  },
  methods: {
    startWave(
      list: HTMLSpanElement[],
      timeOfswitchLightToNext: number,
      stepValue: number
    ) {
      const len = list.length;
      let indexOfMax = 0;
      const id = window.setInterval(() => {
        list.forEach((el: HTMLSpanElement, index: number) => {
          const distance1 = Math.abs(indexOfMax - index);
          const distance2 = (function () {
            const min = indexOfMax < index ? indexOfMax : index;
            const max = indexOfMax > index ? indexOfMax : index;
            return min + len - max;
          })();
          const minDistance = Math.min(distance1, distance2);
          const curValue = MAX_VALUE - minDistance * stepValue;
          this.changeOpacity(el, curValue < MIN_VALUE ? MIN_VALUE : curValue);
        });
        indexOfMax = (indexOfMax + 1) % len;
      }, timeOfswitchLightToNext);
      this.timerID = id;
    },
    changeOpacity(el: HTMLSpanElement, value: number) {
      el.setAttribute("style", `opacity: ${value.toString()}`);
    },
  },
});
</script>

<style>
</style>