<!--
 * @Author: ChenChanghua
 * @Date: 2023-03-08 14:52:17
 * @Description: file content
-->
<script setup>
import {
  ref,
  shallowRef,
  inject,
  onUpdated,
  onMounted,
  onBeforeUnmount,
} from "vue";
import { JsvVisibleSensor, useFocusHub, METRO_WIDGET_CONST } from "jsview";

const props = defineProps({
  data: Object,
  onAction: Object,
  query: Object,
  dataLength: Number,
  widgetLayout: Object,
  widgetPadding: Object,
});

const focusHub = useFocusHub();

const focused = ref(false);

const width = ref(props.data.width);
const duration = 200;

let timeoutHandler = -1;

const animInfo = {
  anchor: props.query.index == 28 ? undefined : 0,
  duration: duration,
  onEnd: () => {
    console.log("resize end", props.query.index);
  },
};

const onFocus = () => {
  focused.value = true;
  if (width.value == props.data.width) {
    timeoutHandler = setTimeout(() => {
      width.value = props.data.width + 200;
      props.query.updateItemSize(
        props.query.index,
        {
          width: width.value,
          height: props.data.height,
        },
        animInfo
      );
    }, 1000); /* 延迟1秒变化 */
  }
};

const onBlur = () => {
  focused.value = false;
  if (width.value != props.data.width) {
    width.value = props.data.width;
    props.query.updateItemSize(
      props.query.index,
      {
        width: width.value,
        height: props.data.height,
      },
      animInfo
    );
  }

  clearTimeout(timeoutHandler);
  timeoutHandler = -1;
};

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

props.onAction.register("onFocus", onFocus);
props.onAction.register("onBlur", onBlur);
props.onAction.register("onClick", onClick);

onBeforeUnmount(() => {
  clearTimeout(timeoutHandler);
  timeoutHandler = -1;
});
</script>

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