import { b as bemMixin } from "./bem.js";
import { n as normalizeComponent, an as debounce } from "./index.js";
import "vue";
var render = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("div", {
    ref: "container",
    class: _vm.bem(),
    style: _vm.positionStyle
  }, [_c("div", {
    class: _vm.bem("shell-wrap"),
    style: _vm.sizeStyle
  }, [_c("div", {
    class: _vm.bem("shell"),
    style: _vm.contentStyle
  }, [!_vm.isFlowTemplet && _vm.currentPreview ? _c("img", {
    attrs: {
      "src": _vm.currentPreview.url
    }
  }) : _vm._l(_vm.previews, function(preview) {
    return _c("img", {
      key: preview.url,
      attrs: {
        "src": preview.url
      }
    });
  })], 2)])]);
};
var staticRenderFns = [];
var static_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => '.em-editor-templet-view-static{width:100%;height:100%}.em-editor-templet-view-static__shell{font-size:0}.em-editor-templet-view-static__shell>img{width:100%}.em-editor-templet-view-static__shell-wrap{margin:0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center}body{min-width:1200px;overflow:overlay;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0)}body::-webkit-scrollbar{width:7px}body::-webkit-scrollbar-thumb{background-color:#000000b3;border:1px solid #fff;border-radius:10rem}body::-webkit-scrollbar-track-piece:start,body::-webkit-scrollbar-track-piece:end{background:transparent}ul{padding:0;list-style:none}.tofh{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[id^=HUABAN],[class^=HUABAN],[id^=ZCOOL],[class^=ZCOOL],[id^=lvye],[class^=lvye],[id^=xmt-],[class^=xmt-]{display:none!important}body>iframe[src="chrome-extension://gpdjojdkbbmdfjfahjcgigfpmkopogic/html/grid.html"],body>iframe[src="chrome-extension://gpdjojdkbbmdfjfahjcgigfpmkopogic/html/search.html"]{visibility:hidden!important;transform:translate(-10000px)!important}.eui-popup-base{z-index:2100!important}.eui-tabs__header{border-bottom-width:1px!important}.gda-btn:not(.gda-btn-sm){min-width:88px}.gda-btn>.gdaicon{font-size:20px;vertical-align:-.1em}.gda-btn svg{vertical-align:bottom}.gda-btn.disabled,.gda-btn[disabled]{cursor:default}.gda-dropdown-menu{box-shadow:0 2px 8px #00000029}.gda-dropdown-menu-item{padding:10px 12px;line-height:20px}.gda-dropdown-menu-item>.gdaicon:first-child{font-size:20px;vertical-align:bottom}.gda-dropdown-menu-item:hover,.gda-dropdown-menu-submenu-title:hover{background:#f6f7f9}.gda-dropdown-menu-item-disabled:hover,.gda-dropdown-menu-submenu-title-disabled:hover{background-color:#fff}.gda-modal-header{padding:18px 24px;border-bottom:none}.gda-modal-title{line-height:24px}.gda-modal-close-x{width:60px;height:60px;line-height:60px}.gda-modal-footer{border-top:none}.gda-form-item-label{font-weight:700}.gda-form-horizontal .gda-form-item{margin-bottom:10px}.gda-form-horizontal .gda-form-item-label{font-weight:700;line-height:48px}.gda-pagination-item,.gda-pagination-item:focus,.gda-pagination-item:hover,.gda-pagination-prev .gda-pagination-item-link,.gda-pagination-next .gda-pagination-item-link{color:#444950;background-color:#f0f3f4;border:none}.gda-pagination-item-active,.gda-pagination-item-active:focus,.gda-pagination-item-active:hover{background:#2254f4;border:none}.gda-pagination-item-active a,.gda-pagination-item-active:focus a,.gda-pagination-item-active:hover a{color:#fff}.gda-pagination-prev.gda-pagination-disabled .gda-pagination-item-link,.gda-pagination-next.gda-pagination-disabled .gda-pagination-item-link{opacity:.3}.gda-pagination-prev:focus .gda-pagination-item-link,.gda-pagination-next:focus .gda-pagination-item-link,.gda-pagination-prev:hover .gda-pagination-item-link,.gda-pagination-next:hover .gda-pagination-item-link{color:#444950}.gda-tree li,.gda-tree li:first-child,.gda-tree li:last-child{padding:0}.gda-tree-child-tree>li:first-child{padding-top:0}:root .gda-tree li span.gda-tree-switcher.gda-tree-switcher_close .gda-tree-switcher-icon,:root .gda-tree li span.gda-tree-switcher.gda-tree-switcher_open .gda-tree-switcher-icon{font-size:16px;vertical-align:-3px}.gda-tree.gda-tree-directory>li span.gda-tree-node-content-wrapper:hover:before,.gda-tree.gda-tree-directory .gda-tree-child-tree>li span.gda-tree-node-content-wrapper:hover:before{border-radius:4px}.gda-tree .gda-tree-treenode-checkbox-checked .gda-tree-checkbox-checked:after{display:none}\n')();
const __vue2_script = {
  name: "em-editor-templet-view-static",
  mixins: [bemMixin],
  props: {
    preview: {
      type: Object,
      required: true
    },
    isFlowTemplet: {
      type: Boolean,
      default: false
    },
    activedIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      positionStyle: {},
      sizeStyle: {},
      contentStyle: {}
    };
  },
  computed: {
    previews() {
      const { preview } = this;
      let previews = [];
      if (preview) {
        previews = previews.concat({
          width: preview.width,
          height: preview.height,
          url: preview.url
        }, preview.extends || []);
      }
      return previews;
    },
    currentPreview() {
      const { activedIndex, previews } = this;
      return previews[activedIndex];
    }
  },
  watch: {
    currentPreview() {
      this.calZoom();
    }
  },
  mounted() {
    this.calZoom();
    const onResize = debounce(this.calZoom, 200);
    window.addEventListener("resize", onResize);
    this.$once("hook:beforeDestroy", () => {
      window.removeEventListener("resize", onResize);
    });
  },
  methods: {
    calZoom() {
      if (!this.currentPreview)
        return;
      const { width, height } = this.currentPreview;
      const { clientWidth, clientHeight } = this.$refs.container;
      let ratio = Math.min(clientWidth / width, clientHeight / height);
      if (this.isFlowTemplet) {
        const halfContainerWidth = clientWidth / 2;
        ratio = Math.min(halfContainerWidth / width, 1);
      }
      const newWidth = width * ratio;
      const newHeight = height * ratio;
      this.sizeStyle = {
        width: newWidth + "px",
        height: newHeight + "px"
      };
      this.positionStyle = {
        paddingTop: this.isFlowTemplet ? 40 : (clientHeight - newHeight) / 2 + "px"
      };
      const contentBaseSize = newWidth === clientWidth ? newWidth : newHeight;
      const contentRatio = (contentBaseSize - 80) / contentBaseSize;
      this.contentStyle = {
        width: newWidth * contentRatio + "px",
        height: newHeight * contentRatio + "px"
      };
    }
  }
};
const __cssModules = {};
var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles, null, null, null);
function __vue2_injectStyles(context) {
  for (let o in __cssModules) {
    this[o] = __cssModules[o];
  }
}
var _static = /* @__PURE__ */ function() {
  return __component__.exports;
}();
export { _static as default };
