import { imgType } from "@/modules/list/objects/item";
import { Swiper } from "queenjs/ui";
import { css } from "@linaria/core";
import { defineComponent, ref } from "vue";
import { array } from "vue-types";

export default defineComponent({
  props: {
    images: array<string>(),
  },
  setup(props) {
    const swiperRef = ref();
    return () => {
      const { images } = props;
      return (
        <div class={SwiperView}>
          <Swiper
            onInit={(e) => {
              swiperRef.value = e;
            }}
            options={{
              effect: "creative",
              slidesPerView: "auto",
              centeredSlides: true,
              loop: true,
              creativeEffect: {
                prev: {
                  shadow: true,
                  translate: ["-30%", 0, -400],
                },
                next: {
                  shadow: true,
                  translate: ["30%", 0, -400],
                },
              },
            }}
          >
            {images &&
              images.map((e, index) => {
                return (
                  <Swiper.Slider class={Slider} key={index}>
                    <img src={e} />
                  </Swiper.Slider>
                );
              })}
          </Swiper>
          <div
            class={"swiper_prev"}
            onClick={() => swiperRef.value.slidePrev()}
          >
            <img src={require("@/assets/btn_prev.png")} />
          </div>
          <div
            class={"swiper_next"}
            onClick={() => swiperRef.value.slideNext()}
          >
            <img src={require("@/assets/btn_next.png")} />
          </div>
        </div>
      );
    };
  },
});
const SwiperView = css`
  position: relative;
  width: 100%;
  height: 100%;
  .swiper_prev,
  .swiper_next {
    position: absolute;
    top: 50%;
    left: 0;
    width: 66px;
    height: 66px;
    line-height: 66px;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
    img {
      height: 40px;
      object-fit: contain;
    }
  }
  .swiper_next {
    left: auto;
    right: 0;
  }
`;
const Slider = css`
  width: 4.5rem;
  img {
    width: 100%;
    height: 3.4rem;
    object-fit: cover;
  }
`;
