<template>
  <div :style="{ backgroundColor: '#87CEEB', width: 1280, height: 720 }">
    <div :style="{ top: 10 }">
      <metro-widget
        name="StyleShow"
        ref="styleRef"
        :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 }">
          <StyleItem
            :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 StyleItem from "./StyleItem.vue";
const props = defineProps({
  style: Object,
  data: Array,
});
let styleRef = 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();
    styleRef.value?.refreshData(true);
  }
});
const measures = (item) => {
  return {
    ...item,
    focusable: true,
    marginRight: 20,
    marginBottom: 20,
  };
};
const onEdge = () => {
  console.log("到边缘了");
};
</script>

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