<script>
import { getKeyFramesGroup } from "jsview";

const animNamePrefix = "__2025__chunjie__";
const moveDownAnimName = animNamePrefix + "move_down";
const clipResizeAnimName = animNamePrefix + "clip_resize";

const styleShell = getKeyFramesGroup();

const scrollTopOffset = 51;
function buildMove(totalTime, frameList) {
  let moveFrameDefines = [];
  let heightFrameDefines = [];
  for (let i = 0; i < frameList.length; i++) {
    let frameItem = frameList[i];
    let percent = Math.floor((frameItem.timeStamp / totalTime) * 10000) / 100;
    moveFrameDefines.push(
      `${percent}%{top:${frameItem.height + scrollTopOffset}}`
    );
    heightFrameDefines.push(`${percent}%{height:${frameItem.height}}`);
  }
  let moveAnimStr = `@keyframes ${moveDownAnimName} {`;
  for (let i = 0; i < moveFrameDefines.length; i++) {
    moveAnimStr += moveFrameDefines[i];
  }
  moveAnimStr += `}`;
  console.log("move anim: " + moveAnimStr);

  let resizeAnimStr = `@keyframes ${clipResizeAnimName} {`;
  for (let i = 0; i < heightFrameDefines.length; i++) {
    resizeAnimStr += heightFrameDefines[i];
  }
  resizeAnimStr += `}`;
  console.log("resize anim: " + resizeAnimStr);

  return [moveAnimStr, resizeAnimStr];
}
const totalHeight = 874;
const keyframeList = [
  { height: 0, timeStamp: 0 },
  { height: totalHeight, timeStamp: 1300 },
  { height: Math.round(totalHeight * 0.95), timeStamp: 1450 },
  { height: totalHeight, timeStamp: 1600 },
  { height: Math.round(totalHeight * 0.98), timeStamp: 1800 },
  { height: totalHeight, timeStamp: 2000 },
];

let inited = false;
function initChunLianAnim() {
  if (!inited) {
    const [moveAnimStr, resizeAnimStr] = buildMove(2000, keyframeList);
    styleShell.insertRule(moveAnimStr);
    styleShell.insertRule(resizeAnimStr);
    inited = true;
  }
}

function releaseChunLianAnim() {
  styleShell.removeRule(moveDownAnimName);
  styleShell.removeRule(clipResizeAnimName);
  inited = false;
}
export { initChunLianAnim, releaseChunLianAnim };
</script>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";

const props = defineProps({
  isLeft: {
    type: Boolean,
    default: false,
  },
  left: {
    type: Number,
    default: 0,
  },
  top: {
    type: Number,
    default: 0,
  },
  contentImage: {
    type: String,
    required: true,
  },
  scrollImage: {
    type: Array,
    required: true,
  },
  duration: {
    type: Number,
    default: 2000,
  },
  autoStart: {
    type: Boolean,
    default: true,
  },
  onAnimEnd: {
    type: Function,
  },
});

const flipScrollTransform = props.isLeft ? "scale3d(-1,1,1)" : null;
const moveDownAnim = ref(null);
const clipResizeAnim = ref(null);
const clipHeight = ref(0);
const scrollTop = ref(53);
function onMoveDownAnimDone() {
  scrollTop.value = 52 + 873;
}

function onClipResizeAnimDone() {
  clipHeight.value = 874;
  props.onAnimEnd?.();
}

const start = () => {
  moveDownAnim.value = `${moveDownAnimName} ${props.duration / 1000}s`;
  clipResizeAnim.value = `${clipResizeAnimName} ${props.duration / 1000}s`;
};

onMounted(() => {
  if (props.autoStart) {
    start();
  }
});

defineExpose({
  start,
});
</script>

<template>
  <div
    :style="{
      left: props.left,
      top: props.top,
    }"
  >
    <div
      id="clipview"
      :style="{
        width: 209,
        height: clipHeight,
        top: 53,
        left: (265 - 209) / 2,
        overflow: 'hidden',
        animation: clipResizeAnim,
      }"
      @animationend="onClipResizeAnimDone"
    >
      <div
        class="chun_lian_size"
        :style="{
          backgroundImage: props.contentImage,
        }"
      ></div>
    </div>

    <div
      class="juan_zhou_size"
      :style="{
        transform: flipScrollTransform,
        transformOrigin: 'center top',
      }"
    >
      <div
        class="juan_zhou_size"
        :style="{
          backgroundImage: `url(${props.scrollImage[0]})`,
        }"
      ></div>
      <div
        class="juan_zhou_size"
        :style="{
          top: scrollTop,
          backgroundImage: `url(${props.scrollImage[1]})`,
          animation: moveDownAnim,
        }"
        @animationend="onMoveDownAnimDone"
      ></div>
    </div>
  </div>
</template>
<style>
.chun_lian_size {
  width: 209;
  height: 874;
}
.juan_zhou_size {
  width: 265;
  height: 55;
}
@keyframes chun_lian_anim {
  from {
    height: 0;
  }
  to {
    height: 874;
  }
}

@keyframes juan_zhou_anim {
  from {
    top: 51;
  }
  to {
    top: 925;
  }
}
</style>
