'use strict';

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

var vue = require('vue');
var index = require('../../image-viewer/index.js');
var iconsVue = require('@element-plus/icons-vue');
var elementPlus = require('element-plus');

"use strict";
const _hoisted_1 = { style: { "display": "flex", "align-items": "center", "justify-content": "center", "height": "100%", "font-size": "1rem" } };
const __default__ = vue.defineComponent({
  name: "me-resource-image"
});
var script = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: /* @__PURE__ */ vue.mergeModels({
    request: { type: Function, required: false },
    width: { type: Number, required: false, default: 100 },
    height: { type: Number, required: false, default: 100 },
    preview: { type: Boolean, required: false, default: false },
    style: { type: [String, Object], required: false }
  }, {
    "modelValue": { type: String },
    "modelModifiers": {}
  }),
  emits: ["update:modelValue"],
  setup(__props) {
    const props = __props;
    const imgUrl = vue.ref("");
    const imgShow = vue.ref(false);
    const isError = vue.ref(false);
    const data = vue.useModel(__props, "modelValue");
    vue.watch(
      () => data.value,
      (value) => {
        if (value) {
          if (isUrl(value)) {
            imgUrl.value = data.value || "";
          } else {
            if (props.request) {
              props.request({ id: data.value }).then((res) => {
                if (res.code != 0) {
                  isError.value = true;
                } else {
                  isError.value = false;
                  imgUrl.value = res.data[0].url;
                }
              }).catch(() => {
                isError.value = true;
              });
            } else {
              isError.value = true;
            }
          }
        } else {
          isError.value = true;
        }
      },
      { immediate: true }
    );
    const numberToStyle = (num) => {
      return num.toString() + "px";
    };
    function isUrl(url) {
      try {
        new URL(url);
        return true;
      } catch (err) {
        return false;
      }
    }
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          class: "me-resource-image",
          style: vue.normalizeStyle([{ width: props.width + "px", height: props.height + "px" }, __props.style])
        },
        [
          !imgShow.value && !isError.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElSkeleton), {
            key: 0,
            animated: ""
          }, {
            template: vue.withCtx(() => [
              vue.createVNode(vue.unref(elementPlus.ElSkeletonItem), {
                variant: "image",
                style: vue.normalizeStyle([{ width: props.width + "px", height: props.height + "px" }])
              }, null, 8, ["style"])
            ]),
            _: 1
            /* STABLE */
          })) : vue.createCommentVNode("v-if", true),
          vue.withDirectives(vue.createVNode(vue.unref(elementPlus.ElImage), vue.mergeProps({
            style: [{ "width": "100%", "height": "100%" }, [{ cursor: __props.preview ? "zoom-in" : "default" }]],
            src: imgUrl.value,
            fit: "cover",
            onLoad: _cache[0] || (_cache[0] = ($event) => imgShow.value = true),
            onError: _cache[1] || (_cache[1] = ($event) => isError.value = true)
          }, _ctx.$attrs, {
            onClick: _cache[2] || (_cache[2] = ($event) => __props.preview && vue.unref(index.MeImageViewer)(imgUrl.value))
          }), {
            error: vue.withCtx(() => [
              vue.renderSlot(_ctx.$slots, "error", {}, () => [
                vue.createElementVNode("div", _hoisted_1, [
                  vue.createVNode(vue.unref(elementPlus.ElIcon), null, {
                    default: vue.withCtx(() => [
                      vue.createVNode(vue.unref(iconsVue.Picture))
                    ]),
                    _: 1
                    /* STABLE */
                  })
                ])
              ])
            ]),
            _: 3
            /* FORWARDED */
          }, 16, ["style", "src"]), [
            [vue.vShow, imgShow.value || isError.value]
          ])
        ],
        4
        /* STYLE */
      );
    };
  }
});

exports.default = script;
//# sourceMappingURL=resource-image.vue2.js.map
