<script setup>
import {
  HORIZONTAL,
  MetroWidget,
  JsvPreload,
  buildPreloadInfo,
  buildDownloadInfo,
  useFocusHub,
} from "jsview";
import awesome from "./images/awesomeface.png";
import cat from "./images/cat.jpg";
import { data } from "./data.js";
import Item from "./Item.vue";
import { ref,reactive } from "vue";
import { useRouter } from "vue-router";

const name = "/preload";
const focusHub = useFocusHub();
const text = ref("");
let preloadInfo = ref([]);
let downloadInfo = reactive([]);

const router = useRouter();

const _onPreloading = (percent) => {
  console.log("preloading ", percent);
};

const _onPreloadDone = (imageInfo) => {
  console.log("PRELOAD DONE!", imageInfo);
};

const _onDownloadDone = (urls, extra) => {
  console.log("DOWNLOAD DONE!", urls, extra);
  text.value = `图片下载完成\n${awesome}\n${cat}`;
};

const _measures = () => {
  return {
    width: 240,
    height: 90,
    focusable: true,
    marginRight: 20
  };
};

const _onKeyDown = (ev) => {
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
  }
  return true;
};

const _onFocus = () => {
  focusHub.setFocus(name);
};

setTimeout(() => { 
  console.log("change data")
  for (const item of data) {
    preloadInfo.value.push(buildPreloadInfo(item.url));
    preloadInfo.value.push(buildPreloadInfo(item.focusUrl));
  }
  preloadInfo.value.push(null,null,buildPreloadInfo(null)); // 测试item为null的加载
  downloadInfo.push(buildDownloadInfo(awesome, null, true),buildDownloadInfo(cat, null, true))
  //测试null
  downloadInfo.push(buildDownloadInfo(null),buildDownloadInfo(null),buildDownloadInfo(cat, null, true),null,null,null)
}, 1000);
</script>

<template>
  <jsv-focus-block
    autoFocus
    :style="{
      width: 1920,
      height: 1080,
      backgroundColor: '#FFFFFF',
    }"
    :onAction="{
      onKeyDown: _onKeyDown,
      onFocus: _onFocus,
    }"
  >
    <div
      :style="{
        textAlign: 'center',
        fontSize: 30,
        lineHeight: 50,
        color: '#ffffff',
        left: 100,
        top: 20,
        width: 1280 - 200,
        height: 50,
        backgroundColor: 'rgba(27,38,151,0.8)',
      }"
    >
      预加载后，图片(按钮焦点切换)切换不闪屏
    </div>
    <div 
       :style="{
         textAlign: 'center',
         fontSize: 30,
         lineHeight: 50,
         left: 100,
         top: 120,
         width: 1280 - 200,
         height: 50,
       }">
        按左右键移动
      </div>
    <div :style="{ top: 200, left: 260 }">
      <metro-widget
        :name="name"
        :width="760"
        :height="90"
        :direction="HORIZONTAL"
        :data="data"
        :measures="_measures"
      >
        <template #renderItem="{ data, query, onEdge, onAction }">
          <item
            :data="data"
            :query="query"
            :onEdge="onEdge"
            :onAction="onAction"
          />
        </template>
      </metro-widget>
    </div>
    <div
      :style="{
        left: 100,
        top: 350,
        width: 1000,
        height: 800,
        fontSize: 30,
        color: '#000000',
      }"
    >
      {{ text }}
    </div>
    <jsv-preload
      :preloadList="preloadInfo"
      :downloadList="downloadInfo"
      :onPreloadDone="_onPreloadDone"
      :onDownloadDone="_onDownloadDone"
      :onPreloading="_onPreloading"
    />
  </jsv-focus-block>
</template>
