<template>
  <JsvApic2 ref="apicRef" :src="`url(${src})`" :style="layout" />
</template>

<script setup>
import { JsvApic2, LoopType, ApicEndState } from "jsview";
import { shallowRef, onMounted } from "vue";
const props = defineProps({
  src: {
    type: String,
    required: true,
  },
  repeat: {
    type: [String, Number],
    default: 0,
  },
  layout: {
    type: Object,
  },
});

const apicRef = shallowRef();
onMounted(() => {
  let loopType = LoopType.LOOP_DEFAULT;
  let loopInfo = undefined;
  if (typeof props.repeat == "number") {
    if (props.repeat >= 0) {
      loopType = LoopType.LOOP_FINITE;
      loopInfo = props.repeat;
    } else {
      loopType = LoopType.LOOP_INFINITE;
    }
  } else if (typeof props.repeat == "string") {
    switch (props.repeat) {
      case "default":
        loopType = LoopType.LOOP_DEFAULT;
        break;
      case "infinite":
        loopType = LoopType.LOOP_INFINITE;
        break;
    }
  } else {
    throw new Error("AnimPic props.repeat must be number or string.");
  }
  apicRef.value.play(loopType, loopInfo, ApicEndState.LAST_FRAME);
});
</script>
