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

import { defineComponent, computed } from '@vue/composition-api';
import { CloseIcon } from '@ldesign/icons-vue';
import { Dialog } from '../../dialog/index.js';
import { usePrefixClass } from '../../../hooks/use-config.js';
import { useLNodeJSX } from '../../../hooks/lnode.js';
import props from '../props.js';
import TImageViewerUtils from './ImageViewerUtils.js';
import TImageItem from './ImageItem.js';
import '../../../utils/with-install.js';
import 'vue';
import 'lodash';
import '../../../config.js';
import '../../dialog/dialog.js';
import 'lodash/isNumber';
import 'lodash/throttle';
import '../../button/index.js';
import '../../button/button.js';
import '../../loading/index.js';
import '../../loading/loading.js';
import '../../../utils/dom.js';
import 'raf';
import 'lodash/isString';
import '../../../_chunks/dep-70c789e5.js';
import '../../../_chunks/dep-5210251b.js';
import '../../../utils/easing.js';
import '../../../utils/render-node.js';
import '../../../utils/transfer-dom.js';
import '../../config-provider/config-receiver.js';
import 'lodash/mergeWith';
import '../../config-provider/context.js';
import '../../../_chunks/dep-def4c2ce.js';
import '../../../utils/mixins.js';
import '../../loading/props.js';
import '../../loading/icon/gradient.js';
import '../../../_chunks/dep-eb467ddf.js';
import '../../../_chunks/dep-cf772670.js';
import '../../../_chunks/dep-47d77fc8.js';
import '../../loading/plugin.js';
import '../../../utils/ripple.js';
import '../../button/props.js';
import '../../../utils/event.js';
import '../../../utils/helper.js';
import 'lodash/camelCase';
import '../../../hooks/use-destroy-onclose.js';
import '../../dialog/props.js';
import '../../dialog/mixins/action.js';
import '../../../_chunks/dep-29915b8e.js';
import 'lodash/isObject';
import '../../dialog/stack.js';
import '../../dialog/plugin.js';
import '../../config-provider/useConfig.js';
import 'lodash/isEmpty';
import 'lodash/isFunction';
import 'lodash/kebabCase';
import '../../../hooks/render-lnode.js';
import '../../tooltip/index.js';
import '../../../utils/map-props.js';
import '../../tooltip/tooltip.js';
import '../../popup/props.js';
import '../../popup/popup.js';
import '@popperjs/core';
import '../../popup/container.js';
import '../../tooltip/props.js';
import '../utils.js';
import './ImageModalIcon.js';
import '../hooks/index.js';

const defaultProps = {
  zIndex: Number,
  visible: Boolean,
  index: Number,
  images: props.images,
  scale: Number,
  rotate: Number,
  mirror: Number,
  currentImage: {
    type: Object,
    default() {
      return {};
    }
  },
  rotateHandler: Function,
  zoomInHandler: Function,
  zoomOutHandler: Function,
  mirrorHandler: Function,
  resetHandler: Function,
  closeHandler: props.onClose,
  draggable: {
    type: Boolean,
    default: true
  },
  viewerScale: {
    type: Object,
    default() {
      return {};
    }
  },
  showOverlay: Boolean,
  closeBtn: props.closeBtn
};
var TImageViewerModal = defineComponent({
  name: "LImageViewerModal",
  props: {
    ...defaultProps
  },
  setup(props2) {
    const classPrefix = usePrefixClass();
    const renderJSX = useLNodeJSX();
    const style = computed(() => ({
      minWidth: props2.viewerScale.minWidth,
      minHeight: props2.viewerScale.minHeight
    }));
    return {
      classPrefix,
      renderJSX,
      style
    };
  },
  render() {
    const h = arguments[0];
    return h(Dialog, {
      "attrs": {
        "destroyOnClose": true,
        "visible": this.visible,
        "placement": "center",
        "mode": "modeless",
        "width": 1e3,
        "cancelBtn": null,
        "confirmBtn": null,
        "closeBtn": false,
        "draggable": this.draggable,
        "zIndex": this.zIndex,
        "showOverlay": this.showOverlay,
        "header": () => h("div", {
          "class": `${this.classPrefix}-image-viewer__mini-header`
        }, [`${this.index + 1}/${this.images.length}`, h("span", {
          "class": `${this.classPrefix}-image-viewer__mini-close`,
          "on": {
            "click": e => {
              this.closeHandler({
                e,
                trigger: "close-btn"
              });
            }
          }
        }, [this.renderJSX("closeBtn", h(CloseIcon, {
          "attrs": {
            "size": "1.5rem"
          }
        }))])]),
        "footer": () => h("div", {
          "class": `${this.classPrefix}-image-viewer-mini__footer`
        }, [h(TImageViewerUtils, {
          "attrs": {
            "zoomInHandler": this.zoomInHandler,
            "zoomOutHandler": this.zoomOutHandler,
            "scale": this.scale,
            "currentImage": this.currentImage,
            "rotateHandler": this.rotateHandler,
            "mirrorHandler": this.mirrorHandler,
            "resetHandler": this.resetHandler
          }
        })])
      },
      "on": {
        "close": this.closeHandler
      },
      "class": `${this.classPrefix}-image-viewer__dialog`
    }, [h("div", {
      "class": `${this.classPrefix}-image-viewer-mini__content`,
      "style": this.style
    }, [h(TImageItem, {
      "attrs": {
        "rotate": this.rotate,
        "scale": this.scale,
        "mirror": this.mirror,
        "src": this.currentImage.mainImage,
        "placementSrc": this.currentImage.thumbnail
      }
    })])]);
  }
});

export { TImageViewerModal as default };
//# sourceMappingURL=ImageViewerModal.js.map
