<!--
 * 【模块 export 内容】
 * JsvCouplets：春联组件
 *      props说明:
 *          width         {Number}   春联宽度
 *          animTime      {Number}   春联滚动时间
 *          left          {Number}   春联Left位置
 *          top           {Number}   春联Top位置 
 * 
-->
<template>
  <JsvPreload
    :preloadList="preload_info"
    :onPreloadDone="loadDone"
  ></JsvPreload>
  <div
    v-show="myShow"
    :style="{
      width: 180,
      height: adaptedHeight,
      top: props.top,
      left: props.left,
      transform: `scale3d(${props.width / 180},${props.width / 180},1)`,
      transformOrigin: 'left top',
    }"
  >
    <div
      :style="{
        top: 0,
        left: 0,
        width: 180,
        height: adaptedHeight,
        overflow: 'hidden',
        animation: aniName1,
      }"
    >
      <div
        :style="{
          top: 0,
          left: 0,
          width: 180,
          height: adaptedHeight,
          backgroundImage: Couplets,
          animation: aniName2,
        }"
      ></div>
    </div>
    <!-- 滚轴动画 -->
    <JsvSpriteLoader
      :imageUrl="scrollPng"
      :configUrl="scrollJson"
      :onConfigReady="preloadCallback"
      :noNeedResource="false"
    >
      <div
        :style="{
          left: -30,
          top: adaptedHeight,
          transform: `scale3d(${(180 + 60) / view_size.w},1,1)`,
        }"
      >
        <div
          :style="{
            width: view_size.w,
            height: view_size.h,
            animation: aniName1,
          }"
        >
          <JsvSpriteAnim
            :spriteInfo="sprite_info.info"
            :loop="4"
            :duration="props.animTime / 4"
            :imageUrl="scrollPng"
            ref="myRef"
          >
          </JsvSpriteAnim>
        </div>
      </div>
    </JsvSpriteLoader>
    <!-- 滚轴图片 -->
    <div
      :style="{
        top: -30,
        left: -30,
        width: 180 + 60,
        height: 30,
        backgroundImage: scroll,
      }"
    ></div>
  </div>
</template>

<script setup>
import {
  JsvSpriteAnim,
  getKeyFramesGroup,
  JsvSpriteLoader,
  JsvPreload,
} from "jsview";
import { shallowRef, onBeforeUnmount, watch } from "vue";
import { _formatInfo } from "../Common/SpriteDeal";
import { buildPreloadInfo } from "../../../../jsview-vue/utils";
const props = defineProps({
  width: { type: Number, require: true },
  height: { type: Number, require: true },
  animTime: { type: Number, require: true },
  left: { type: Number, default: 0 },
  top: { type: Number, default: 0 },
});
let myShow = shallowRef(false);
const Couplets =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Couplets/Couplets/Couplets.png";
const scrollPng =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Couplets/Couplets/scroll.png";
const scrollJson =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Couplets/Couplets/scroll.json";
const scroll =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/CoupletsTest/widget/Couplets/Couplets/scroll1.png";

//预加载
const preload_info = [
  buildPreloadInfo(Couplets),
  buildPreloadInfo(scrollPng),
  buildPreloadInfo(scroll),
];
//春联高度（可修改适配）
let adaptedHeight = 500;

let readyNum = shallowRef(0);
const loadDone = (a) => {
  readyNum.value++;
};
let sprite_info = shallowRef(null);
const view_size = shallowRef(null);
const preloadCallback = (config_json, resolve_set) => {
  sprite_info.value = _formatInfo(config_json);
  view_size.value = {
    w: sprite_info.value.maxW,
    h: sprite_info.value.maxH,
  };
  resolve_set(); // 通知loader数组设置完成
  readyNum.value++;
};
//动画名字
let aniName1 = shallowRef(null);
let aniName2 = shallowRef(null);

//插入动画
const idRandom = Math.floor(Math.random() * 1000000);
let name1 = "anim1-" + idRandom;
let name2 = "anim2-" + idRandom;
let styleShell = getKeyFramesGroup();
let anim1 = `@keyframes ${name1} {
        from {
          transform: translate3d(0,${-adaptedHeight}, 0);
        }
        to {
          transform: translate3d(0, 0, 0);
        }
      }`;
styleShell.insertRule(anim1);
let anim2 = `@keyframes ${name2} {
        from {
          transform: translate3d(0,${adaptedHeight}, 0);
        }
        to {
          transform: translate3d(0, 0, 0);
        }
      }`;
styleShell.insertRule(anim2);

let timer = { id: -1 };
//ref
let myRef = shallowRef(null);
watch(readyNum, (n, o) => {
  if (o != 2 && n == 2) {
    timer.id = setTimeout(() => {
      myShow.value = true;
      myRef.value.start();
      aniName1.value = `${name1} ${props.animTime}s linear`;
      aniName2.value = `${name2} ${props.animTime}s linear`;
    }, 0);
  }
});

onBeforeUnmount(() => {
  styleShell.removeRule(name1);
  styleShell.removeRule(name2);
  clearTimeout(timer.id);
  timer.id = -1;
});
</script>

<style scoped></style>
