"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _comp = require("../../ui/src/comp");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
var _ui = require("../../ui");
var _vn = require("../../ui/src/vn");
var _dom = require("../../ui/src/dom");
var _loading = _interopRequireDefault(require("../../loading/src/loading"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
  name: 'VxeCarousel',
  mixins: [_ui.globalMixins.sizeMixin],
  props: {
    value: [String, Number],
    options: Array,
    loading: Boolean,
    height: {
      type: [Number, String],
      default: function _default() {
        return (0, _ui.getConfig)().carousel.height;
      }
    },
    width: {
      type: [Number, String],
      default: function _default() {
        return (0, _ui.getConfig)().carousel.width;
      }
    },
    autoPlay: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().carousel.autoPlay;
      }
    },
    interval: {
      type: [Number, String],
      default: function _default() {
        return (0, _ui.getConfig)().carousel.interval;
      }
    },
    loop: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().carousel.loop;
      }
    },
    vertical: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().carousel.vertical;
      }
    },
    showIndicators: {
      type: Boolean,
      default: function _default() {
        return (0, _ui.getConfig)().carousel.showIndicators;
      }
    }
  },
  data: function data() {
    var xID = _xeUtils.default.uniqueId();
    var reactData = {
      activeName: '',
      staticItems: [],
      itemWidth: 0,
      itemHeight: 0
    };
    var internalData = {
      apTimeout: undefined,
      stopFlag: false
    };
    return {
      xID: xID,
      reactData: reactData,
      internalData: internalData
    };
  },
  provide: function provide() {
    var $xeCarousel = this;
    return {
      $xeCarousel: $xeCarousel
    };
  },
  computed: Object.assign(Object.assign({}, {}), {
    computeListStyle: function computeListStyle() {
      var $xeCarousel = this;
      var props = $xeCarousel;
      var reactData = $xeCarousel.reactData;
      var vertical = props.vertical,
        options = props.options;
      var activeName = reactData.activeName,
        itemWidth = reactData.itemWidth,
        itemHeight = reactData.itemHeight,
        staticItems = reactData.staticItems;
      var list = (staticItems && staticItems.length ? staticItems : options) || [];
      var activeIndex = Math.max(0, _xeUtils.default.findIndexOf(list, function (item) {
        return item.name === activeName;
      }));
      var stys = {};
      if (vertical) {
        stys.transform = "translateY(-".concat(activeIndex * itemHeight, "px)");
      } else {
        stys.width = "".concat(itemWidth * list.length, "px");
        stys.transform = "translateX(-".concat(activeIndex * itemWidth, "px)");
      }
      return stys;
    }
  }),
  methods: {
    //
    // Method
    //
    dispatchEvent: function dispatchEvent(type, params, evnt) {
      var $xeCarousel = this;
      $xeCarousel.$emit(type, (0, _ui.createEvent)(evnt, {
        $carousel: $xeCarousel
      }, params));
    },
    emitModel: function emitModel(value) {
      var $xeCarousel = this;
      var _events = $xeCarousel._events;
      $xeCarousel.$emit('input', value);
      if (_events && _events.modelValue) {
        $xeCarousel.$emit('modelValue', value);
      } else {
        $xeCarousel.$emit('model-value', value);
      }
    },
    prev: function prev() {
      var $xeCarousel = this;
      if ($xeCarousel.handlePrevNext(false)) {
        $xeCarousel.handleAutoPlay();
      }
      return $xeCarousel.$nextTick();
    },
    next: function next() {
      var $xeCarousel = this;
      if ($xeCarousel.handlePrevNext(true)) {
        $xeCarousel.handleAutoPlay();
      }
      return $xeCarousel.$nextTick();
    },
    updateStyle: function updateStyle() {
      var $xeCarousel = this;
      var reactData = $xeCarousel.reactData;
      $xeCarousel.$nextTick(function () {
        var wrapperElem = $xeCarousel.$refs.refWrapperElem;
        if (wrapperElem) {
          reactData.itemWidth = wrapperElem.clientWidth;
          reactData.itemHeight = wrapperElem.clientHeight;
        }
      });
    },
    clickItemEvent: function clickItemEvent(evnt, item) {
      var $xeCarousel = this;
      var reactData = $xeCarousel.reactData;
      var value = item.name;
      reactData.activeName = item.name;
      $xeCarousel.emitModel(value);
      $xeCarousel.$emit('change', {
        value: value
      }, evnt);
      $xeCarousel.updateStyle();
    },
    initDefaultActive: function initDefaultActive(list) {
      var $xeCarousel = this;
      var props = $xeCarousel;
      var reactData = $xeCarousel.reactData;
      var activeName = null;
      if (list && list.length) {
        var validVal = false;
        activeName = props.value;
        list.forEach(function (item) {
          if (activeName === item.name) {
            validVal = true;
          }
        });
        if (!validVal) {
          activeName = list[0].name;
          $xeCarousel.emitModel(activeName);
        }
      }
      reactData.activeName = activeName;
    },
    handlePrevNext: function handlePrevNext(isNext) {
      var $xeCarousel = this;
      var props = $xeCarousel;
      var reactData = $xeCarousel.reactData;
      var options = props.options,
        loop = props.loop;
      var activeName = reactData.activeName,
        staticItems = reactData.staticItems;
      var list = (staticItems && staticItems.length ? staticItems : options) || [];
      var index = Math.max(0, _xeUtils.default.findIndexOf(list, function (item) {
        return item.name === activeName;
      }));
      if (index > -1) {
        var item = null;
        if (isNext) {
          if (index < list.length - 1) {
            item = list[index + 1];
          } else {
            if (loop) {
              item = list[0];
            }
          }
        } else {
          if (index > 0) {
            item = list[index - 1];
          } else {
            if (loop) {
              item = list[list.length - 1];
            }
          }
        }
        if (item) {
          var name = item.name;
          var value = name;
          reactData.activeName = name;
          $xeCarousel.emitModel(value);
          return true;
        }
      }
      return false;
    },
    prevEvent: function prevEvent(evnt) {
      var $xeCarousel = this;
      var reactData = $xeCarousel.reactData;
      if ($xeCarousel.handlePrevNext(false)) {
        var value = reactData.activeName;
        $xeCarousel.$emit('change', {
          value: value
        }, evnt);
      }
    },
    nextEvent: function nextEvent(evnt) {
      var $xeCarousel = this;
      var reactData = $xeCarousel.reactData;
      if ($xeCarousel.handlePrevNext(true)) {
        var value = reactData.activeName;
        $xeCarousel.$emit('change', {
          value: value
        }, evnt);
      }
    },
    stopAutoPlay: function stopAutoPlay() {
      var $xeCarousel = this;
      var internalData = $xeCarousel.internalData;
      var apTimeout = internalData.apTimeout;
      internalData.stopFlag = true;
      if (apTimeout) {
        clearTimeout(apTimeout);
        internalData.apTimeout = undefined;
      }
    },
    handleAutoPlay: function handleAutoPlay() {
      var $xeCarousel = this;
      var props = $xeCarousel;
      var internalData = $xeCarousel.internalData;
      var autoPlay = props.autoPlay,
        interval = props.interval;
      var stopFlag = internalData.stopFlag;
      $xeCarousel.stopAutoPlay();
      if (autoPlay) {
        internalData.stopFlag = false;
        internalData.apTimeout = setTimeout(function () {
          if (!stopFlag) {
            $xeCarousel.handlePrevNext(true);
          }
        }, _xeUtils.default.toNumber(interval) || 300);
      }
    },
    mouseenterEvent: function mouseenterEvent() {
      var $xeCarousel = this;
      $xeCarousel.stopAutoPlay();
    },
    mouseleaveEvent: function mouseleaveEvent() {
      var $xeCarousel = this;
      $xeCarousel.handleAutoPlay();
    },
    callSlot: function callSlot(slotFunc, params) {
      var $xeCarousel = this;
      var slots = $xeCarousel.$scopedSlots;
      if (slotFunc) {
        if (_xeUtils.default.isString(slotFunc)) {
          slotFunc = slots[slotFunc] || null;
        }
        if (_xeUtils.default.isFunction(slotFunc)) {
          return (0, _vn.getSlotVNs)(slotFunc(params));
        }
      }
      return [];
    },
    //
    // Render
    //
    renderItemWrapper: function renderItemWrapper(h, list) {
      var $xeCarousel = this;
      var props = $xeCarousel;
      var reactData = $xeCarousel.reactData;
      var height = props.height;
      var activeName = reactData.activeName;
      var listStyle = $xeCarousel.computeListStyle;
      return h('div', {
        class: 'vxe-carousel--list',
        style: listStyle
      }, list.map(function (item) {
        var name = item.name,
          url = item.url,
          slots = item.slots;
        var defaultSlot = slots ? slots.default : null;
        return h('div', {
          key: "".concat(name),
          class: ['vxe-carousel--item-inner', {
            'is--active': activeName === name
          }],
          style: height ? {
            height: (0, _dom.toCssUnit)(height)
          } : {}
        }, defaultSlot ? $xeCarousel.callSlot(defaultSlot, {}) : [h('img', {
          class: 'vxe-carousel--item-img',
          attrs: {
            src: url
          }
        })]);
      }));
    },
    renderIndicators: function renderIndicators(h, list) {
      var $xeCarousel = this;
      var reactData = $xeCarousel.reactData;
      var activeName = reactData.activeName;
      return h('div', {
        class: 'vxe-carousel--indicators'
      }, list.map(function (item) {
        var name = item.name;
        return h('div', {
          key: "".concat(name),
          class: ['vxe-carousel--indicators-item', {
            'is--active': activeName === name
          }],
          on: {
            click: function click(evnt) {
              $xeCarousel.clickItemEvent(evnt, item);
            }
          }
        });
      }));
    },
    renderVN: function renderVN(h) {
      var $xeCarousel = this;
      var props = $xeCarousel;
      var slots = $xeCarousel.$scopedSlots;
      var reactData = $xeCarousel.reactData;
      var loading = props.loading,
        height = props.height,
        width = props.width,
        showIndicators = props.showIndicators,
        vertical = props.vertical,
        options = props.options;
      var staticItems = reactData.staticItems;
      var defaultSlot = slots.default;
      var list = (staticItems && staticItems.length ? staticItems : options) || [];
      return h('div', {
        ref: 'refElem',
        class: ['vxe-carousel', "is--".concat(vertical ? 'vertical' : 'horizontal')],
        style: width ? {
          width: (0, _dom.toCssUnit)(width)
        } : {},
        on: {
          mouseenter: $xeCarousel.mouseenterEvent,
          mouseleave: $xeCarousel.mouseleaveEvent
        }
      }, [h('div', {
        class: 'vxe-carousel--slots'
      }, defaultSlot ? defaultSlot({}) : []), h('div', {
        ref: 'refWrapperElem',
        class: 'vxe-carousel--item-wrapper',
        style: height ? {
          height: (0, _dom.toCssUnit)(height)
        } : {}
      }, [$xeCarousel.renderItemWrapper(h, list)]), showIndicators ? $xeCarousel.renderIndicators(h, list) : (0, _ui.renderEmptyElement)($xeCarousel), h('div', {
        class: 'vxe-carousel--btn-wrapper'
      }, [h('div', {
        class: 'vxe-carousel--previous-btn',
        on: {
          click: $xeCarousel.prevEvent
        }
      }, [h('i', {
        class: vertical ? (0, _ui.getIcon)().CAROUSEL_VERTICAL_PREVIOUS : (0, _ui.getIcon)().CAROUSEL_HORIZONTAL_PREVIOUS
      })]), h('div', {
        class: 'vxe-carousel--next-btn',
        on: {
          click: $xeCarousel.nextEvent
        }
      }, [h('i', {
        class: vertical ? (0, _ui.getIcon)().CAROUSEL_VERTICAL_NEXT : (0, _ui.getIcon)().CAROUSEL_HORIZONTAL_NEXT
      })])]),
      /**
       * 加载中
       */
      h(_loading.default, {
        class: 'vxe-carousel--loading',
        props: {
          value: loading
        }
      })]);
    }
  },
  watch: {
    options: function options() {
      var $xeCarousel = this;
      var props = $xeCarousel;
      $xeCarousel.initDefaultActive(props.options);
    },
    'reactData.staticItems': function reactDataStaticItems() {
      var $xeCarousel = this;
      var reactData = $xeCarousel.reactData;
      $xeCarousel.initDefaultActive(reactData.staticItems);
    },
    autoPlay: function autoPlay() {
      var $xeCarousel = this;
      $xeCarousel.handleAutoPlay();
    }
  },
  created: function created() {
    var $xeCarousel = this;
    var props = $xeCarousel;
    var reactData = $xeCarousel.reactData;
    $xeCarousel.initDefaultActive(reactData.staticItems.length ? reactData.staticItems : props.options);
  },
  mounted: function mounted() {
    var $xeCarousel = this;
    $xeCarousel.handleAutoPlay();
    $xeCarousel.updateStyle();
  },
  beforeDestroy: function beforeDestroy() {
    var $xeCarousel = this;
    $xeCarousel.stopAutoPlay();
  },
  render: function render(h) {
    return this.renderVN(h);
  }
});
/* define-vxe-component end */