<script setup>
import { HORIZONTAL, MetroWidget, EdgeDirection, useFocusHub } from "jsview";
import ButtonItem from "./ButtonItem.vue";

const focusHub = useFocusHub();
const data = [
  {
    width: 100,
    height: 50,
    marginRight: 100,
    content: "同意",
  },
  {
    width: 100,
    height: 50,
    content: "取消",
  },
];

const measures = (item) => {
  return item;
};

const onEdge = (edgeInfo) => {
  if (edgeInfo.direction == EdgeDirection.top) {
    focusHub.setFocus("longTextScroll");
  }
};
</script>

<template>
  <metro-widget
    name="button"
    :width="500"
    :height="50"
    :data="data"
    :direction="HORIZONTAL"
    :measures="measures"
    :onEdge="onEdge"
  >
    <template #renderItem="{ data, query, onEdge, onAction }">
      <button-item
        :data="data"
        :query="query"
        :onEdge="onEdge"
        :onAction="onAction"
      />
    </template>
  </metro-widget>
</template>
