'use strict';

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

var vue = require('vue');
var core = require('@vueuse/core');
require('../../../hooks/index.js');
var index$3 = require('../../icon/index.js');
var iconsVue = require('@element-plus/icons-vue');
var imageViewer = require('./image-viewer.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-locale/index.js');
var index$1 = require('../../../hooks/use-namespace/index.js');
var index$2 = require('../../../hooks/use-z-index/index.js');

const _hoisted_1 = ["src"];
const __default__ = {
  name: "PsImageViewer"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: imageViewer.imageViewerProps,
  setup(__props) {
    const props = __props;
    const Mode = {
      CONTAIN: {
        name: "contain",
        icon: vue.markRaw(iconsVue.FullScreen)
      },
      ORIGINAL: {
        name: "original",
        icon: vue.markRaw(iconsVue.ScaleToOriginal)
      }
    };
    const { t } = index.useLocale();
    const ns = index$1.useNamespace("image-viewer");
    const { nextZIndex } = index$2.useZIndex();
    const wrapper = vue.ref();
    const imgRefs = vue.ref([]);
    const index$4 = vue.ref(props.initialIndex);
    const mode = vue.ref(Mode.CONTAIN);
    const transform = vue.ref({
      scale: 1,
      deg: 0,
      offsetX: 0,
      offsetY: 0,
      enableTransition: false
    });
    const isSingle = vue.computed(() => {
      const { urlList } = props;
      return urlList.length <= 1;
    });
    const isFirst = vue.computed(() => {
      return index$4.value === 0;
    });
    const isLast = vue.computed(() => {
      return index$4.value === props.urlList.length - 1;
    });
    const imgStyle = vue.computed(() => {
      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value;
      let translateX = offsetX / scale;
      let translateY = offsetY / scale;
      switch (deg % 360) {
        case 90:
        case -270:
          ;
          [translateX, translateY] = [translateY, -translateX];
          break;
        case 180:
        case -180:
          ;
          [translateX, translateY] = [-translateX, -translateY];
          break;
        case 270:
        case -90:
          ;
          [translateX, translateY] = [-translateY, translateX];
          break;
      }
      const style = {
        transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,
        transition: enableTransition ? "transform .3s" : ""
      };
      if (mode.value.name === Mode.CONTAIN.name) {
        style.maxWidth = style.maxHeight = "100%";
      }
      return style;
    });
    const computedZIndex = vue.computed(() => {
      return core.isNumber(props.zIndex) ? props.zIndex : nextZIndex();
    });
    vue.onMounted(() => {
      var _a, _b;
      (_b = (_a = wrapper.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        ref_key: "wrapper",
        ref: wrapper,
        tabindex: -1,
        class: vue.normalizeClass(vue.unref(ns).e("wrapper")),
        style: vue.normalizeStyle({ zIndex: vue.unref(computedZIndex) })
      }, [
        vue.createElementVNode("div", {
          class: vue.normalizeClass(vue.unref(ns).e("mask"))
        }, null, 2),
        vue.createCommentVNode(" CLOSE "),
        vue.createElementVNode("span", {
          class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("close")])
        }, [
          vue.createVNode(vue.unref(index$3.PsIcon), null, {
            default: vue.withCtx(() => [
              vue.createVNode(vue.unref(iconsVue.Close))
            ]),
            _: 1
          })
        ], 2),
        vue.createCommentVNode(" ARROW "),
        !vue.unref(isSingle) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
          vue.createElementVNode("span", {
            class: vue.normalizeClass([
              vue.unref(ns).e("btn"),
              vue.unref(ns).e("prev"),
              vue.unref(ns).is("disabled", !_ctx.infinite && vue.unref(isFirst))
            ])
          }, [
            vue.createVNode(vue.unref(index$3.PsIcon), null, {
              default: vue.withCtx(() => [
                vue.createVNode(vue.unref(iconsVue.ArrowLeft))
              ]),
              _: 1
            })
          ], 2),
          vue.createElementVNode("span", {
            class: vue.normalizeClass([
              vue.unref(ns).e("btn"),
              vue.unref(ns).e("next"),
              vue.unref(ns).is("disabled", !_ctx.infinite && vue.unref(isLast))
            ])
          }, [
            vue.createVNode(vue.unref(index$3.PsIcon), null, {
              default: vue.withCtx(() => [
                vue.createVNode(vue.unref(iconsVue.ArrowRight))
              ]),
              _: 1
            })
          ], 2)
        ], 64)) : vue.createCommentVNode("v-if", true),
        vue.createCommentVNode(" ACTIONS "),
        vue.createElementVNode("div", {
          class: vue.normalizeClass([vue.unref(ns).e("btn"), vue.unref(ns).e("actions")])
        }, [
          vue.createElementVNode("div", {
            class: vue.normalizeClass(vue.unref(ns).e("actions__inner"))
          }, [
            vue.createVNode(vue.unref(index$3.PsIcon), null, {
              default: vue.withCtx(() => [
                vue.createVNode(vue.unref(iconsVue.ZoomOut))
              ]),
              _: 1
            }),
            vue.createVNode(vue.unref(index$3.PsIcon), null, {
              default: vue.withCtx(() => [
                vue.createVNode(vue.unref(iconsVue.ZoomIn))
              ]),
              _: 1
            }),
            vue.createElementVNode("i", {
              class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
            }, null, 2),
            vue.createVNode(vue.unref(index$3.PsIcon), null, {
              default: vue.withCtx(() => [
                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(mode.value.icon)))
              ]),
              _: 1
            }),
            vue.createElementVNode("i", {
              class: vue.normalizeClass(vue.unref(ns).e("actions__divider"))
            }, null, 2),
            vue.createVNode(vue.unref(index$3.PsIcon), null, {
              default: vue.withCtx(() => [
                vue.createVNode(vue.unref(iconsVue.RefreshLeft))
              ]),
              _: 1
            }),
            vue.createVNode(vue.unref(index$3.PsIcon), null, {
              default: vue.withCtx(() => [
                vue.createVNode(vue.unref(iconsVue.RefreshRight))
              ]),
              _: 1
            })
          ], 2)
        ], 2),
        vue.createCommentVNode(" CANVAS "),
        vue.createElementVNode("div", {
          class: vue.normalizeClass(vue.unref(ns).e("canvas"))
        }, [
          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.urlList, (url, i) => {
            return vue.withDirectives((vue.openBlock(), vue.createElementBlock("img", {
              ref_for: true,
              ref: (el) => imgRefs.value[i] = el,
              key: url,
              src: url,
              style: vue.normalizeStyle(vue.unref(imgStyle)),
              class: vue.normalizeClass(vue.unref(ns).e("img"))
            }, null, 14, _hoisted_1)), [
              [vue.vShow, i === index$4.value]
            ]);
          }), 128))
        ], 2),
        vue.renderSlot(_ctx.$slots, "default")
      ], 6);
    };
  }
});
var ImageViewer = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "/Users/meng/workspace/element-ps/packages/components/image-viewer/src/image-viewer.vue"]]);

exports["default"] = ImageViewer;
//# sourceMappingURL=image-viewer2.js.map
