"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const comp = require("../../ui/src/comp.js");
require("../../../../@vxe-ui/core/es/index.esm.js");
const util = require("./util.js");
const XEUtils = require("xe-utils");
const image = require("./image.js");
const config = require("../../../../@vxe-ui/core/es/src/config.js");
const useFns = require("../../../../@vxe-ui/core/es/src/useFns.js");
const event = require("../../../../@vxe-ui/core/es/src/event.js");
const VxeImageGroupComponent = comp.defineVxeComponent({
  name: "VxeImageGroup",
  props: {
    urlList: [Array, String],
    showPreview: {
      type: Boolean,
      default: () => config.getConfig().imageGroup.showPreview
    },
    imageStyle: Object,
    zIndex: Number,
    size: {
      type: String,
      default: () => config.getConfig().imageGroup.size || config.getConfig().size
    },
    toolbarConfig: Object,
    showPrintButton: {
      type: Boolean,
      default: () => config.getConfig().imageGroup.showPrintButton
    },
    showDownloadButton: {
      type: Boolean,
      default: () => config.getConfig().imageGroup.showDownloadButton
    },
    getThumbnailUrlMethod: Function
  },
  emits: [
    "click",
    "change",
    "rotate"
  ],
  setup(props, context) {
    const { emit } = context;
    const xID = XEUtils.uniqueId();
    const { computeSize } = useFns.useSize(props);
    const computeImgList = vue.computed(() => {
      const { urlList } = props;
      if (urlList) {
        return (XEUtils.isArray(urlList) ? urlList : [urlList]).map((item) => {
          if (XEUtils.isString(item)) {
            return {
              url: item,
              alt: ""
            };
          }
          return {
            url: item.url,
            alt: item.alt
          };
        });
      }
      return [];
    });
    const computeImgStyleOpts = vue.computed(() => {
      return Object.assign({}, config.getConfig().imageGroup.imageStyle, props.imageStyle);
    });
    const computeGetThumbnailUrlMethod = vue.computed(() => {
      return props.getThumbnailUrlMethod || config.getConfig().imageGroup.getThumbnailUrlMethod;
    });
    const computeMaps = {
      computeSize
    };
    const $xeImageGroup = {
      xID,
      props,
      context,
      getComputeMaps: () => computeMaps
    };
    const imageGroupMethods = {
      dispatchEvent(type, params, evnt) {
        emit(type, event.createEvent(evnt, { $imageGroup: $xeImageGroup }, params));
      }
    };
    const imageGroupPrivateMethods = {
      handleClickImgEvent(evnt, params) {
        const { showPreview, toolbarConfig, showPrintButton, showDownloadButton, zIndex } = props;
        const { url } = params;
        const imgList = computeImgList.value;
        if (showPreview && url) {
          util.openPreviewImage({
            activeIndex: Math.max(0, XEUtils.findIndexOf(imgList, (item) => item.url === url)),
            urlList: imgList,
            toolbarConfig,
            showPrintButton,
            showDownloadButton,
            zIndex,
            events: {
              change(eventParams) {
                $xeImageGroup.dispatchEvent("change", eventParams, eventParams.$event);
              },
              rotate(eventParams) {
                $xeImageGroup.dispatchEvent("rotate", eventParams, eventParams.$event);
              }
            }
          });
        }
        $xeImageGroup.dispatchEvent("click", { url, urlList: imgList }, evnt);
      }
    };
    Object.assign($xeImageGroup, imageGroupMethods, imageGroupPrivateMethods);
    const renderVN = () => {
      const imgList = computeImgList.value;
      const vSize = computeSize.value;
      const imgStyleOpts = computeImgStyleOpts.value;
      const getThumbnailUrlMethod = computeGetThumbnailUrlMethod.value;
      return vue.h("div", {
        class: ["vxe-image-group", {
          [`size--${vSize}`]: vSize
        }]
      }, imgList ? imgList.map((item, index) => {
        return vue.h(image.default, {
          key: index,
          src: item.url,
          alt: item.alt,
          width: imgStyleOpts.width,
          height: imgStyleOpts.height,
          getThumbnailUrlMethod
        });
      }) : []);
    };
    $xeImageGroup.renderVN = renderVN;
    vue.provide("$xeImageGroup", $xeImageGroup);
    return $xeImageGroup;
  },
  render() {
    return this.renderVN();
  }
});
exports.default = VxeImageGroupComponent;
