<script setup>
import { MetroWidget, HORIZONTAL, useFocusHub } from "jsview";
import { ref, onMounted } from "vue";
import PageItem from "./PageItem.vue";

const props = defineProps({
  pageData: Object,
  name: String,
  onEdge: Function,
});

console.log("content page on edge", props.pageData);

const provideData = () => {
  return props.pageData.list;
};

const measures = (data) => {
  return {
    width: data.width,
    height: data.height,
    marginRight: 20,
  };
};

const widgetLayout = {
  left: 0,
  top: 80,
  width: 1280,
  height: 400,
};

onMounted(() => {});
</script>

<template>
  <div
    :style="{
      fontSize: 40,
      width: 1280,
      height: 80,
      color: '#FFFFFF',
    }"
  >
    {{ pageData.title }}
  </div>

  <metro-widget
    :name="name"
    :left="widgetLayout.left"
    :top="widgetLayout.top"
    :width="widgetLayout.width"
    :height="widgetLayout.height"
    :provideData="provideData"
    :direction="HORIZONTAL"
    :measures="measures"
    :onEdge="onEdge"
    :padding="{ left: 40, right: 40, top: 50, bottom: 50 }"
  >
    <template #renderItem="{ data, onAction }">
      <page-item :data="data" :onAction="onAction" />
    </template>
  </metro-widget>
</template>

<style scoped></style>
