<template>
  <div :class="['poster', posterChange]">
    <div class="titleShow">{{ props.data.title }}</div>
    <div class="item item1">
      <div class="littleItem littleItem1"></div>
      <div class="littleItem littleItem2"></div>
      <div class="littleItem littleItem3"></div>
      <div class="littleItem littleItem4"></div>
      <div class="littleItem littleItem5"></div>
      <div class="littleItem littleItem6"></div>
      <div class="littleItem littleItem7"></div>
      <div class="littleItem littleItem8"></div>
      <div class="littleItem littleItem9"></div>
    </div>
    <div class="item item2">
      <div class="littleItem littleItem1"></div>
      <div class="littleItem littleItem2"></div>
      <div class="littleItem littleItem3"></div>
      <div class="littleItem littleItem4"></div>
      <div class="littleItem littleItem5"></div>
      <div class="littleItem littleItem6"></div>
      <div class="littleItem littleItem7"></div>
      <div class="littleItem littleItem8"></div>
      <div class="littleItem littleItem9"></div>
    </div>
    <div class="item item3">
      <div class="littleItem littleItem1"></div>
      <div class="littleItem littleItem2"></div>
      <div class="littleItem littleItem3"></div>
      <div class="littleItem littleItem4"></div>
      <div class="littleItem littleItem5"></div>
      <div class="littleItem littleItem6"></div>
      <div class="littleItem littleItem7"></div>
      <div class="littleItem littleItem8"></div>
      <div class="littleItem littleItem9"></div>
    </div>
    <div class="item item4">
      <div class="littleItem littleItem1"></div>
      <div class="littleItem littleItem2"></div>
      <div class="littleItem littleItem3"></div>
      <div class="littleItem littleItem4"></div>
      <div class="littleItem littleItem5"></div>
      <div class="littleItem littleItem6"></div>
      <div class="littleItem littleItem7"></div>
      <div class="littleItem littleItem8"></div>
      <div class="littleItem littleItem9"></div>
    </div>
    <div class="item item5">
      <div class="littleItem littleItem1"></div>
      <div class="littleItem littleItem2"></div>
      <div class="littleItem littleItem3"></div>
      <div class="littleItem littleItem4"></div>
      <div class="littleItem littleItem5"></div>
      <div class="littleItem littleItem6"></div>
      <div class="littleItem littleItem7"></div>
      <div class="littleItem littleItem8"></div>
      <div class="littleItem littleItem9"></div>
    </div>
    <div class="item item6">
      <div class="littleItem littleItem1"></div>
      <div class="littleItem littleItem2"></div>
      <div class="littleItem littleItem3"></div>
      <div class="littleItem littleItem4"></div>
      <div class="littleItem littleItem5"></div>
      <div class="littleItem littleItem6"></div>
      <div class="littleItem littleItem7"></div>
      <div class="littleItem littleItem8"></div>
      <div class="littleItem littleItem9"></div>
    </div>
    <div class="item item7">
      <div class="littleItem littleItem1"></div>
      <div class="littleItem littleItem2"></div>
      <div class="littleItem littleItem3"></div>
      <div class="littleItem littleItem4"></div>
      <div class="littleItem littleItem5"></div>
      <div class="littleItem littleItem6"></div>
      <div class="littleItem littleItem7"></div>
      <div class="littleItem littleItem8"></div>
      <div class="littleItem littleItem9"></div>
    </div>
    <div class="item item8">
      <div class="littleItem littleItem1"></div>
      <div class="littleItem littleItem2"></div>
      <div class="littleItem littleItem3"></div>
      <div class="littleItem littleItem4"></div>
      <div class="littleItem littleItem5"></div>
      <div class="littleItem littleItem6"></div>
      <div class="littleItem littleItem7"></div>
      <div class="littleItem littleItem8"></div>
      <div class="littleItem littleItem9"></div>
    </div>
    <div class="item item9">
      <div class="littleItem littleItem1"></div>
      <div class="littleItem littleItem2"></div>
      <div class="littleItem littleItem3"></div>
      <div class="littleItem littleItem4"></div>
      <div class="littleItem littleItem5"></div>
      <div class="littleItem littleItem6"></div>
      <div class="littleItem littleItem7"></div>
      <div class="littleItem littleItem8"></div>
      <div class="littleItem littleItem9"></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 posterChange = shallowRef("blurPoster");
const onFocus = () => {
  posterChange.value = "focusPoster";
};

const onBlur = () => {
  posterChange.value = "blurPoster";
};

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

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

<style lang="scss" scoped>
.poster {
  width: 140;
  height: 160;
  background-color: #bbbbaa;
}
.titleShow {
  width: 140;
  height: 40;
  line-height: 40;
  font-size: 24;
  top: 120;
  background-color: #ffffff;
  text-align: center;
}
.focusPoster {
  background-color: #dd8888;
}
.blurPoster {
  background-color: #bbbbaa;
}
.item {
  width: 40;
  height: 40;
}
.item1 {
  top: 3;
  left: 3;
  background-color: #aa3123;
}
.item2 {
  top: 3;
  left: 3+46;
  background-color: #b0c847;
}
.item3 {
  top: 3;
  left: 3+46+46;
  background-color: #5cb720;
}
.item4 {
  top: 3+46;
  left: 3;
  background-color: #1db39d;
}
.item5 {
  top: 3+46;
  left: 3+46;
  background-color: #a75b17;
}
.item6 {
  top: 3+46;
  left: 3+46+46;
  background-color: #135ac3;
}
.item7 {
  top: 3+46+46;
  left: 3;
  background-color: #af19d9;
}
.item8 {
  top: 3+46+46;
  left: 3+46;
  background-color: #da308b;
}
.item9 {
  top: 3+46+46;
  left: 3+46+46;
  background-color: #da2b2b;
}
.littleItem {
  width: 10;
  height: 10;
}
.littleItem1 {
  top: 1;
  left: 1;
  background-color: #1135a1;
}
.littleItem2 {
  top: 1;
  left: 1+13;
  background-color: #aab6db;
}
.littleItem3 {
  top: 1;
  left: 1+13+13;
  background-color: #35194d;
}
.littleItem4 {
  top: 1+13;
  left: 1;
  background-color: #a2023a;
}
.littleItem5 {
  top: 1+13;
  left: 1+13;
  background-color: #e13470;
}
.littleItem6 {
  top: 1+13;
  left: 1+13+13;
  background-color: #d935e8;
}
.littleItem7 {
  top: 1+13+13;
  left: 1;
  background-color: #2f63dc;
}
.littleItem8 {
  top: 1+13+13;
  left: 1+13;
  background-color: #240ee2;
}
.littleItem9 {
  top: 1+13+13;
  left: 1+13+13;
  background-color: #2fdbb9;
}
</style>
