<script setup>
import { MetroWidget, VERTICAL } from "jsview";
import Item from "./Item.vue";

const measures = (item) => {
  return {
    width: item.width,
    height: item.height,
    focusable: item.focusable,
    enableTap: true,
  };
};

const props = defineProps({
  name: String,
  itemFocus: Function,
  itemClick: Function,
  onEdge: Function,
  initId: Number,
});

const width = 1280;
const height = 100;
const data = [
  {
    width: 200,
    height: 50,
    name: "功能实例",
    focusable: true,
    id: 0,
  },
  {
    width: 200,
    height: 50,
    name: "MetroWidget",
    focusable: true,
    id: 1,
  },
  {
    width: 200,
    height: 50,
    name: "首页/运营",
    focusable: true,
    id: 2,
  },
  {
    width: 200,
    height: 50,
    name: "触控",
    focusable: true,
    id: 3,
  },
  {
    width: 200,
    height: 50,
    name: "游戏实例",
    focusable: true,
    id: 4,
  },
  {
    width: 200,
    height: 50,
    name: "运营组件",
    focusable: true,
    id: 5,
  },
];
const direction = VERTICAL;
</script>

<template>
  <metro-widget
    :name="props.name"
    :width="width"
    :height="height"
    :direction="direction"
    :data="data"
    :measures="measures"
    :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
    :onEdge="props.onEdge"
    :initFocusId="props.initId"
  >
    <template #renderItem="{ data, query, onEdge, onAction }">
      <Item
        :style="{
          width: data.width,
          height: data.height,
          backgroundColor: '#00AA00',
          color: '#FFFFFF',
        }"
        :data="data"
        :query="query"
        :onEdge="onEdge"
        :onAction="onAction"
        :itemFocus="props.itemFocus"
        :itemClick="props.itemClick"
      >
        {{ data.name }}
      </Item>
    </template>
  </metro-widget>
</template>
