<template>
  <div v-show="triggerStatus" class="room-admission-container absolute">

    <template v-if="useQueueItem">
      <template v-if="useQueueItem.type === '1'" :key="useQueueItem._id">
        <div
            v-for="(item,index) in useQueueItem.data"
            :style="{
            'width': item.width +'px',
            'height': item.height+'px',
            'top': item.y+'px',
            'left': item.x+'px'
          }"
            :key="'admission-'+useQueueItem._id+'-'+index"
            class="room-admission-fixed center"
        >
          <svg-animate
              :style="{
            'width': item.width +'px',
            'height': item.height+'px'
          }"
              v-if="useQueueItem.draw"
              :playStatus="useQueueItem.play"
              size="45%"
              :src="(useQueueItem.item.show_gift_pc_img || useQueueItem.item.play_image)+'?id='+useQueueItem._id+'-'+index"
              :defaultSrc="useQueueItem.item.base_image"
              @stop="triggerQueueItem"
              :loops="1"
          ></svg-animate>
        </div>
      </template>
      <template v-else >
        <svg-animate
            class="room-admission-svg"
            :key="useQueueItem._id"
            :src="(useQueueItem.item.show_gift_pc_img || useQueueItem.item.play_image)+'?id='+useQueueItem._id"
            :loops="1"
            mode="AspectFit"
            @stop="triggerQueueItem"
        ></svg-animate>
      </template>
    </template>
  </div>
</template>

<script>
import {
  svgAnimate
} from '$components';
import mixins from '../mixins';
export default {
  name: "room-queue-gift",
  components: {svgAnimate},
  mixins
}
</script>

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