<!--
 * @Author: ChenChanghua
 * @Date: 2022-07-11 13:31:36
 * @Description: file content
-->
<script setup>
import { MetroWidget, HORIZONTAL, useFocusHub } from "jsview";
import { onMounted } from "vue";
import ButtonItem from "./ButtonItem.vue";

const focusHub = useFocusHub();
window.focusHub = focusHub
const provideData = () => {
  const data = [];
  for (let i = 0; i < 20; i++) {
    data.push({
      width: 200,
      height: 100,
      name: "button_" + i,
      marginRight: 10,
      marginBottom: 10,
    });
  }
  return data;
};
const measures = (item) => {
  return {
    width: item.width,
    height: item.height,
    marginRight: item.marginRight,
    marginBottom: item.marginBottom,
  };
};

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

<template>
  <div
    :style="{
      left: 50,
      top: 20,
      width: 600,
      height: 400,
      fontSize: 30,
      color: '#FFFFFF',
    }"
  >
    {{ "item组件包含JsvFocusBlock, 从而每个item可以在自己内部处理按键事件" }}
  </div>
  <metro-widget
    name="mwButton"
    :top="120"
    :left="50"
    :provideData="provideData"
    :width="600"
    :height="400"
    :direction="HORIZONTAL"
    :measures="measures"
  >
    <template #renderItem="{ data, onAction }">
      <button-item :data="data" :onAction="onAction" />
    </template>
  </metro-widget>
</template>