<!--
 * @Author: ChenChanghua
 * @Date: 2023-03-08 14:52:17
 * @Description: file content
-->
<script setup>
import { ref, watch, inject, watchSyncEffect } from "vue";

const props = defineProps({
  data: Object,
  onAction: Object,
  query: Object,
  currentLargeItem: Object,
});

const focused = ref(false);
const largeItemIndex = inject("largeItemIndex");

const width = ref(props.data.width);
const duration = 200;
const transitionStr = `left ${duration / 1000}s, top ${
  duration / 1000
}s, width ${duration / 1000}s, height ${duration / 1000}s`;
const transition = ref(transitionStr);
const animInfo = {
  anchor: 0.5,
  duration: duration,
  onEnd: () => {
    console.log("resize end", props.query.index);
  },
};

let isLarge = props.query.index == 0;
watch(
  () => largeItemIndex.value,
  (newV) => {
    console.log("testtest watch", newV)
    if (newV == props.query.index) {
      if (!isLarge) {
        isLarge = true;
        width.value = 310;
        props.query.updateItemSize(
          props.query.index,
          {
            width: width.value,
            height: props.data.height,
          },
          animInfo
        );
      }
    } else {
      if (isLarge) {
        isLarge = false;
        width.value = 110;
        props.query.updateItemSize(
          props.query.index,
          {
            width: width.value,
            height: props.data.height,
          },
          animInfo
        );
      }
    }
  }
);

let timeoutHandler = -1;
const onFocus = () => {
  focused.value = true;
  timeoutHandler = setTimeout(() => {
    largeItemIndex.value = props.query.index;
  }, 1000);
};

const onBlur = () => {
  focused.value = false;
  clearTimeout(timeoutHandler);
  timeoutHandler = -1;
};

const onClick = () => {
  console.log("onClick");
};

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

<template>
  <div
    :style="{
      width: width,
      height: data.height,
      fontSize: 30,
      color: focused ? '#FF0000' : '#FFFFFF',
      backgroundColor: data.color,
      transition: transition,
      borderRadius: 10,
    }"
  >
    {{ data.content }}
  </div>
</template>
