'use strict';

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

var vue = require('vue');
require('../../../utils/index.js');
var image = require('./image.js');
var lodashEs = require('lodash-es');
var createNamespace = require('../../../utils/create-namespace.js');

"use strict";
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{
    name: "LlImage",
    inheritAttrs: false
  },
  __name: "image",
  props: image.imageProps,
  setup(__props) {
    const attrs = vue.useAttrs();
    const props = __props;
    const bem = createNamespace.createNamespace("image");
    const containerAttrs = vue.computed(() => ({
      class: attrs.class,
      style: attrs.style
    }));
    const componentAttrs = vue.computed(() => {
      return lodashEs.omit(attrs, ["class", "style"]);
    });
    const computedFallback = vue.computed(
      () => props.fallback ? props.fallback : image.FALL_BACK_IMG
    );
    const getImageClass = vue.computed(() => {
      const borderClass = props.isShowBorder ? bem.m("border") : "";
      return `${borderClass}`;
    });
    const getImageStyle = vue.computed(() => {
      return { borderRadius: props.borderRadius, overflow: "hidden" };
    });
    const getSrc = vue.computed(() => {
      return props.src ? props.src : image.FALL_BACK_IMG;
    });
    return (_ctx, _cache) => {
      const _component_ll_icon = vue.resolveComponent("ll-icon");
      const _component_a_image = vue.resolveComponent("a-image");
      const _component_ll_watermark = vue.resolveComponent("ll-watermark");
      return vue.openBlock(), vue.createElementBlock(
        "div",
        vue.mergeProps({ style: { display: "inline-flex" } }, containerAttrs.value),
        [
          vue.createCommentVNode(" \u652F\u6301\u6C34\u5370 "),
          (Array.isArray(_ctx.content) ? _ctx.content.length > 0 : _ctx.content) ? (vue.openBlock(), vue.createBlock(_component_ll_watermark, vue.mergeProps({
            key: 0,
            class: `${vue.unref(bem).b("watermark")}`
          }, componentAttrs.value, {
            style: getImageStyle.value,
            content: props.content,
            width: props.watermarkWidth,
            height: props.watermarkHeight,
            "z-index": 100
          }), {
            default: vue.withCtx(() => [
              vue.createElementVNode(
                "div",
                {
                  class: vue.normalizeClass([
                    vue.unref(bem).b("container"),
                    _ctx.$slots.previewMask ? "" : vue.unref(bem).is("no-preview-mask"),
                    getImageClass.value
                  ]),
                  style: vue.normalizeStyle(getImageStyle.value)
                },
                [
                  vue.createVNode(_component_a_image, vue.mergeProps({
                    class: `${vue.unref(bem).b()}`,
                    style: { "object-fit": props.objectFit }
                  }, props, {
                    src: getSrc.value,
                    fallback: computedFallback.value
                  }), {
                    placeholder: vue.withCtx(() => [
                      vue.renderSlot(_ctx.$slots, "placeholder")
                    ]),
                    previewMask: vue.withCtx(() => [
                      vue.renderSlot(_ctx.$slots, "previewMask", {}, () => [
                        vue.createElementVNode(
                          "div",
                          {
                            class: vue.normalizeClass(vue.unref(bem).e("preview-mask")),
                            style: vue.normalizeStyle({ background: props.maskColor })
                          },
                          [
                            vue.renderSlot(_ctx.$slots, "previewMaskContent", {}, () => [
                              vue.createVNode(_component_ll_icon, {
                                class: vue.normalizeClass(vue.unref(bem).e("preview-icon")),
                                "icon-name": props.previewIcon,
                                size: props.iconSize
                              }, null, 8, ["class", "icon-name", "size"])
                            ])
                          ],
                          6
                          /* CLASS, STYLE */
                        )
                      ])
                    ]),
                    _: 3
                    /* FORWARDED */
                  }, 16, ["class", "style", "src", "fallback"])
                ],
                6
                /* CLASS, STYLE */
              )
            ]),
            _: 3
            /* FORWARDED */
          }, 16, ["class", "style", "content", "width", "height"])) : (vue.openBlock(), vue.createElementBlock(
            vue.Fragment,
            { key: 1 },
            [
              vue.createCommentVNode(" \u9ED8\u8BA4\u7684\u56FE\u7247\u5C55\u793A "),
              vue.createElementVNode(
                "div",
                {
                  class: vue.normalizeClass([
                    vue.unref(bem).b("container"),
                    _ctx.$slots.previewMask ? "" : vue.unref(bem).is("no-preview-mask"),
                    getImageClass.value
                  ]),
                  style: vue.normalizeStyle(getImageStyle.value)
                },
                [
                  vue.createVNode(_component_a_image, vue.mergeProps({
                    class: `${vue.unref(bem).b()}`,
                    style: { "object-fit": props.objectFit }
                  }, props, {
                    src: getSrc.value,
                    fallback: computedFallback.value
                  }), {
                    placeholder: vue.withCtx(() => [
                      vue.renderSlot(_ctx.$slots, "placeholder")
                    ]),
                    previewMask: vue.withCtx(() => [
                      vue.renderSlot(_ctx.$slots, "previewMask", {}, () => [
                        vue.createElementVNode(
                          "div",
                          {
                            class: vue.normalizeClass(vue.unref(bem).e("preview-mask")),
                            style: vue.normalizeStyle({ background: props.maskColor })
                          },
                          [
                            vue.renderSlot(_ctx.$slots, "previewMaskContent", {}, () => [
                              vue.createVNode(_component_ll_icon, {
                                class: vue.normalizeClass(vue.unref(bem).e("preview-icon")),
                                "icon-name": props.previewIcon,
                                size: props.iconSize
                              }, null, 8, ["class", "icon-name", "size"])
                            ])
                          ],
                          6
                          /* CLASS, STYLE */
                        )
                      ])
                    ]),
                    _: 3
                    /* FORWARDED */
                  }, 16, ["class", "style", "src", "fallback"])
                ],
                6
                /* CLASS, STYLE */
              )
            ],
            64
            /* STABLE_FRAGMENT */
          ))
        ],
        16
        /* FULL_PROPS */
      );
    };
  }
});

exports.default = _sfc_main;
//# sourceMappingURL=image.vue2.js.map
