<template>
  <div class="new-text" @click.capture="() => {}">
    <div class="wrapper" :style="countStyle" @click="onGo">
      {{ option.text }}
    </div>
  </div>
</template>
<script>
export default {
  name: "new-text",
  props: ["option", "site", "isEdit"],
  data() {
    return {
      left: 0,
      task: null,
    };
  },
  computed: {
    countStyle() {
      let { color, fontSize, letterSpacing, fontWeight, switchHref } =
        this.option;
      return {
        color: color,
        fontSize: fontSize + "px",
        letterSpacing: letterSpacing + "px",
        fontWeight,
        cursor: switchHref ? "pointer" : "unset",
        transform: `translateX(${this.left}px)`,
      };
    },
  },
  watch: {
    "option.switchRoll"() {
      this.handleTask();
    },
  },
  mounted() {
    this.handleTask();
  },
  methods: {
    handleTask() {
      if (this.option.switchRoll) {
        this.task = setInterval(this.taskFunction, 16);
      } else {
        this.left = 0;
        clearInterval(this.task);
      }
    },
    taskFunction() {
      let { fontSize, letterSpacing, text, speed } = this.option;
      this.left -= Math.max(speed / 10, 0);
      let maxWidth =
        (parseInt(fontSize) + parseInt(letterSpacing)) * text.length -
        letterSpacing;
      if (this.left + maxWidth <= 0) {
        this.left = this.site.w;
      }
    },
    onGo() {
      if (this.isEdit) return;
      let { switchHref, href, hrefType } = this.option;
      if (switchHref) {
        window.open(href, hrefType);
      }
    },
  },
};
</script>
<style lang="scss">
.new-text {
  overflow: hidden;
  .wrapper {
    min-width: 100%;
    height: 100%;
    text-decoration: none;
    white-space: nowrap;
  }
}
</style>