<script setup>
import { MetroWidget, HORIZONTAL, JsvNinePatch, useFocusHub } from "jsview";
import Item from "./Item.vue";
import borderImageUrl from "./assets/border.png";
import { reactive, provide, onMounted } from "vue";

const focusHub = useFocusHub();

const focusSize = reactive({
  width: 0,
  height: 0,
  left: 0,
  top: 0,
});
provide("focusSize", focusSize);

const provideData = () => {
  return [
    {
      width: 160,
      height: 160,
      color: "#FF9900",
      content: 0,
    },
    {
      width: 300,
      height: 300,
      color: "#0099FF",
      content: 1,
    },
    {
      width: 160,
      height: 160,
      color: "#FF9900",
      content: 2,
    },
  ];
};

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

const onTransitionEnd = () => {
  console.log("NinePatch move end.")
}

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

<template>
  <div :style="{ width: 1280, height: 720, backgroundColor: '#FFFFFF' }">
    <div
      :style="{
        textAlign: 'center',
        fontSize: 30,
        lineHeight: 50,
        color: '#ffffff',
        left: 140,
        top: 20,
        width: 1000,
        height: 50,
        backgroundColor: 'rgba(27,38,151,0.8)',
      }"
    >
      NinePatch展示,框的四个角的方形中心和项目的四个顶点严格对齐
    </div>
    <metro-widget
      name="myWidget"
      :top="100"
      :left="250"
      :width="1000"
      :height="400"
      :direction="HORIZONTAL"
      :provideData="provideData"
      :measures="measures"
      :padding="{ left: 50, right: 50, top: 50, height: 50 }"
    >
      <template #renderItem="{ data, onAction, query }">
        <item :data="data" :onAction="onAction" :query="query" />
      </template>
    </metro-widget>
    <jsv-nine-patch
      :style="{
        width: focusSize.width,
        height: focusSize.height,
        top: focusSize.top,
        left: focusSize.left,
      }"
      :imageUrl="borderImageUrl"
      :imageWidth="81"
      :centerWidth="25"
      :borderOutset="14"
      :imageDspWidth="81"
      :animTime="0.2"
      :waitForInit="true"
      :onTransitionEnd="onTransitionEnd"
    ></jsv-nine-patch>
  </div>
</template>
