<script setup>
import { JsvEnableRenderBreak } from "jsview";
import data from "./data.js";
import Item from "./Item.vue";
import { ref, computed } from "vue";

// const renderData = shallowRef(data.slice(0, 16));
const currentHeadIndex = ref(0);
const visibleStart = computed(() => {
  return Math.floor(currentHeadIndex.value / 4) * 210;
});
const renderData = computed(() => {
  return data.slice(currentHeadIndex.value, currentHeadIndex.value + 16);
});

const maxHeadIndex = data.length - (data.length % 4);
const onKeyDown = (ev) => {
  console.log("key", ev.keyCode);
  switch (ev.keyCode) {
    case 38:
      currentHeadIndex.value = Math.max(0, currentHeadIndex.value - 4);
      break;
    case 40:
      currentHeadIndex.value = Math.min(
        maxHeadIndex,
        currentHeadIndex.value + 4
      );
      break;
  }
};
</script>

<template>
  <jsv-focus-block
    autoFocus
    :onAction="{
      onKeyDown,
    }"
    :style="{
      width: 1920,
      height: 1080,
      backgroundColor: '#AAAAAA',
    }"
  ></jsv-focus-block>
  <div
    v-for="item in renderData"
    :key="'item' + item.index"
    :style="{
      left: item.left,
      top: item.top - visibleStart,
    }"
  >
    <jsv-enable-render-break>
      <template #renderItem>
        <item :data="item"></item>
      </template>

      <template #placeHolder>
        <div
          :style="{
            width: item.width,
            height: item.height,
            backgroundColor: 'rgba(0,0,0,0.5)',
          }"
        ></div>
      </template>
    </jsv-enable-render-break>
  </div>
</template>
