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

'use strict';

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

var VueCompositionAPI = require('@vue/composition-api');
var iconsVue = require('@ldesign/icons-vue');
var kebabCase = require('lodash/kebabCase');
var hooks_useDefaultValue = require('../../hooks/use-default-value.js');
var hooks_useConfig = require('../../hooks/use-config.js');
var utils_renderNode = require('../../utils/render-node.js');
var components_imageViewer_props = require('./props.js');
var components_imageViewer_base_ImageModalIcon = require('./base/ImageModalIcon.js');
var components_imageViewer_base_ImageViewerUtils = require('./base/ImageViewerUtils.js');
var components_imageViewer_base_ImageItem = require('./base/ImageItem.js');
var components_imageViewer_base_ImageViewerModal = require('./base/ImageViewerModal.js');
var components_imageViewer_hooks_index = require('./hooks/index.js');
var components_imageViewer_utils = require('./utils.js');
var components_imageViewer_const = require('./const.js');
var components_imageViewer_base_Container = require('./base/Container.js');
var utils_helper = require('../../utils/helper.js');
require('../config-provider/useConfig.js');
require('../config-provider/context.js');
require('lodash');
require('../../chunks/zh_CN.js');
require('vue');
require('../../hooks/lnode.js');
require('lodash/isEmpty');
require('lodash/isFunction');
require('lodash/camelCase');
require('../../hooks/render-lnode.js');
require('../tooltip/index.js');
require('../../utils/map-props.js');
require('../../utils/with-install.js');
require('../../config.js');
require('../tooltip/tooltip.js');
require('../../chunks/helper.js');
require('../popup/props.js');
require('../popup/popup.js');
require('@popperjs/core');
require('../../chunks/set-style.js');
require('../../utils/dom.js');
require('raf');
require('lodash/isString');
require('../../chunks/log.js');
require('../../chunks/_commonjsHelpers-2e6815bd.js');
require('../../utils/easing.js');
require('../config-provider/config-receiver.js');
require('lodash/mergeWith');
require('../../utils/mixins.js');
require('../popup/container.js');
require('../tooltip/props.js');
require('../dialog/index.js');
require('../dialog/dialog.js');
require('lodash/isNumber');
require('lodash/throttle');
require('../button/index.js');
require('../button/button.js');
require('../loading/index.js');
require('../loading/loading.js');
require('../../utils/transfer-dom.js');
require('../loading/props.js');
require('../loading/icon/gradient.js');
require('../../chunks/defineProperty-838e4192.js');
require('../../chunks/helper2.js');
require('../loading/plugin.js');
require('../../utils/ripple.js');
require('../button/props.js');
require('../../utils/event.js');
require('../../hooks/use-destroy-onclose.js');
require('../dialog/props.js');
require('../dialog/mixins/action.js');
require('lodash/isObject');
require('../dialog/stack.js');
require('../dialog/plugin.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var kebabCase__default = /*#__PURE__*/_interopDefaultLegacy(kebabCase);

function useVModel(value, defaultValue, onChange) {
  let eventName = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "change";
  let propName = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : "value";
  let alias = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : [];
  const {
    emit,
    vnode
  } = VueCompositionAPI.getCurrentInstance();
  const internalValue = VueCompositionAPI.ref();
  internalValue.value = defaultValue;
  const isControlled = Object.prototype.hasOwnProperty.call(vnode.componentOptions.propsData, propName) || Object.prototype.hasOwnProperty.call(vnode.componentOptions.propsData, kebabCase__default["default"](propName));
  if (isControlled) {
    return [value, function (newValue) {
      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        args[_key - 1] = arguments[_key];
      }
      emit === null || emit === void 0 ? void 0 : emit("input", newValue, ...args);
      onChange === null || onChange === void 0 ? void 0 : onChange(newValue, ...args);
      if (eventName && eventName !== "input") emit === null || emit === void 0 ? void 0 : emit(eventName, newValue, ...args);
    }];
  }
  for (let i = 0, len = alias.length; i < len; i++) {
    const item = alias[i];
    if (Object.prototype.hasOwnProperty.call(vnode.componentOptions.propsData, item.propName)) {
      return [item.value, function (newValue) {
        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
          args[_key2 - 1] = arguments[_key2];
        }
        emit === null || emit === void 0 ? void 0 : emit(`update:${item.propName}`, newValue, ...args);
        onChange === null || onChange === void 0 ? void 0 : onChange(newValue, ...args);
        if (item.eventName && item.eventName !== "input") emit === null || emit === void 0 ? void 0 : emit(item.eventName, newValue, ...args);
      }];
    }
  }
  return [internalValue, function (newValue) {
    internalValue.value = newValue;
    for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
      args[_key3 - 1] = arguments[_key3];
    }
    onChange === null || onChange === void 0 ? void 0 : onChange(newValue, ...args);
    if (eventName && eventName !== "input") emit === null || emit === void 0 ? void 0 : emit(eventName, newValue, ...args);
  }];
}

var _ImageViewer = VueCompositionAPI.defineComponent({
  name: "LImageViewer",
  model: {
    prop: "visible",
    event: "change"
  },
  props: {
    ...components_imageViewer_props["default"]
  },
  setup(props2, _ref) {
    let {
      emit
    } = _ref;
    const classPrefix = hooks_useConfig.usePrefixClass();
    const COMPONENT_NAME = hooks_useConfig.usePrefixClass("image-viewer");
    const isExpand = VueCompositionAPI.ref(false);
    const showOverlayValue = VueCompositionAPI.computed(() => components_imageViewer_utils.getOverlay(props2));
    const {
      index,
      visible
    } = VueCompositionAPI.toRefs(props2);
    const [indexValue, setIndexValue] = hooks_useDefaultValue["default"](index, props2.defaultIndex ?? 0, props2.onIndexChange, "index", "index-change");
    const [visibleValue, setVisibleValue] = useVModel(visible, props2.defaultVisible, () => {}, "change", "visible");
    const rootClass = VueCompositionAPI.computed(() => [`${COMPONENT_NAME.value}`]);
    const wrapClass = VueCompositionAPI.computed(() => [`${COMPONENT_NAME.value}-preview-image`, {
      [`${classPrefix.value}-is-hide`]: !visibleValue.value
    }]);
    const headerClass = VueCompositionAPI.computed(() => [`${classPrefix.value}-image-viewer__modal-header`, {
      [`${classPrefix.value}-is-show`]: isExpand.value
    }]);
    const zIndexValue = VueCompositionAPI.computed(() => props2.zIndex ?? 2600);
    const toggleExpand = () => {
      isExpand.value = !isExpand.value;
    };
    const {
      mirror,
      onMirror,
      resetMirror
    } = components_imageViewer_hooks_index.useMirror();
    const {
      scale,
      onZoomIn,
      onZoomOut,
      resetScale
    } = components_imageViewer_hooks_index.useScale(props2.imageScale);
    const {
      rotate,
      onRotate,
      resetRotate
    } = components_imageViewer_hooks_index.useRotate();
    const onRest = () => {
      resetMirror();
      resetScale();
      resetRotate();
    };
    const imagesList = VueCompositionAPI.computed(() => components_imageViewer_utils.formatImages(props2.images));
    const currentImage = VueCompositionAPI.computed(() => imagesList.value[indexValue.value] ?? {
      mainImage: ""
    });
    const prevImage = () => {
      const newIndex = indexValue.value - 1;
      setIndexValue(newIndex < 0 ? 0 : newIndex, {
        trigger: "prev"
      });
    };
    const nextImage = () => {
      const newIndex = indexValue.value + 1;
      setIndexValue(newIndex >= imagesList.value.length ? indexValue.value : newIndex, {
        trigger: "next"
      });
    };
    const onImgClick = i => {
      setIndexValue(i, {
        trigger: i > indexValue.value ? "next" : "prev"
      });
    };
    const openHandler = () => {
      setVisibleValue(true);
    };
    const onCloseHandle = ctx => {
      var _props2$onClose;
      setVisibleValue(false);
      (_props2$onClose = props2.onClose) === null || _props2$onClose === void 0 ? void 0 : _props2$onClose.call(props2, ctx);
      emit("close", ctx);
    };
    const closeBtnAction = e => {
      onCloseHandle({
        e,
        trigger: "close-btn"
      });
    };
    const clickOverlayHandler = e => {
      if (props2.closeOnOverlay) onCloseHandle({
        e,
        trigger: "overlay"
      });
    };
    const keydownHandler = e => {
      switch (e.code) {
        case components_imageViewer_const.EVENT_CODE.left:
          prevImage();
          break;
        case components_imageViewer_const.EVENT_CODE.right:
          nextImage();
          break;
        case components_imageViewer_const.EVENT_CODE.up:
          onZoomIn();
          break;
        case components_imageViewer_const.EVENT_CODE.down:
          onZoomOut();
          break;
        case components_imageViewer_const.EVENT_CODE.esc:
          onCloseHandle({
            e,
            trigger: "esc"
          });
          break;
      }
    };
    const containerRef = VueCompositionAPI.ref();
    const mountContent = () => {
      if (containerRef.value) containerRef.value.mountContent();
    };
    const unmountContent = () => {
      if (containerRef.value) containerRef.value.unmountContent();
    };
    VueCompositionAPI.watch(() => visibleValue.value, val => {
      if (val) {
        window.addEventListener("keydown", keydownHandler);
        mountContent();
        return;
      }
      window.removeEventListener("keydown", keydownHandler);
      unmountContent();
    });
    const onWheel = e => {
      e.preventDefault();
      const {
        deltaY,
        ctrlKey
      } = e;
      if (ctrlKey) return deltaY > 0 ? onZoomOut() : onZoomIn();
      deltaY > 0 ? onZoomIn() : onZoomOut();
    };
    const transStyle = VueCompositionAPI.computed(() => utils_helper.setTransform(`translateX(-${indexValue.value * 84}px)`));
    const isMultipleImg = VueCompositionAPI.computed(() => imagesList.value.length > 1);
    return {
      COMPONENT_NAME,
      rootClass,
      classPrefix,
      prevImage,
      nextImage,
      zIndexValue,
      visibleValue,
      indexValue,
      imagesList,
      showOverlayValue,
      wrapClass,
      rotate,
      mirror,
      currentImage,
      onRotate,
      onZoomIn,
      onZoomOut,
      onMirror,
      onRest,
      openHandler,
      onCloseHandle,
      onWheel,
      clickOverlayHandler,
      headerClass,
      toggleExpand,
      transStyle,
      onImgClick,
      closeBtnAction,
      scale,
      isMultipleImg,
      containerRef
    };
  },
  methods: {
    renderHeader() {
      const h = this.$createElement;
      return h("div", {
        "class": this.headerClass
      }, [h(components_imageViewer_base_ImageModalIcon["default"], {
        "attrs": {
          "icon": () => h(iconsVue.ChevronDownIcon, {
            "attrs": {
              "size": "20px"
            }
          }),
          "clickHandler": this.toggleExpand
        },
        "class": `${this.COMPONENT_NAME}__header-pre-bt`
      }), h("div", {
        "class": `${this.COMPONENT_NAME}__header-prev`
      }, [h("div", {
        "class": `${this.COMPONENT_NAME}__bokeh-left`
      }), h("div", {
        "class": `${this.COMPONENT_NAME}__bokeh-right`
      }), h("div", {
        "class": `${this.COMPONENT_NAME}__header-trans`,
        "style": this.transStyle
      }, [this.imagesList.map((image, index) => h("div", {
        "key": index,
        "class": [`${this.COMPONENT_NAME}__header-box`, {
          [`${this.classPrefix}-is-active`]: index === this.indexValue
        }]
      }, [h("img", {
        "attrs": {
          "alt": "",
          "src": image.thumbnail || image.mainImage
        },
        "class": `${this.COMPONENT_NAME}__header-img`,
        "on": {
          "click": () => this.onImgClick(index)
        }
      })]))])])]);
    },
    renderNavigationArrow(type) {
      const h = this.$createElement;
      const rotateDeg = type === "prev" ? 0 : 180;
      const icon = utils_renderNode.renderLNodeJSX(this, "navigationArrow", h(iconsVue.ChevronLeftIcon, {
        "style": utils_helper.setTransform(`rotate(${rotateDeg}deg)`),
        "attrs": {
          "size": "24px"
        }
      }));
      return h(components_imageViewer_base_ImageModalIcon["default"], {
        "class": `${this.COMPONENT_NAME}__modal-${type}-bt`,
        "attrs": {
          "clickHandler": type === "prev" ? this.prevImage : this.nextImage,
          "icon": () => icon
        }
      });
    },
    renderModal() {
      const h = this.$createElement;
      return h(components_imageViewer_base_ImageViewerModal["default"], {
        "attrs": {
          "zIndex": this.zIndexValue,
          "visible": this.visibleValue,
          "index": this.indexValue,
          "images": this.imagesList,
          "scale": this.scale,
          "rotate": this.rotate,
          "mirror": this.mirror,
          "currentImage": this.currentImage,
          "rotateHandler": this.onRotate,
          "zoomInHandler": this.onZoomIn,
          "zoomOutHandler": this.onZoomOut,
          "mirrorHandler": this.onMirror,
          "resetHandler": this.onRest,
          "closeHandler": this.onCloseHandle,
          "draggable": this.draggable,
          "showOverlay": this.showOverlayValue,
          "closeBtn": this.closeBtn
        }
      });
    },
    renderViewer() {
      const h = this.$createElement;
      return h("div", {
        "class": this.wrapClass,
        "style": {
          zIndex: this.zIndexValue
        },
        "on": {
          "wheel": this.onWheel
        }
      }, [!!this.showOverlayValue && h("div", {
        "class": `${this.COMPONENT_NAME}__modal-mask`,
        "on": {
          "click": this.clickOverlayHandler
        }
      }), this.isMultipleImg && this.renderHeader(), this.isMultipleImg && this.renderNavigationArrow("prev"), this.isMultipleImg && this.renderNavigationArrow("next"), this.isMultipleImg && h("div", {
        "class": `${this.COMPONENT_NAME}__modal-index`
      }, [utils_renderNode.renderLNodeJSX(this, "title"), `${this.indexValue + 1}/${this.imagesList.length}`]), h("div", {
        "class": [`${this.COMPONENT_NAME}__modal-icon`, `${this.COMPONENT_NAME}__modal-close-bt`],
        "on": {
          "click": this.closeBtnAction
        }
      }, [utils_renderNode.renderLNodeJSX(this, "closeBtn", h(iconsVue.CloseIcon, {
        "attrs": {
          "size": "24px"
        }
      }))]), h(components_imageViewer_base_ImageViewerUtils["default"], {
        "attrs": {
          "zoomInHandler": this.onZoomIn,
          "zoomOutHandler": this.onZoomOut,
          "mirrorHandler": this.onMirror,
          "resetHandler": this.onRest,
          "rotateHandler": this.onRotate,
          "scale": this.scale,
          "currentImage": this.currentImage
        }
      }), h(components_imageViewer_base_ImageItem["default"], {
        "attrs": {
          "scale": this.scale,
          "rotate": this.rotate,
          "mirror": this.mirror,
          "src": this.currentImage.mainImage,
          "placementSrc": this.currentImage.thumbnail
        }
      })]);
    }
  },
  render() {
    const h = arguments[0];
    return h(components_imageViewer_base_Container["default"], {
      "ref": "containerRef",
      "attrs": {
        "mode": this.mode,
        "renderModal": this.renderModal,
        "renderViewer": this.renderViewer
      }
    }, [utils_renderNode.renderLNodeJSX(this, "trigger", {
      params: {
        open: this.openHandler
      }
    })]);
  }
});

exports["default"] = _ImageViewer;
//# sourceMappingURL=image-viewer.js.map
