<template>
  <div
    :style="{
      width: 140,
      height: 160,
      backgroundColor: focused ? '#DD8888' : '#BBBBAA',
    }"
  >
    <div
      :style="{
        width: 140,
        height: 40,
        lineHeight: 40,
        fontSize: 24,
        top: 120,
        backgroundColor: '#FFFFFF',
        textAlign: 'center',
      }"
    >
      {{ props.data.title }}
    </div>
    <div :style="{top:3,left:3,width:40,height:40,backgroundColor:'#AA3123'}">
      <div :style="{top:1,left:1,width:10,height:10,backgroundColor:'#1135a1'}"></div>
      <div :style="{top:1,left:1+13,width:10,height:10,backgroundColor:'#aab6db'}"></div>
      <div :style="{top:1,left:1+13+13,width:10,height:10,backgroundColor:'#35194d'}"></div>
      <div :style="{top:1+13,left:1,width:10,height:10,backgroundColor:'#a2023a'}"></div>
      <div :style="{top:1+13,left:1+13,width:10,height:10,backgroundColor:'#e13470'}"></div>
      <div :style="{top:1+13,left:1+13+13,width:10,height:10,backgroundColor:'#d935e8'}"></div>
      <div :style="{top:1+13+13,left:1,width:10,height:10,backgroundColor:'#2f63dc'}"></div>
      <div :style="{top:1+13+13,left:1+13,width:10,height:10,backgroundColor:'#240ee2'}"></div>
      <div :style="{top:1+13+13,left:1+13+13,width:10,height:10,backgroundColor:'#2fdbb9'}"></div>
    </div>

    <div :style="{top:3,left:3+46,width:40,height:40,backgroundColor:'#b0c847'}">
      <div :style="{top:1,left:1,width:10,height:10,backgroundColor:'#1135a1'}"></div>
      <div :style="{top:1,left:1+13,width:10,height:10,backgroundColor:'#aab6db'}"></div>
      <div :style="{top:1,left:1+13+13,width:10,height:10,backgroundColor:'#35194d'}"></div>
      <div :style="{top:1+13,left:1,width:10,height:10,backgroundColor:'#a2023a'}"></div>
      <div :style="{top:1+13,left:1+13,width:10,height:10,backgroundColor:'#e13470'}"></div>
      <div :style="{top:1+13,left:1+13+13,width:10,height:10,backgroundColor:'#d935e8'}"></div>
      <div :style="{top:1+13+13,left:1,width:10,height:10,backgroundColor:'#2f63dc'}"></div>
      <div :style="{top:1+13+13,left:1+13,width:10,height:10,backgroundColor:'#240ee2'}"></div>
      <div :style="{top:1+13+13,left:1+13+13,width:10,height:10,backgroundColor:'#2fdbb9'}"></div>
    </div>

    <div :style="{top:3,left:3+46+46,width:40,height:40,backgroundColor:'#5cb720'}">
      <div :style="{top:1,left:1,width:10,height:10,backgroundColor:'#1135a1'}"></div>
      <div :style="{top:1,left:1+13,width:10,height:10,backgroundColor:'#aab6db'}"></div>
      <div :style="{top:1,left:1+13+13,width:10,height:10,backgroundColor:'#35194d'}"></div>
      <div :style="{top:1+13,left:1,width:10,height:10,backgroundColor:'#a2023a'}"></div>
      <div :style="{top:1+13,left:1+13,width:10,height:10,backgroundColor:'#e13470'}"></div>
      <div :style="{top:1+13,left:1+13+13,width:10,height:10,backgroundColor:'#d935e8'}"></div>
      <div :style="{top:1+13+13,left:1,width:10,height:10,backgroundColor:'#2f63dc'}"></div>
      <div :style="{top:1+13+13,left:1+13,width:10,height:10,backgroundColor:'#240ee2'}"></div>
      <div :style="{top:1+13+13,left:1+13+13,width:10,height:10,backgroundColor:'#2fdbb9'}"></div>
    </div>

    <div :style="{top:3+46,left:3,width:40,height:40,backgroundColor:'#1db39d'}">
      <div :style="{top:1,left:1,width:10,height:10,backgroundColor:'#1135a1'}"></div>
      <div :style="{top:1,left:1+13,width:10,height:10,backgroundColor:'#aab6db'}"></div>
      <div :style="{top:1,left:1+13+13,width:10,height:10,backgroundColor:'#35194d'}"></div>
      <div :style="{top:1+13,left:1,width:10,height:10,backgroundColor:'#a2023a'}"></div>
      <div :style="{top:1+13,left:1+13,width:10,height:10,backgroundColor:'#e13470'}"></div>
      <div :style="{top:1+13,left:1+13+13,width:10,height:10,backgroundColor:'#d935e8'}"></div>
      <div :style="{top:1+13+13,left:1,width:10,height:10,backgroundColor:'#2f63dc'}"></div>
      <div :style="{top:1+13+13,left:1+13,width:10,height:10,backgroundColor:'#240ee2'}"></div>
      <div :style="{top:1+13+13,left:1+13+13,width:10,height:10,backgroundColor:'#2fdbb9'}"></div>
    </div>

    <div :style="{top:3+46,left:3+46,width:40,height:40,backgroundColor:'#a75b17'}">
      <div :style="{top:1,left:1,width:10,height:10,backgroundColor:'#1135a1'}"></div>
      <div :style="{top:1,left:1+13,width:10,height:10,backgroundColor:'#aab6db'}"></div>
      <div :style="{top:1,left:1+13+13,width:10,height:10,backgroundColor:'#35194d'}"></div>
      <div :style="{top:1+13,left:1,width:10,height:10,backgroundColor:'#a2023a'}"></div>
      <div :style="{top:1+13,left:1+13,width:10,height:10,backgroundColor:'#e13470'}"></div>
      <div :style="{top:1+13,left:1+13+13,width:10,height:10,backgroundColor:'#d935e8'}"></div>
      <div :style="{top:1+13+13,left:1,width:10,height:10,backgroundColor:'#2f63dc'}"></div>
      <div :style="{top:1+13+13,left:1+13,width:10,height:10,backgroundColor:'#240ee2'}"></div>
      <div :style="{top:1+13+13,left:1+13+13,width:10,height:10,backgroundColor:'#2fdbb9'}"></div>
    </div>

    <div :style="{top:3+46,left:3+46+46,width:40,height:40,backgroundColor:'#135ac3'}">
      <div :style="{top:1,left:1,width:10,height:10,backgroundColor:'#1135a1'}"></div>
      <div :style="{top:1,left:1+13,width:10,height:10,backgroundColor:'#aab6db'}"></div>
      <div :style="{top:1,left:1+13+13,width:10,height:10,backgroundColor:'#35194d'}"></div>
      <div :style="{top:1+13,left:1,width:10,height:10,backgroundColor:'#a2023a'}"></div>
      <div :style="{top:1+13,left:1+13,width:10,height:10,backgroundColor:'#e13470'}"></div>
      <div :style="{top:1+13,left:1+13+13,width:10,height:10,backgroundColor:'#d935e8'}"></div>
      <div :style="{top:1+13+13,left:1,width:10,height:10,backgroundColor:'#2f63dc'}"></div>
      <div :style="{top:1+13+13,left:1+13,width:10,height:10,backgroundColor:'#240ee2'}"></div>
      <div :style="{top:1+13+13,left:1+13+13,width:10,height:10,backgroundColor:'#2fdbb9'}"></div>
    </div>

    <div :style="{top:3+46+46,left:3,width:40,height:40,backgroundColor:'#af19d9'}">
      <div :style="{top:1,left:1,width:10,height:10,backgroundColor:'#1135a1'}"></div>
      <div :style="{top:1,left:1+13,width:10,height:10,backgroundColor:'#aab6db'}"></div>
      <div :style="{top:1,left:1+13+13,width:10,height:10,backgroundColor:'#35194d'}"></div>
      <div :style="{top:1+13,left:1,width:10,height:10,backgroundColor:'#a2023a'}"></div>
      <div :style="{top:1+13,left:1+13,width:10,height:10,backgroundColor:'#e13470'}"></div>
      <div :style="{top:1+13,left:1+13+13,width:10,height:10,backgroundColor:'#d935e8'}"></div>
      <div :style="{top:1+13+13,left:1,width:10,height:10,backgroundColor:'#2f63dc'}"></div>
      <div :style="{top:1+13+13,left:1+13,width:10,height:10,backgroundColor:'#240ee2'}"></div>
      <div :style="{top:1+13+13,left:1+13+13,width:10,height:10,backgroundColor:'#2fdbb9'}"></div>
    </div>

    <div :style="{top:3+46+46,left:3+46,width:40,height:40,backgroundColor:'#da308b'}">
      <div :style="{top:1,left:1,width:10,height:10,backgroundColor:'#1135a1'}"></div>
      <div :style="{top:1,left:1+13,width:10,height:10,backgroundColor:'#aab6db'}"></div>
      <div :style="{top:1,left:1+13+13,width:10,height:10,backgroundColor:'#35194d'}"></div>
      <div :style="{top:1+13,left:1,width:10,height:10,backgroundColor:'#a2023a'}"></div>
      <div :style="{top:1+13,left:1+13,width:10,height:10,backgroundColor:'#e13470'}"></div>
      <div :style="{top:1+13,left:1+13+13,width:10,height:10,backgroundColor:'#d935e8'}"></div>
      <div :style="{top:1+13+13,left:1,width:10,height:10,backgroundColor:'#2f63dc'}"></div>
      <div :style="{top:1+13+13,left:1+13,width:10,height:10,backgroundColor:'#240ee2'}"></div>
      <div :style="{top:1+13+13,left:1+13+13,width:10,height:10,backgroundColor:'#2fdbb9'}"></div>
    </div>

    <div :style="{top:3+46+46,left:3+46+46,width:40,height:40,backgroundColor:'#da2b2b'}">
      <div :style="{top:1,left:1,width:10,height:10,backgroundColor:'#1135a1'}"></div>
      <div :style="{top:1,left:1+13,width:10,height:10,backgroundColor:'#aab6db'}"></div>
      <div :style="{top:1,left:1+13+13,width:10,height:10,backgroundColor:'#35194d'}"></div>
      <div :style="{top:1+13,left:1,width:10,height:10,backgroundColor:'#a2023a'}"></div>
      <div :style="{top:1+13,left:1+13,width:10,height:10,backgroundColor:'#e13470'}"></div>
      <div :style="{top:1+13,left:1+13+13,width:10,height:10,backgroundColor:'#d935e8'}"></div>
      <div :style="{top:1+13+13,left:1,width:10,height:10,backgroundColor:'#2f63dc'}"></div>
      <div :style="{top:1+13+13,left:1+13,width:10,height:10,backgroundColor:'#240ee2'}"></div>
      <div :style="{top:1+13+13,left:1+13+13,width:10,height:10,backgroundColor:'#2fdbb9'}"></div>
    </div>

  </div>
</template>

<script setup>
import { shallowRef, onMounted } from "vue";
import { useFocusHub } from "jsview";
const focusHub = useFocusHub();
const props = defineProps({
  data: Object,
  query: Object,
  onEdge: Function,
  onAction: Object,
  getStyleClass: Function,
  num: Number,
});

let focused = shallowRef(false);
const onFocus = () => {
  focused.value = "grow";
};

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


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

onMounted(() => {
  focusHub.setFocus("StyleShow");
});
</script>

<style lang="scss" scoped></style>
