'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var core = require('@vueuse/core');
var index = require('../../svg-icon/index.js');

"use strict";
const _hoisted_1 = { class: "me-swiper" };
const __default__ = vue.defineComponent({
  name: "me-swiper"
});
var script = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: {
    moveOffset: { type: Number, required: false, default: 100 },
    customStyle: { type: Object, required: false }
  },
  setup(__props) {
    const props = __props;
    const wrapperRef = vue.ref();
    const listRef = vue.ref();
    const offsetWidth = vue.ref(0);
    let offset = 0;
    const diffWidth = vue.ref(1);
    let listWidth = vue.ref(0);
    let wrapperWidth = vue.ref(0);
    const text = vue.ref("");
    core.useResizeObserver(listRef, (entries) => {
      const entry = entries[0];
      const { width, height } = entry.contentRect;
      listWidth.value = width;
      text.value = `width: ${width}, height: ${height}`;
    });
    core.useResizeObserver(wrapperRef, (entries) => {
      const entry = entries[0];
      const { width, height } = entry.contentRect;
      wrapperWidth.value = width;
    });
    vue.watchEffect(() => {
      diffWidth.value = wrapperWidth.value - listWidth.value;
    });
    const handleToggle = (type) => {
      const width = diffWidth.value;
      const itemWidth = props.moveOffset;
      if (type === "left") {
        if (offset + itemWidth > 0) {
          offset = 0;
        } else {
          offset += itemWidth;
        }
      }
      if (type === "right") {
        if (offset - itemWidth <= width) {
          offset = width;
        } else {
          offset -= itemWidth;
        }
      }
      offsetWidth.value = offset;
    };
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createElementVNode(
          "div",
          {
            ref_key: "wrapperRef",
            ref: wrapperRef,
            class: "wrapper"
          },
          [
            offsetWidth.value < 0 ? (vue.openBlock(), vue.createElementBlock("div", {
              key: 0,
              onClick: _cache[0] || (_cache[0] = ($event) => handleToggle("left")),
              class: "toggle toggle-left"
            }, [
              vue.renderSlot(_ctx.$slots, "left", {}, () => [
                vue.createVNode(vue.unref(index.MeSvgIcon), {
                  size: 24,
                  color: "#dcdfe6",
                  name: "ri-arrow-right-s-line"
                })
              ])
            ])) : vue.createCommentVNode("v-if", true),
            offsetWidth.value > diffWidth.value ? (vue.openBlock(), vue.createElementBlock("div", {
              key: 1,
              onClick: _cache[1] || (_cache[1] = ($event) => handleToggle("right")),
              class: "toggle toggle-right"
            }, [
              vue.renderSlot(_ctx.$slots, "right", {}, () => [
                vue.createVNode(vue.unref(index.MeSvgIcon), {
                  size: 24,
                  color: "#dcdfe6",
                  name: "ri-arrow-right-s-line"
                })
              ])
            ])) : vue.createCommentVNode("v-if", true),
            vue.createElementVNode(
              "div",
              {
                style: vue.normalizeStyle({ transform: `translateX(${offsetWidth.value}px)`, ...__props.customStyle }),
                ref_key: "listRef",
                ref: listRef,
                class: "coupon-list"
              },
              [
                vue.renderSlot(_ctx.$slots, "default")
              ],
              4
              /* STYLE */
            )
          ],
          512
          /* NEED_PATCH */
        )
      ]);
    };
  }
});

exports.default = script;
//# sourceMappingURL=swiper.vue2.js.map
