<template>
  <div
    :style="{
      width: 1280,
      height: 720,
      backgroundColor: '#007788',
    }"
  ></div>
  <div
    :style="{
      left: 300,
      top: 100,
    }"
  >
    <Stretch
      name="stretch"
      :itemSizeInfo="itemSizeInfo"
      :datas="datas"
      :layout="layout"
      :onItemClick="onItemClick"
      :onEdge="onEdge"
      :duration="0.3"
      :initLargeIndex="0"
    >
      <template #itemLarge>
        <div
          :style="{
            width: 320,
            height: 180,
            backgroundColor: '#0F0',
            fontSize: 30,
            lineHeight: 180,
          }"
        >
          测试文字测试文字测试文字
        </div></template
      >
      <template #itemSmall>
        <div
          :style="{
            width: 100,
            height: 180,
            backgroundColor: '#F00',
            fontSize: 30,
            lineHeight: 180,
          }"
        >
          测试文字
        </div>
      </template>
      <template #itemLeftEdge>
        <div
          :style="{
            width: 10,
            height: 10,
            backgroundColor: '#00F',
          }"
        ></div>
      </template>
      <template #itemRightEdge>
        <div
          :style="{
            left: 90,
            width: 10,
            height: 10,
            backgroundColor: '#00F',
          }"
        ></div>
      </template>
    </Stretch>
  </div>
</template>

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

const focusHub = useFocusHub();
const itemSizeInfo = {
  smallWidth: 100,
  largeWidth: 320,
  marginRight: 10,
  height: 180,
};
const datas = [{}, {}, {}];
const layout = {
  width: 540,
  height: 180,
};

const onItemClick = (index) => {
  console.log("onItemClick", index);
};

const onEdge = (edgeInfo) => {
  console.log("onEdge");
};

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