<!--
 * @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,
  query: Object,
  onEdge: Function,
  onAction: Object,
});

let focused = ref(false);

const onFocus = () => {
  focused.value = true;
};

const onBlur = () => {
  focused.value = false;
};

const onClicked = () => {
  console.log(`item ${props.query.id} clicked`);
};

props.onAction.register("onFocus", onFocus);
props.onAction.register("onBlur", onBlur);
props.onAction.register("onClick", onClicked);
</script>

<template>
  <div
    :style="{
      width: data.width,
      height: data.height,
      transition: 'transform 0.25s linear',
      transform: focused ? 'scale3d(1.1, 1.1, 1)' : '',
    }"
  >
    <div
      v-if="focused"
      :style="{
        left: -10,
        top: -10,
        width: props.data.width + 20,
        height: props.data.height + 20,
        backgroundColor: '#770088',
        borderRadius: 10,
      }"
    >
    </div>
    <div v-if="query.index % 2 == 0">
      <jsv-poster-image
        :style="{
          width: data.width,
          height: data.height,
          borderRadius: 10,
        }"
        :src="data.url"
      >
        <div
          :style="{
            width: data.width,
            height: data.height,
            backgroundColor: '#ff0000',
            borderRadius: 10,
          }"
        />
      </jsv-poster-image>
      <div
        :style="{
          width: 40,
          height: 30,
          backgroundColor: '#007788',
          fontSize: 20,
        }"
      >
        {{ "img" }}
      </div>
    </div>
    <div v-else>
      <jsv-poster-div
        :style="{
          width: data.width,
          height: data.height,
          backgroundImage: `url(${data.url})`,
          borderRadius: 10,
        }"
      >
        <div
          :style="{
            width: data.width,
            height: data.height,
            backgroundColor: '#ff0000',
            borderRadius: 10,
          }"
        />
      </jsv-poster-div>
      <div
        :style="{
          width: 40,
          height: 30,
          backgroundColor: '#007788',
          fontSize: 20,
        }"
      >
        {{ "div" }}
      </div>
    </div>
  </div>
</template>