import { defineComponent, ref, onMounted, watch, openBlock, createElementBlock, withModifiers, createElementVNode, normalizeClass, unref } from "vue";
import "../../../../adapter-vue.mjs";
import { isPC } from "../../../../utils/env.mjs";
import { handleSkeletonSize } from "../../utils/utils.mjs";
const _hoisted_1 = ["src", "width", "height"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "message-image",
  props: {
    content: { default: () => ({}) },
    messageItem: { default: () => ({}) }
  },
  emits: ["previewImage"],
  setup(__props, { emit: __emit }) {
    const emits = __emit;
    const props = __props;
    const skeletonDomRef = ref();
    onMounted(() => {
      var _a, _b, _c;
      if (((_a = props.messageItem) == null ? void 0 : _a.status) === "success" || ((_b = props.messageItem) == null ? void 0 : _b.status) === "fail" || ((_c = props.messageItem) == null ? void 0 : _c.progress) === 1) {
        autoFixSkeletonSize();
      }
    });
    watch(
      () => props.content.height,
      (newVal, oldVal) => {
        if (newVal > oldVal) {
          autoFixSkeletonSize();
        }
      }
    );
    function autoFixSkeletonSize() {
      var _a, _b, _c;
      const { width = 0, height = 0 } = props.content;
      if (width === 0 || height === 0) return;
      const containerWidth = ((_a = document.getElementById("app")) == null ? void 0 : _a.clientWidth) || 0;
      const max = !isPC ? Math.min(containerWidth - 180, 300) : 300;
      const size = handleSkeletonSize(width, height, max, max);
      ((_b = skeletonDomRef == null ? void 0 : skeletonDomRef.value) == null ? void 0 : _b.style) && (skeletonDomRef.value.style.width = `${size.width}px`);
      ((_c = skeletonDomRef == null ? void 0 : skeletonDomRef.value) == null ? void 0 : _c.style) && (skeletonDomRef.value.style.height = `${size.height}px`);
    }
    function toggleShow() {
      var _a, _b;
      if (((_a = props.messageItem) == null ? void 0 : _a.status) === "success" || ((_b = props.messageItem) == null ? void 0 : _b.progress) === 1) {
        emits("previewImage", props.messageItem);
      }
    }
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "skeletonDomRef",
        ref: skeletonDomRef,
        class: "image-container",
        onClick: withModifiers(toggleShow, ["self"])
      }, [
        createElementVNode("img", {
          class: normalizeClass(["message-image", !unref(isPC) && "message-image-h5"]),
          src: props.content.url,
          width: props.content.width,
          height: props.content.height
        }, null, 10, _hoisted_1)
      ], 512);
    };
  }
});
export {
  _sfc_main as default
};
