<script setup>
import { reactive, onMounted, onBeforeUnmount } from "vue";
import ContentBlock from "../ContentBlock.vue";
import AnimKeyframeBasic from "./AnimKeyframeBasic.vue";
import AnimKeyframeComposite from "./AnimKeyframeComposite.vue";
import AnimTransition from "./AnimTransition.vue";

const props = defineProps({
  contentClass: String,
  itemSides: Object,
});

const contentBlockProps = {
  colIndex: 0,
  itemSides: props.itemSides,
};
let timerId = -1;
const state = reactive({
  timeCount: 20,
});

onMounted(() => {
  timerId = setInterval(() => {
    state.timeCount = state.timeCount + 5;
  }, 2000);
});

onBeforeUnmount(() => {
  if (timerId >= 0) {
    clearInterval(timerId);
  }
  timerId = -1;
});
</script>

<template>
  <div id="item-root">
    <ContentBlock
      :class="contentClass"
      :style="{ top: itemSides.height * 0 }"
      :="contentBlockProps"
      :index="1"
      title="Keyframe基础动画集合"
    >
      <AnimKeyframeBasic />
    </ContentBlock>
    <ContentBlock
      :class="contentClass"
      :style="{ top: itemSides.height * 1 }"
      :="contentBlockProps"
      :index="2"
      title="Keyframe组合示例"
    >
      <AnimKeyframeComposite />
    </ContentBlock>
    <ContentBlock
      :class="contentClass"
      :style="{ top: itemSides.height * 2 }"
      :="{ ...contentBlockProps, itemSides: { ...itemSides, height: 290 } }"
      :index="3"
      title="Transition动画示例"
    >
      <AnimTransition :timeCount="state.timeCount" />
    </ContentBlock>
  </div>
</template>