<template>
  <div class="bg">
    <div class="bg-adjust">
      <metro-widget
        name="ClassShow"
        ref="classRef"
        :width="props.style.width"
        :height="props.style.height"
        :provideData="provideData"
        :direction="HORIZONTAL"
        :measures="measures"
        :onEdge="onEdge"
        :padding="props.style.padding"
        :sendFocusRectEvent="true"
      >
        <template #renderItem="{ data, query, onEdge, onAction }">
          <ClassItem
            :data="data"
            :query="query"
            :onEdge="onEdge"
            :onAction="onAction"
          />
        </template>
      </metro-widget>
    </div>
  </div>
</template>

<script setup>
import { inject, shallowRef, watch } from "vue";
import { MetroWidget, HORIZONTAL } from "jsview";
import ClassItem from "./ClassItem.vue";
const props = defineProps({
  style: Object,
  data: Array,
});
let classRef = shallowRef(null);
let change = inject("change");

const provideData = () => {
  if (change.value) {
    const data = props.data.slice(33, 65);
    return data;
  } else {
    const data = props.data.slice(0, 32);
    return data;
  }
};
watch(change, (n, o) => {
  if (n !== o) {
    provideData();
    classRef.value?.refreshData(true);
  }
});
const measures = (item) => {
  return {
    ...item,
    focusable: true,
    marginRight: 20,
    marginBottom: 20,
  };
};
const onEdge = () => {
  console.log("到边缘了");
};

</script>

<style lang="scss" scoped>
.bg {
  width: 1280;
  height: 720;
  background-color: #006400;
  .bg-adjust{
    top:10
  }
}
</style>
