<template>
  <div
    :style="{
      width: 1280,
      height: 720,
      backgroundColor: '#007788',
    }"
  ></div>
  <tab-content
    :name="name"
    :data="testData"
    :tabLayout="{ width: 1200, height: 90 }"
    :tabPadding="{ left: 20, right: 20, top: 20, height: 20 }"
    :contentLayout="{ left: 20, top: 100, width: 1280, height: 500 }"
    :tagItemGap="10"
    :contentDataLoader="pageDataLoader"
    :initFocusId="2"
    :contentOnFocus="contentOnFocus"
    :contentOnBlur="contentOnBlur"
    creepFocusColor="#e26c44"
  >
    <template #tabItem="{ data, onAction, query }">
      <item :data="data" :onAction="onAction" :query="query"></item>
    </template>
    <template #content="{ data, onEdge }">
      <content-page
        name="contentPage"
        :pageData="data"
        :onEdge="onEdge"
      ></content-page>
    </template>
  </tab-content>
</template>

<script setup>
import TabContent from "./TabContent/TabContent.vue";
import { onMounted } from "vue";
import { useFocusHub } from "jsview";
/** 注意, tab数据中有子tab的, 子tab的数据必须在childTab字段下, 类似这里的testData */
import { testData } from "./testData.js";
import Item from "./Item.vue";
import ContentPage from "./ContentPage.vue";

const focusHub = useFocusHub();
const name = "tab-content";

const ironmanSmall =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/ironman_small.png";
const spidermanSmall =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/spiderman_small.png";
const captainSmall =
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/PosterOverflow/App/captain_small.png";

async function pageDataLoader(tabId) {
  return {
    title: "page " + tabId,
    list: [
      {
        width: 370,
        height: 300,
        img: ironmanSmall,
      },
      {
        width: 370,
        height: 300,
        img: spidermanSmall,
      },
      {
        width: 370,
        height: 300,
        img: captainSmall,
      },
    ],
  };
}

function contentOnFocus() {
  console.log("content on focus");
  focusHub.setFocus("contentPage");
}

function contentOnBlur() {
  console.log("content on blur");
}

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