<!--
 * @Author: ChenChanghua
 * @Date: 2022-05-10 15:21:24
 * @LastEditors: ZhengYi
 * @LastEditTime: 2023-05-04
 * @Description: file content
-->
<script setup>
import { ref } from "vue";

const props = defineProps({
  userData: Object,
  widgetData: Object,
  onAction: Object,
});

const focused = ref(false);
const divNumber = new Array(50);
const onFocus = () => {
  focused.value = true;
};
const onBlur = () => {
  focused.value = false;
};
const onClick = () => {
  console.log("item onclick ", props.userData);
};

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

</script>

<template>
  <div
    v-for="(item, index) in divNumber"
    :key="index"
    :style="{
      left: 2 * index,
      width: 2,
      height: 50,
      backgroundColor: '#007788',
    }"
  ></div>
  <div
    :style="{
      width: 100,
      height: 50,
      fontSize: 30,
      color: '#FFFFFF',
      whiteSpace: 'nowrap'
    }"
  >
    {{ userData.content }}
  </div>
  <div
    :style="{
      visibility: focused ? 'visible' : 'hidden',
      width: 20,
      height: 20,
      backgroundColor: '#FF0000',
    }"
  ></div>
  <div
    :style="{
      visibility: !focused && widgetData.selected ? 'visible' : 'hidden',
      left: 50,
      width: 20,
      height: 20,
      backgroundColor: '#00FF00',
    }"
  ></div>
</template>