<template>
  <JsvFreeMoveActor
    :top="-myHeight"
    :left="myLeft"
    :width="2"
    :height="myHeight"
    ref="myRef"
  >
    <div
      :style="{
        width: 2,
        height: myHeight,
        backgroundImage: `jsvtexturestore://${sourceId}`,
      }"
    ></div>
  </JsvFreeMoveActor>
</template>

<script setup>
import { shallowRef, onBeforeUnmount, onMounted } from "vue";
import { JsvTextureStoreApi, JsvFreeMoveActor } from "jsview";
let canvasRef;
let sourceId = shallowRef("");
const canvasTexture = JsvTextureStoreApi.canvasTexture(10, 200);
canvasTexture.drawLine(0, 0, 0, 200, 10, "rgba(255, 255, 255, 0.5)");
canvasRef = canvasTexture.commit();
sourceId.value = canvasRef;
//随机长度函数(限制在80-160)
const randomHeight = () => {
  return Math.floor(Math.random() * 80) + 80;
};

//随机left值
const randomLeft = () => {
  return Math.floor(Math.random() * 1280);
};
const myHeight = randomHeight();
const myLeft = randomLeft();

let myRef = shallowRef(null);
let myControl;
let randomInteger = Math.floor(Math.random() * 200) + 1;

onMounted(() => {
  myControl = myRef.value.control;
  myControl.run((cmds) => [
    cmds
      .condition()
      .onNextTick(randomInteger)
      .then([
        cmds.action().setSpeed(undefined, 9),
        cmds.action(3).setAccel(undefined, 0.13),
      ]),
    cmds
      .condition(undefined, true)
      .reachPosition(undefined, 620)
      .then([
        cmds.action().teleportTo(undefined, -580 - myHeight),
        cmds.action().setSpeed(undefined, 9),
        cmds.action(3).setAccel(undefined, 0.13),
      ]),
  ]);
});
onBeforeUnmount(() => {
  JsvTextureStoreApi.deleteTexture(sourceId.value);
});
</script>

<style lang="scss" scoped></style>
