import { defineComponent, reactive, ref } from 'vue';
import './index.less';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Navigation, Autoplay } from 'swiper';
import 'swiper/css';
import 'swiper/css/pagination';
export default defineComponent({
  setup(props, ctx) {
    const imgs = {
      prev: new URL(
        '../../../../assets/svg/home/swiper_prev.svg',
        import.meta.url
      ).href,
      next: new URL(
        '../../../../assets/svg/home/swiper_next.svg',
        import.meta.url
      ).href,
    };
    const modules = ref([Navigation, Autoplay]);
    const ScrollList = reactive({
      list: [
        {
          img: new URL('../../../../assets/img/clothes.jpeg', import.meta.url)
            .href,
        },
        {
          img: new URL('../../../../assets/img/mote.jpeg', import.meta.url)
            .href,
        },
        {
          img: new URL('../../../../assets/img/clothes.jpeg', import.meta.url)
            .href,
        },
        {
          img: new URL('../../../../assets/img/mote.jpeg', import.meta.url)
            .href,
        },
        {
          img: new URL('../../../../assets/img/clothes.jpeg', import.meta.url)
            .href,
        },
        {
          img: new URL('../../../../assets/img/mote.jpeg', import.meta.url)
            .href,
        },
      ],
    });
    return () => (
      <div class="custom-home-swiper">
        <div class="swiper-button-prev swiper-button-white prev-next">
          <img src={imgs.prev} alt="" />
        </div>
        <Swiper
          slidesPerView={4}
          // spaceBetween: 30,  //每个swiper-slide的间隔距离
          preventClicksPropagation={true} //阻止click冒泡。拖动Swiper时阻止click事件
          loop={true}
          loopFillGroupWithBlank={true}
          loopedSlides={2}
          modules={modules.value}
          navigation={{
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }}
          autoplay={{
            delay: 2000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
          }}
        >
          {/*  onClick={goDetail.bind(this, item)} */}
          {ScrollList.list.map((item: any, index: number) => (
            <SwiperSlide>
              <div class="custom-silde-box">
                <img src={item.img} class="swiper_image" />
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
        <div class="swiper-button-next swiper-button-white prev-next">
          <img src={imgs.next} alt="" />
        </div>
      </div>
    );
  },
});
