<template>
  <div class="marquee-warpper">
    <div class="marquue-content" ref="marqueeContent">
      <div class="first-text" ref="firstText">
        {{ val }}
      </div>
      <div class="last-text" ref="lastText"></div>
    </div>
  </div>
</template>
<script>
import { onMounted, ref, reactive, toRefs } from "vue";
export default {
  name: "Marquee",
  props: {
    triggerSize: Number,
    dir: {
      validator: function (value) {
        return ["x", "X", "y", "Y"].indexOf(value) !== -1;
      },
      default: "X",
    },
    speedTime: Number,
    value: Number | String,
    spacing: {
      type: Number,
      default: 20,
    },
  },
  setup(props, ctx) {
    const marqueeContent = ref(null);
    const firstText = ref(null);
    const lastText = ref(null);
    const dir = props.dir.toUpperCase();
    const state = reactive({
      val: props.value,
      triggerSize: props.triggerSize,
    });
    /*
     *获取容器大小
     */
    const getBoxSize = () => {
      if (dir === "X") {
        return marqueeContent.value.clientWidth;
      }
      if (dir === "Y") {
        return marqueeContent.value.clientHeight;
      }
    };

    /*
     *设置跑马灯属性
     */
    const setTextX = (text) => {
      if (text != "") {
        lastText.value.style.display = "inline-block";
        firstText.value.style.paddingRight = props.spacing + "px";
        lastText.value.style.paddingRight = props.spacing + "px";
        marqueeContent.value.style.whiteSpace = "nowrap";
      } else {
        firstText.value.style.paddingRight = 0;
        lastText.value.style.display = "none";
        lastText.value.style.paddingRight = 0;
      }
      lastText.value.innerHTML = text;
    };
    /*
     *设置跑马灯属性
     */
    const setTextY = (text) => {
      if (text != "") {
        lastText.value.style.display = "inline-block";
        firstText.value.style.paddingBottom = props.spacing + "px";
        lastText.value.style.paddingBottom = props.spacing + "px";
        marqueeContent.value.style.whiteSpace = "wrap";
      } else {
        firstText.value.style.paddingBottom = 0;
        lastText.value.style.display = "none";
        lastText.value.style.paddingBottom = 0;
      }
      lastText.value.innerHTML = text;
    };
    /*
     *设置跑马灯动画
     */
    const setAnimation = () => {
      let size = getBoxSize();
      console.log(size, "大小");
      if (size >= state.triggerSize) {
        if (dir === "X") {
          setTextX(state.val);
          marqueeContent.value.style.animation = `move-x ${props.speedTime}s linear infinite`;
        }
        if (dir === "Y") {
          setTextY(state.val);
          marqueeContent.value.style.animation = `move-y ${props.speedTime}s linear infinite`;
        }
      } else {
        marqueeContent.value.style.animation = "";
      }
    };
    /*
     *组件挂载
     */
    onMounted(() => {
      setAnimation();
      const callback = (entries) => {
        if(entries[0].intersectionRatio >= 0){
           setAnimation();
        }
      };
      const io = new IntersectionObserver(callback);
      io.observe(marqueeContent.value);
    });

    return {
      marqueeContent,
      firstText,
      lastText,
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss">
.marquee-warpper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .marquue-content {
    width: fit-content;
    //white-space: nowrap;
    height: fit-content;
    //white-space: wrap;
    word-break: break-all;
    display: inline-block;
    div {
      display: inline-block;
    }
    .last-text {
      display: none;
    }
  }
  @keyframes move-x {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  @keyframes move-y {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(-50%);
    }
  }
}
</style>