<!--
 * @Author: ChenChanghua
 * @Date: 2023-02-10 14:45:39
 * @Description: file content
-->

<script setup>
import { JsvSwiper, useFocusHub, EdgeDirection } from "jsview";
import { onMounted } from "vue";
import Item from "./Item.vue"

const focusHub = useFocusHub();

function randomColor() {
  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
  return (
    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
  );
}
const imgSrcList = [
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228543_img_20230610184253.png",
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228544_img_20230610184145.png",
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228545_img_20230610184110.png",
  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/Swiper/App/element_228542_img_20230610184253.png",
];
let data = [];
for (let i = 0; i < 10; i++) {
  data.push({
    width: 400,
    height: 300,
    index: i,
    src: imgSrcList[i % imgSrcList.length],
  });
}

const swiper1 = {
  onChange: (currentId) => {
    console.log("swiper1: onChange", currentId);
  },
  onClick: (currentId) => {
    console.log("swiper1: onClick", currentId);
  },
  onEdge: (info) => {
    if (info.direction == EdgeDirection.bottom) {
      focusHub.setFocus("mySwiper2");
    }
  },
};

const swiper2 = {
  onChange: (currentId) => {
    console.log("swiper2: onChange", currentId);
  },
  onClick: (currentId) => {
    console.log("swiper2: onClick", currentId);
  },
  onEdge: (info) => {
    if (info.direction == EdgeDirection.top) {
      focusHub.setFocus("mySwiper1");
    }
  },
};
onMounted(() => {
  focusHub.setFocus("mySwiper1");
});
</script>

<template>
  <div :style="{width: 1280, height: 720, backgroundColor:'#F5F5DC'}"></div>
  <div :style="{
    width: 1280,
    height: 100,
    fontSize: 30,
    textAlign: 'center',
    lineHeight: 100,
    color: '#000000'
  }">
    上下键切换获焦的轮播图, 左右键切换轮播图显示海报, 失焦轮播图自动轮播
  </div>
  <div :style="{left: (1280 - 400) / 2, top: 100}">
    <jsv-swiper
      name="mySwiper1"
      ref="mySwiper1"
      :totalFrame="data.length"
      :layoutInfo="{
        width: 400,
        height: 200,
      }"
      :animation="{
        duration: 300,
        easing: 'linear',
      }"
      :autoplayInterval="1000"
      :onChange="swiper1.onChange"
      :onClick="swiper1.onClick"
      :onEdge="swiper1.onEdge"
    >
      <template #itemView="{ dataIndex, focused }">
        <item :data="data[dataIndex]" :focused="focused"/>
      </template>
    </jsv-swiper>

    <jsv-swiper
      name="mySwiper2"
      ref="mySwiper2"
      :totalFrame="data.length"
      :layoutInfo="{
        top: 300,
        width: 400,
        height: 200,
      }"
      :animation="{
        duration: 300,
        easing: 'linear',
      }"
      :autoplayInterval="1000"
      :onChange="swiper2.onChange"
      :onClick="swiper2.onClick"
      :onEdge="swiper2.onEdge"
      :reverseSwipe="true"
      :dotSize="20"
      :disableLoopWhenFocus="true"
      :smoothTranslate="true"
    >
      <template #itemView="{ dataIndex, focused }">
        <item :data="data[dataIndex]" :focused="focused"/>
      </template>
      <template #indicatorDot="{ dataIndex, currentIndex }">
        <div
          :style="{
            width: 20,
            height: 20,
            color: '#ffffff',
            lineHeight: 20,
            textAlign: 'center',
            backgroundColor:
              dataIndex == currentIndex
                ? 'rgba(100, 100, 100, 0.7)'
                : '#ff0000',
          }"
        >
        {{ dataIndex }}
      </div>
      </template>
    </jsv-swiper>
  </div>
</template>
