<!--
 * @Author: ChenChanghua
 * @Date: 2023-02-06 10:19:42
 * @Description: file content
-->
<script setup>
import { ref } from "vue";
import { JsvPosterImage, JsvPosterDiv } from "jsview";

const props = defineProps({
  data: Object,
});
</script>

<template>
  <div
    :style="{
      width: data.width,
      height: data.height,
    }"
  >
    <div v-if="data.index % 2 == 0">
      <jsv-poster-image
        :style="{
          width: data.width,
          height: data.height,
        }"
        :src="data.url"
      >
        <div
          :style="{
            width: data.width,
            height: data.height,
            backgroundColor: '#ff0000',
          }"
        />
      </jsv-poster-image>
      <div
        :style="{
          width: 100,
          height: 30,
          backgroundColor: '#007788',
          fontSize: 20,
        }"
      >
        {{ "img_" + data.index }}
      </div>
    </div>
    <div v-else>
      <jsv-poster-div
        :style="{
          width: data.width,
          height: data.height,
          backgroundImage: `url(${data.url})`,
        }"
      >
        <div
          :style="{
            width: data.width,
            height: data.height,
            backgroundColor: '#ff0000',
          }"
        />
      </jsv-poster-div>
      <div
        :style="{
          width: 100,
          height: 30,
          backgroundColor: '#007788',
          fontSize: 20,
        }"
      >
        {{ "div_" + data.index }}
      </div>
    </div>
  </div>
</template>
