/**
 * ldesign v0.2.14
 * (c) 2022/11/2 16:16 built by swimly
 * @license MIT
 */

import { h as helper } from '../../_chunks/dep-29915b8e.js';
import Vue from 'vue';
import { ChevronLeftIcon, ChevronRightIcon } from '@ldesign/icons-vue';
import kebabCase from 'lodash/kebabCase';
import { isVNode } from '../../hooks/render-lnode.js';
import { emitEvent } from '../../utils/event.js';
import { getClassPrefixMixins, getGlobalIconMixins } from '../config-provider/config-receiver.js';
import mixins from '../../utils/mixins.js';
import _SwiperItem from './swiper-item.js';
import props from './props.js';
import '@vue/composition-api';
import 'lodash';
import '../../utils/helper.js';
import 'lodash/camelCase';
import 'lodash/mergeWith';
import '../config-provider/context.js';
import '../../_chunks/dep-def4c2ce.js';

const classPrefixMixins = getClassPrefixMixins("swiper");
const defaultNavigation = {
  placement: "inside",
  showSlideBtn: "always",
  size: "medium",
  type: "bars"
};
var _Swiper = mixins(Vue, classPrefixMixins, getGlobalIconMixins()).extend({
  name: "LSwiper",
  components: {
    TSwiperItem: _SwiperItem
  },
  ...{
    swiperTimer: 0,
    swiperSwitchingTimer: 0
  },
  props: {
    ...props
  },
  data() {
    return {
      currentIndex: 0,
      isHovering: false,
      isSwitching: false,
      swiperItemList: [],
      showArrow: false
    };
  },
  computed: {
    swiperItemLength() {
      return this.swiperItemList.length;
    },
    navigationConfig() {
      return {
        ...defaultNavigation,
        ...(isVNode(this.navigation) ? {} : this.navigation)
      };
    },
    isEnd() {
      if (this.type === "card") return !this.loop && this.currentIndex + 1 >= this.swiperItemLength;
      return !this.loop && this.currentIndex + 2 >= this.swiperItemLength;
    },
    propsToUpdateSetTimer() {
      return [this.autoplay, this.currentIndex, this.duration, this.interval];
    },
    swiperWrapClass() {
      return {
        [`${this.componentName}__wrap`]: true,
        [`${this.componentName}--inside`]: this.navigationConfig.placement === "inside",
        [`${this.componentName}--outside`]: this.navigationConfig.placement === "outside",
        [`${this.componentName}--vertical`]: this.direction === "vertical",
        [`${this.componentName}--large`]: this.navigationConfig.size === "large",
        [`${this.componentName}--small`]: this.navigationConfig.size === "small"
      };
    },
    containerStyle() {
      const offsetHeight = this.height ? `${this.height}px` : `${this.getWrapAttribute("offsetHeight")}px`;
      if (this.type === "card" || this.animation === "fade") {
        return {
          height: offsetHeight
        };
      }
      if (this.animation === "slide") {
        if (this.direction === "vertical") {
          return {
            height: offsetHeight,
            transform: `translate3d(0, -${this.currentIndex * 100}%, 0px)`,
            transition: this.isSwitching ? `transform ${this.duration / 1e3}s ease` : ""
          };
        }
        return {
          msTransform: `translate3d(-${this.currentIndex * 100}%, 0px, 0px)`,
          WebkitTransform: `translate3d(-${this.currentIndex * 100}%, 0px, 0px)`,
          transform: `translate3d(-${this.currentIndex * 100}%, 0px, 0px)`,
          transition: this.isSwitching ? `transform ${this.duration / 1e3}s ease` : ""
        };
      }
      return {};
    },
    swiperItems() {
      const h = this.$createElement;
      return this.swiperItemList.map((swiperItem, index) => h(_SwiperItem, helper([{
        "attrs": {
          "index": index,
          "currentIndex": this.currentIndex,
          "isSwitching": this.isSwitching,
          "getWrapAttribute": this.getWrapAttribute,
          "swiperItemLength": this.swiperItemLength
        }
      }, {
        "props": {
          ...this.$props,
          ...swiperItem.propsData
        }
      }]), [swiperItem.children]));
    }
  },
  watch: {
    propsToUpdateSetTimer() {
      this.setTimer();
    },
    isSwitching() {
      if (this.isSwitching) {
        if (this.swiperSwitchingTimer) clearTimeout(this.swiperSwitchingTimer);
        this.swiperSwitchingTimer = setTimeout(() => {
          this.isSwitching = false;
          this.swiperSwitchingTimer = 0;
          if (this.isEnd) this.clearTimer();
        }, this.duration + 50);
      }
    },
    current() {
      this.swiperTo(this.current, {
        source: "autoplay"
      });
    }
  },
  mounted() {
    this.updateSwiperItems();
    this.setTimer();
    this.showArrow = this.navigationConfig.showSlideBtn === "always";
  },
  updated() {
    this.$nextTick(() => {
      this.updateSwiperItems();
    });
  },
  methods: {
    updateSwiperItems() {
      var _this$$scopedSlots$de, _this$$scopedSlots;
      const originalChildren = ((_this$$scopedSlots$de = (_this$$scopedSlots = this.$scopedSlots).default) === null || _this$$scopedSlots$de === void 0 ? void 0 : _this$$scopedSlots$de.call(_this$$scopedSlots, {})) || [];
      const swiperItemList = originalChildren.map(swiper => swiper.componentOptions).filter(swiper => kebabCase(swiper === null || swiper === void 0 ? void 0 : swiper.tag).endsWith(`${this.componentName}-item`));
      const isUnchange = swiperItemList.length === this.swiperItemList.length && this.swiperItemList.every((swiperItem, index) => swiperItem === swiperItemList[index]);
      if (isUnchange) return;
      this.swiperItemList = swiperItemList;
    },
    setTimer() {
      if (this.autoplay && this.interval > 0) {
        this.clearTimer();
        this.swiperTimer = setTimeout(() => {
          this.swiperTo(this.currentIndex + 1, {
            source: "autoplay"
          });
        }, this.currentIndex === 0 ? this.interval - (this.duration + 50) : this.interval);
      }
    },
    clearTimer() {
      if (this.swiperTimer) {
        clearTimeout(this.swiperTimer);
        this.swiperTimer = 0;
      }
    },
    onMouseEnter() {
      this.isHovering = true;
      if (this.stopOnHover) this.clearTimer();
      if (this.navigationConfig.showSlideBtn === "hover") this.showArrow = true;
    },
    onMouseLeave() {
      this.isHovering = false;
      if (!this.isEnd) this.setTimer();
      if (this.navigationConfig.showSlideBtn === "hover") this.showArrow = false;
    },
    onMouseEnterNavigationItem(i) {
      if (this.trigger === "hover") this.swiperTo(i, {
        source: "hover"
      });
    },
    onClickNavigationItem(i) {
      if (this.trigger === "click") this.swiperTo(i, {
        source: "click"
      });
    },
    swiperTo(index, context) {
      const targetIndex = index % this.swiperItemLength;
      emitEvent(this, "change", targetIndex, context);
      this.isSwitching = true;
      this.currentIndex = targetIndex;
    },
    goNext(context) {
      if (this.isSwitching) return;
      if (this.type === "card") return this.swiperTo(this.currentIndex + 1 >= this.swiperItemLength ? 0 : this.currentIndex + 1, context);
      return this.swiperTo(this.currentIndex + 1, context);
    },
    goPrevious(context) {
      if (this.isSwitching) return;
      if (this.currentIndex - 1 < 0) return this.swiperTo(this.swiperItemLength - 1, context);
      return this.swiperTo(this.currentIndex - 1, context);
    },
    getWrapAttribute(attr) {
      var _this$$refs$swiperWra, _this$$refs$swiperWra2;
      return (_this$$refs$swiperWra = this.$refs.swiperWrap) === null || _this$$refs$swiperWra === void 0 ? void 0 : (_this$$refs$swiperWra2 = _this$$refs$swiperWra.parentNode) === null || _this$$refs$swiperWra2 === void 0 ? void 0 : _this$$refs$swiperWra2[attr];
    },
    renderPagination() {
      const h = this.$createElement;
      const fractionIndex = this.currentIndex + 1 > this.swiperItemLength ? 1 : this.currentIndex + 1;
      const {
        ChevronLeftIcon: ChevronLeftIcon$1,
        ChevronRightIcon: ChevronRightIcon$1
      } = this.useGlobalIcon({
        ChevronLeftIcon: ChevronLeftIcon,
        ChevronRightIcon: ChevronRightIcon
      });
      return h("div", {
        "class": `${this.componentName}__arrow`
      }, [h("div", {
        "class": `${this.componentName}__arrow-left`,
        "on": {
          "click": () => this.goPrevious({
            source: "click"
          })
        }
      }, [h(ChevronLeftIcon$1)]), h("div", {
        "class": `${this.componentName}__navigation-text-fraction`
      }, [fractionIndex, "/", this.swiperItemLength]), h("div", {
        "class": `${this.componentName}__arrow-right`,
        "on": {
          "click": () => this.goNext({
            source: "click"
          })
        }
      }, [h(ChevronRightIcon$1)])]);
    },
    renderArrow() {
      const h = this.$createElement;
      if (!this.showArrow) return null;
      const {
        ChevronLeftIcon: ChevronLeftIcon$1,
        ChevronRightIcon: ChevronRightIcon$1
      } = this.useGlobalIcon({
        ChevronLeftIcon: ChevronLeftIcon,
        ChevronRightIcon: ChevronRightIcon
      });
      return h("div", {
        "class": [`${this.componentName}__arrow`, `${this.componentName}__arrow--default`]
      }, [h("div", {
        "class": `${this.componentName}__arrow-left`,
        "on": {
          "click": () => this.goPrevious({
            source: "click"
          })
        }
      }, [h(ChevronLeftIcon$1)]), h("div", {
        "class": `${this.componentName}__arrow-right`,
        "on": {
          "click": () => this.goNext({
            source: "click"
          })
        }
      }, [h(ChevronRightIcon$1)])]);
    },
    renderNavigation() {
      const h = this.$createElement;
      if (isVNode(this.navigation)) return this.navigation;
      if (this.navigationConfig.type === "fraction") {
        return h("div", {
          "class": [`${this.componentName}__navigation`, `${this.componentName}__navigation--fraction`]
        }, [this.renderPagination()]);
      }
      return h("ul", {
        "class": [`${this.componentName}__navigation`, {
          [`${this.componentName}__navigation-bars`]: this.navigationConfig.type === "bars"
        }]
      }, [this.swiperItemList.map((_, i) => h("li", {
        "key": i,
        "class": [`${this.componentName}__navigation-item`, {
          [`${this.classPrefix}-is-active`]: i === this.currentIndex
        }],
        "on": {
          "mouseenter": () => this.onMouseEnterNavigationItem(i),
          "click": () => this.onClickNavigationItem(i)
        }
      }, [h("span")]))]);
    },
    renderSwiperItems() {
      return this.swiperItems;
    }
  },
  render() {
    const h = arguments[0];
    return h("div", {
      "class": this.componentName,
      "on": {
        "mouseenter": this.onMouseEnter,
        "mouseleave": this.onMouseLeave
      },
      "ref": "swiperWrap"
    }, [h("div", {
      "class": this.swiperWrapClass
    }, [h("div", {
      "class": [`${this.componentName}__content`, {
        [`${this.componentName}-fade`]: this.animation === "fade",
        [`${this.componentName}-card`]: this.type === "card"
      }]
    }, [h("div", {
      "class": `${this.componentName}__container`,
      "style": this.containerStyle
    }, [this.renderSwiperItems()])]), this.renderNavigation(), this.renderArrow()])]);
  }
});

export { _Swiper as default };
//# sourceMappingURL=swiper.js.map
