<script setup>
import { shallowRef, watch } from "vue";
const props = defineProps({
  data: Object,
  query: Object,
  onEdge: Function,
  onAction: Object,
});
const focus = shallowRef(false);

const onFocus = () => {
  focus.value = true;
};
const onBlur = () => {
  focus.value = false;
};
props.onAction.register("onFocus", onFocus);
props.onAction.register("onBlur", onBlur);
props.onAction.register("onClick", () => {
  console.log("cchtest item on click ", data);
});

const imgUrl = shallowRef(props.data.url);

watch(focus, () => {
  imgUrl.value = focus.value ? props.data.focusUrl : props.data.url;
});
</script>

<template>
  <div>
    <!-- 测试div的backgroundImage响应式处理 -->
    <!-- <div
      :style="{
        width: 166,
        height: 90,
        backgroundImage: imgUrl,
      }"
    ></div> -->
    <!-- 测试img的src响应式处理 -->
    <img
      :src="imgUrl"
      :style="{
        width: 240,
        height: 90,
      }"
    />
  </div>
</template>
