<template>
  <!-- 文本滾動 -->
  <div class="text-scroll" ref="textScroll">
    <div class="content" ref="content" :style="scrollAnimation">
      <!-- 默認插槽，插入滾動內容 -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "TextScroll",
  props: {
    /* 滾動方向
     * value: up、down、left、right
     */
    direction: {
      default: "up",
      type: String,
    },
    //滾動速度 單位px/s
    speed: {
      default: 60,
      type: Number,
    },
  },
  data() {
    return {
      //滾動動畫
      scrollAnimation: {},
    };
  },
  methods: {
    getScrollAnimation() {
      //獲取文本滾動實際顯示寬度高度，設為css變量，用于設置動畫開始起始位置
      let height = this.$refs.textScroll.offsetHeight;
      let width = this.$refs.textScroll.offsetWidth;
      this.$refs.content.style.setProperty(
        "--text-scroll-height",
        `${height}px`
      );
      this.$refs.content.style.setProperty("--text-scroll-width", `${width}px`);
      //滾動長度、時間
      let scrollLength, time;
      //根據(jù)滾動方向來設置不同的滾動動畫
      switch (this.direction) {
        case "up":
          scrollLength =
            this.$refs.content.offsetHeight +
            height;
          time = scrollLength / this.speed;
          this.scrollAnimation.animation = `up-scroll linear ${time}s infinite`;
          break;
        case "down":
          scrollLength =
            this.$refs.content.offsetHeight +
            height;
          time = scrollLength / this.speed;
          this.scrollAnimation.animation = `up-scroll linear ${time}s infinite reverse`;
          break;
        case "left":
          scrollLength =
            this.$refs.content.offsetWidth + width;
          time = scrollLength / this.speed;
          this.scrollAnimation.animation = `left-scroll linear ${time}s infinite`;
          break;
        case "right":
          scrollLength =
            this.$refs.content.offsetWidth + width;
          time = scrollLength / this.speed;
          this.scrollAnimation.animation = `left-scroll linear ${time}s infinite reverse`;
          break;
      }
    },
  },
  async mounted() {
    //設置文本滾動動畫
    this.getScrollAnimation();
  },
  updated() {
    //當插槽內容更新重新計算滾動動畫
    this.getScrollAnimation();
  },
};
</script>

<style scoped lang="scss">
.text-scroll {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .content {
    height: fit-content;
    width: fit-content;
  }
}
</style>

<style lang="scss">
.text-scroll {
  .content {
    @keyframes up-scroll {
      0% {
        transform: translateY(var(--text-scroll-height));
      }

      100% {
        transform: translateY(-100%);
      }
    }

    @keyframes left-scroll {
      0% {
        transform: translateX(var(--text-scroll-width));
      }

      100% {
        transform: translateX(-100%);
      }
    }
  }
}
</style>