import { defineComponent, ref, useModel, watch, openBlock, createElementBlock, normalizeStyle, createBlock, unref, withCtx, createVNode, createCommentVNode, withDirectives, mergeProps, renderSlot, createElementVNode, vShow, mergeModels } from 'vue';
import { MeImageViewer } from '../../image-viewer/index.mjs';
import { Picture } from '@element-plus/icons-vue';
import { ElSkeleton, ElSkeletonItem, ElImage, ElIcon } from 'element-plus';

"use strict";
const _hoisted_1 = { style: { "display": "flex", "align-items": "center", "justify-content": "center", "height": "100%", "font-size": "1rem" } };
const __default__ = defineComponent({
  name: "me-resource-image"
});
var script = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: /* @__PURE__ */ 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 = ref("");
    const imgShow = ref(false);
    const isError = ref(false);
    const data = useModel(__props, "modelValue");
    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 openBlock(), createElementBlock(
        "div",
        {
          class: "me-resource-image",
          style: normalizeStyle([{ width: props.width + "px", height: props.height + "px" }, __props.style])
        },
        [
          !imgShow.value && !isError.value ? (openBlock(), createBlock(unref(ElSkeleton), {
            key: 0,
            animated: ""
          }, {
            template: withCtx(() => [
              createVNode(unref(ElSkeletonItem), {
                variant: "image",
                style: normalizeStyle([{ width: props.width + "px", height: props.height + "px" }])
              }, null, 8, ["style"])
            ]),
            _: 1
            /* STABLE */
          })) : createCommentVNode("v-if", true),
          withDirectives(createVNode(unref(ElImage), 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 && unref(MeImageViewer)(imgUrl.value))
          }), {
            error: withCtx(() => [
              renderSlot(_ctx.$slots, "error", {}, () => [
                createElementVNode("div", _hoisted_1, [
                  createVNode(unref(ElIcon), null, {
                    default: withCtx(() => [
                      createVNode(unref(Picture))
                    ]),
                    _: 1
                    /* STABLE */
                  })
                ])
              ])
            ]),
            _: 3
            /* FORWARDED */
          }, 16, ["style", "src"]), [
            [vShow, imgShow.value || isError.value]
          ])
        ],
        4
        /* STYLE */
      );
    };
  }
});

export { script as default };
//# sourceMappingURL=resource-image.vue2.mjs.map
