<template>
  <jsv-focus-block autoFocus>
    <div class="bgStyle">
    <JsvSwiper3D
      name="JsvSwiper3D"
      :layoutInfo="layoutInfo"
      :duration="0.5"
      :sideScale="0.1"
      :ItemArray="items"
      :initItemStyle="initItemStyle"
      :dispNumber="7"
      :initIndex="2"
      :onClick="onClick"
      :onChange="onChange"
    >
      <template #itemView="{ propsItem,defineSize,dataIndex }">
        <div
          :style="{
            width: defineSize.width,
            height: defineSize.height,
            backgroundImage: items[dataIndex].image,
            fontSize: 40,
          }"
        ></div>
      </template>
    </JsvSwiper3D>
  </div>
  <div :style="{width:550,height:60,fontSize:24,color:'#FFFFFF',lineHeight:30,left:30,top:50}">
  {{ '操作提示：左右键选择，【OK】键触发点击事件。初始聚焦：第 2 项' }}
  </div>
  </jsv-focus-block>
</template>

<script setup>
import { JsvSwiper3D, useFocusHub } from "jsview";
import { onMounted, reactive } from "vue";
const focusHub = useFocusHub();
const layoutInfo = {
  width: 1200,
  height: 500,
  left: 30,
  top: 200,
};
const items = reactive([
  {
    image:
      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/2531edf0b7e34c299892ceace72b2c81.jpg",
  },
  {
    image:
      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/rBAQvWLWXvKAdqZ5AAB5Ot8fJhc62.webp",
  },
  {
    image:
      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/bc28dfc4a9ae470e86eed8f743a3d97a.png",
  },
  {
    image:
      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/1070701b82e8416d940c558f5fb61ad2.jpg",
  },
  {
    image:
      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/5a454819dabd469991c62c72e348c49b.jpg",
  },
  {
    image:
      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/rBAQvWNpwcGAM-w1AACsNFeB3SQ56.webp",
  },
  {
    image:
      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/rBAQvWNpw9GAbOL_AABn2OGO6UY97.webp",
  },
  {
    image:
      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/rBAQvWLWWFGAfDz4AAB_dMtnwC831.webp",
  },
  {
    image:
      "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/SwiperTest/App/rBAQvWNpxACASppDAACKmP9qkQ020.webp",
  },
]);

const onClick = (index) => {
  console.log(index);
};
const initItemStyle = {
  width: 300,
  height: 400,
};

const onChange = (preIndex, currentIndex) => {
  console.log('preIndex:',preIndex, 'currentIndex',currentIndex);
};
onMounted(() => {
  focusHub.setFocus("JsvSwiper3D");
});
</script>

<style scoped>
.bgStyle {
  width: 1280;
  height: 720;
  background-color: #007788;
}
</style>
