import { defineComponent, ref, computed, nextTick, watch, onMounted, onUnmounted, createElementBlock, openBlock, normalizeStyle, unref, normalizeClass, createElementVNode, createCommentVNode, Fragment, renderList, renderSlot } from 'vue';
import '../../../utils/index.mjs';
import purify from '../../../../node_modules/.pnpm/dompurify@3.3.0/node_modules/dompurify/dist/purify.es.mjs';
import 'swiper/css';
import 'swiper/css/effect-cards';
import 'swiper/css/effect-coverflow';
import 'swiper/css/effect-cube';
import 'swiper/css/effect-fade';
import 'swiper/css/effect-flip';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import Swiper from 'swiper';
import { Navigation, Pagination, Scrollbar, Autoplay, EffectFade, EffectCube, EffectCoverflow, EffectFlip, EffectCards, Keyboard, Mousewheel } from 'swiper/modules';
import { slideshowProps } from './slideshow.mjs';
import { createNamespace } from '../../../utils/create-namespace.mjs';
import { addUnit } from '../../../utils/add-unit.mjs';

"use strict";
const _hoisted_1 = { class: "slide-content" };
const _hoisted_2 = ["src", "alt"];
const _hoisted_3 = ["innerHTML"];
const _hoisted_4 = {
  key: 0,
  class: "swiper-pagination"
};
const _hoisted_5 = {
  key: 1,
  class: "swiper-button-prev"
};
const _hoisted_6 = {
  key: 2,
  class: "swiper-button-next"
};
const _hoisted_7 = {
  key: 3,
  class: "swiper-scrollbar"
};
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ name: "LlSlideshow" },
  __name: "slideshow",
  props: slideshowProps,
  emits: ["init", "slideChange", "destroy", "clickSlide"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const bem = createNamespace("slideshow");
    const props = __props;
    const emits = __emit;
    const swiperEl = ref();
    const swiperInstance = ref();
    const purifyOptions = computed(() => ({
      USE_PROFILES: { html: true, svg: true },
      ADD_TAGS: ["use", "svg", "symbol"],
      ADD_ATTR: ["xlink:href", "viewBox", "aria-hidden"],
      FORBID_TAGS: ["script", "iframe", "object", "embed"],
      FORBID_ATTR: ["onerror", "onload", "onclick", "onmouseover"]
    }));
    const allModules = [
      Navigation,
      Pagination,
      Scrollbar,
      Autoplay,
      EffectFade,
      EffectCube,
      EffectCoverflow,
      EffectFlip,
      EffectCards,
      Keyboard,
      // 键盘控制模块
      Mousewheel
      // 鼠标滚轮模块
    ];
    const buildEffectConfig = () => {
      switch (props.effect) {
        case "fade":
          return {
            effect: props.effect
          };
        case "cube":
          return {
            effect: props.effect,
            cubeEffect: {
              shadow: props.shadow
            }
          };
        case "coverflow":
          return {
            effect: props.effect,
            coverflowEffect: {
              rotate: props.rotate,
              //倾斜视角
              stretch: props.stretch,
              // 拉伸
              depth: props.depth,
              // 深度
              modifier: 1
            }
          };
        case "flip":
          return {
            effect: props.effect
          };
        case "cards":
          return {
            effect: props.effect,
            cardsEffect: {
              perSlideRotate: props.perSlideRotate,
              // 每张卡片旋转角度
              perSlideOffset: props.perSlideOffset
              // 每张卡片偏移量
            }
          };
        default:
          return { effect: "slide" };
      }
    };
    const buildSwiperConfig = () => {
      const effectConfig = buildEffectConfig();
      const baseConfig = {
        modules: allModules,
        speed: props.speed,
        loop: props.loop,
        direction: props.direction,
        // 控制水平/垂直方向
        grabCursor: props.grabCursor,
        // 是否在触摸时显示抓取光标
        simulateTouch: props.simulateTouch,
        // 是否触摸滑动切换
        slidesPerView: props.slidesPerView,
        // 同时显示的幻灯片数量
        spaceBetween: props.spaceBetween,
        // 幻灯片之间的间距
        centeredSlides: props.centeredSlides,
        // 是否居中显示活动幻灯片
        slidesPerGroup: props.slidesPerGroup,
        // 每次滑动切换的幻灯片组数
        ...effectConfig
      };
      const mousewheelConfig = props.mousewheel ? {
        mousewheel: {
          enabled: props.mousewheel,
          // 启用鼠标滚轮控制
          invert: props.mousewheelInvert,
          // 鼠标滚轮方向是否反转
          sensitivity: props.mousewheelSensitivity
          // 鼠标滚轮灵敏度 (0.1 - 3)
        }
      } : {};
      const keyboardConfig = props.keyboard ? {
        keyboard: {
          enabled: props.keyboard,
          // 是否启用键盘控制
          onlyInViewport: props.keyboardOnlyInViewport,
          // 是否仅在视窗内响应键盘
          pageUpDown: props.keyboardPageUpDown
          // 是否启用PageUp/PageDown翻页
        }
      } : {};
      const autoplayConfig = props.autoplay ? {
        autoplay: {
          delay: props.delay,
          disableOnInteraction: false,
          // 注意：这里建议设为 true 更符合用户习惯
          ...props.options?.autoplay || {}
        }
      } : {};
      const paginationConfig = props.pagination ? {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          ...props.options?.pagination || {}
        }
      } : {};
      const navigationConfig = props.navigation ? {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
          ...props.options?.navigation || {}
        }
      } : {};
      const scrollbarConfig = props.scrollbar ? {
        scrollbar: {
          el: ".swiper-scrollbar",
          draggable: true,
          ...props.options?.scrollbar || {}
        }
      } : {};
      return {
        ...baseConfig,
        ...mousewheelConfig,
        ...keyboardConfig,
        ...autoplayConfig,
        ...paginationConfig,
        ...navigationConfig,
        ...scrollbarConfig,
        ...props.options
        // 用户自定义选项最后合并（最高优先级）
      };
    };
    const initSwiper = async () => {
      await nextTick();
      if (!swiperEl.value || props.list.length === 0) return;
      try {
        if (swiperInstance.value) {
          swiperInstance.value.destroy(true, true);
        }
        const config = buildSwiperConfig();
        swiperInstance.value = new Swiper(swiperEl.value, {
          ...config,
          on: {
            init: () => {
              emits("init", swiperInstance.value);
            },
            slideChange: () => {
              emits("slideChange", swiperInstance.value);
            },
            destroy: () => {
              emits("destroy");
            },
            click: (swiper, event) => {
              emits("clickSlide", {
                swiper,
                event,
                activeIndex: swiper.activeIndex
              });
            }
          }
        });
        nextTick(() => {
          if (swiperInstance.value) {
            swiperInstance.value.update();
          }
        });
      } catch (error) {
        console.error(error);
      }
    };
    const reInitSwiper = async () => {
      if (swiperInstance.value) {
        swiperInstance.value.destroy(true, true);
        swiperInstance.value = null;
      }
      await nextTick();
      await initSwiper();
    };
    watch(
      () => props.effect,
      (newEffect, oldEffect) => {
        if (newEffect !== oldEffect) {
          reInitSwiper();
        }
      }
    );
    watch(
      () => props.list,
      (newList, oldList) => {
        if (newList.length !== oldList.length && swiperInstance.value) {
          nextTick(() => {
            swiperInstance.value?.update();
          });
        }
      },
      { deep: true }
    );
    watch(
      () => props.options,
      () => {
        if (swiperInstance.value) {
          swiperInstance.value.update();
        }
      },
      { deep: true }
    );
    onMounted(() => {
      initSwiper();
    });
    onUnmounted(() => {
      if (swiperInstance.value) {
        swiperInstance.value.destroy(true, true);
      }
    });
    __expose({
      instance: swiperInstance,
      next: () => swiperInstance.value?.slideNext(),
      prev: () => swiperInstance.value?.slidePrev(),
      goTo: (index) => swiperInstance.value?.slideTo(index),
      startAutoplay: () => swiperInstance.value?.autoplay?.start(),
      stopAutoplay: () => swiperInstance.value?.autoplay?.stop(),
      update: () => swiperInstance.value?.update(),
      destroy: () => {
        if (swiperInstance.value) {
          swiperInstance.value.destroy(true, true);
          swiperInstance.value = null;
        }
      },
      reInit: reInitSwiper
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          ref_key: "swiperEl",
          ref: swiperEl,
          class: normalizeClass([unref(bem).b(), "swiper"]),
          style: normalizeStyle({ height: unref(addUnit)(_ctx.height) })
        },
        [
          createElementVNode(
            "div",
            {
              class: normalizeClass([unref(bem).e("wrapper"), "swiper-wrapper"])
            },
            [
              (openBlock(true), createElementBlock(
                Fragment,
                null,
                renderList(_ctx.list, (item, index) => {
                  return openBlock(), createElementBlock(
                    "div",
                    {
                      key: `slide-${index}`,
                      class: normalizeClass([unref(bem).e("slide"), "swiper-slide"])
                    },
                    [
                      renderSlot(_ctx.$slots, "slide", {
                        item,
                        index
                      }, () => [
                        createElementVNode("div", _hoisted_1, [
                          item.image ? (openBlock(), createElementBlock("img", {
                            key: 0,
                            src: item.image,
                            alt: item.title || `Slide ${index + 1}`,
                            class: "slide-image"
                          }, null, 8, _hoisted_2)) : createCommentVNode("v-if", true),
                          item.text ? (openBlock(), createElementBlock("div", {
                            key: 1,
                            class: "slide-text",
                            style: normalizeStyle({ padding: _ctx.textPadding }),
                            innerHTML: unref(purify).sanitize(item.text || "", purifyOptions.value)
                          }, null, 12, _hoisted_3)) : createCommentVNode("v-if", true)
                        ])
                      ])
                    ],
                    2
                    /* CLASS */
                  );
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ],
            2
            /* CLASS */
          ),
          createCommentVNode(" Swiper \u9ED8\u8BA4\u5BFC\u822A\u5143\u7D20 "),
          _ctx.pagination ? (openBlock(), createElementBlock("div", _hoisted_4)) : createCommentVNode("v-if", true),
          _ctx.navigation ? (openBlock(), createElementBlock("div", _hoisted_5)) : createCommentVNode("v-if", true),
          _ctx.navigation ? (openBlock(), createElementBlock("div", _hoisted_6)) : createCommentVNode("v-if", true),
          _ctx.scrollbar ? (openBlock(), createElementBlock("div", _hoisted_7)) : createCommentVNode("v-if", true)
        ],
        6
        /* CLASS, STYLE */
      );
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=slideshow.vue2.mjs.map
