<template>
  <div
    :style="{
      width: 1280,
      height: 720,
      backgroundColor: '#007788',
    }"
  ></div>
  <EpisodeList
    :name="name"
    :listLayout="listLayout"
    :groupLayout="groupLayout"
    :numPerPage="numPerPage"
    :listMeasures="listMeasures"
    :groupMeasures="groupMeasures"
    :totalNumber="totalNumber"
    :listPadding="listPadding"
  >
    <template #listItem="{ data, onAction, query }">
      <list-item :data="data" :onAction="onAction" :query="query" />
    </template>
    <template #groupItem="{ data, onAction, query }">
      <group-item :data="data" :onAction="onAction" :query="query" />
    </template>
  </EpisodeList>
</template>

<script setup>
import EpisodeList from "./EpisodeList/EpisodeList.vue";
import ListItem from "./ListItem.vue";
import GroupItem from "./GroupItem.vue";
import { onMounted } from "vue";
import { useFocusHub } from "jsview";

const focusHub = useFocusHub();
const name = "episodeList";
const listLayout = {
  left: 80,
  top: 100,
  width: 940,
  height: 120,
};
const groupLayout = {
  left: 100,
  top: 220,
  width: 900,
  height: 50,
};
const numPerPage = 10;
function listMeasures(index) {
  return {
    width: 80,
    height: 80,
    marginRight: 10,
    data: {
      content: index,
      width: 80,
      height: 80,
      backgroundColor: "#ffffffaa",
    },
  };
}
function groupMeasures(index) {
  return {
    width: 150,
    height: 50,
    marginRight: 10,
  };
}
const totalNumber = 400;
const listPadding = {
  left: 20,
  right: 20,
  top: 20,
  bottom: 20,
};
onMounted(() => {
  focusHub.setFocus(name);
});
</script>
