import { defineComponent, ref, computed, watch, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createCommentVNode, renderSlot, useCssVars, watchEffect, createVNode, createElementVNode, toDisplayString, render } from "vue";
import { Circle } from "vant";
const domain = "https://wlmvp-cos.weiling.cn";
const loadingPic = domain + "/frontend/weilingMobileUI/loading.png";
const loadingFailPic = domain + "/frontend/weilingMobileUI/loadingFail.png";
const loadImage = (url) => {
  return new Promise((resolve, reject) => {
    const newImg = new Image();
    newImg.src = url;
    newImg.onerror = () => {
      reject("failure");
    };
    newImg.onload = (e) => {
      resolve(e.target);
    };
  });
};
const isTencentCosPic = (url) => {
  return url.includes("wlmvp-cos.weiling.cn");
};
const isBase64 = (str) => {
  return str.indexOf("data:") != -1 && str.indexOf("base64") != -1;
};
const _hoisted_1$1 = ["src", "alt"];
const _hoisted_2$1 = ["src"];
const _hoisted_3$1 = ["src"];
var ECosType = /* @__PURE__ */ ((ECosType2) => {
  ECosType2["normal"] = "imageView2/1/q/85";
  ECosType2["thumbnail"] = "imageView2/1/w/100/h/100/q/85";
  return ECosType2;
})(ECosType || {});
const __default__$1 = {
  name: "WlPic"
};
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  ...__default__$1,
  props: {
    src: { default: "" },
    needCos: { type: Boolean, default: true },
    cosType: { default: "normal" },
    radius: { type: Boolean, default: false },
    round: { type: Boolean, default: false },
    needLoading: { type: Boolean, default: true },
    needMiddleCenter: { type: Boolean, default: true },
    needHeightAuto: { type: Boolean, default: false },
    fit: { default: "fill" }
  },
  setup(__props, { expose }) {
    const props = __props;
    const isLoading = ref(true);
    const isError = ref(false);
    const imgSrc = ref("");
    const imgWrapRef = ref("");
    const imgStyleComputed = computed(() => {
      return {
        "border-radius": props.round ? "50%" : "",
        "object-fit": props.fit
      };
    });
    const imgWrapClassComputed = computed(() => {
      return [
        "wl-img",
        "wh-full",
        "relative",
        "flex-col",
        props.needMiddleCenter ? "flex-middle-center" : ""
      ];
    });
    const onLoadImage = (url) => {
      return new Promise((resolve, reject) => {
        loadImage(url).then((elem) => {
          resolve(elem);
        }).catch((reason) => {
          reject(reason);
        }).finally(() => {
          isLoading.value = false;
        });
      });
    };
    const setImgSrc = (url) => {
      const needCos = isTencentCosPic(url) && props.needCos;
      const file_type = url.split(".").pop();
      let isSvg = file_type === "svg";
      let isBase64Bool = isBase64(url);
      if (isSvg || !needCos || isBase64Bool) {
        imgSrc.value = url;
        onLoadImage(imgSrc.value).catch(() => {
          isError.value = true;
        });
      } else {
        imgSrc.value = `${url}?${ECosType[props.cosType]}`;
        onLoadImage(imgSrc.value).catch(() => {
          imgSrc.value = url;
        });
      }
    };
    watch(
      () => props.src,
      (val) => {
        if (val) {
          isLoading.value = true;
          setImgSrc(props.src);
        }
      },
      { immediate: true }
    );
    expose({
      imgWrapRef
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(unref(imgWrapClassComputed)),
        ref_key: "imgWrapRef",
        ref: imgWrapRef
      }, [
        !isLoading.value && !isError.value ? (openBlock(), createElementBlock("img", {
          key: 0,
          src: imgSrc.value,
          style: normalizeStyle(unref(imgStyleComputed)),
          class: normalizeClass(`w-full block ${__props.needHeightAuto ? "h-auto" : "h-full"}`),
          alt: imgSrc.value
        }, null, 14, _hoisted_1$1)) : createCommentVNode("", true),
        isLoading.value && __props.needLoading ? (openBlock(), createElementBlock("img", {
          key: 1,
          src: unref(loadingPic),
          alt: "loading",
          class: "w-1/5 uno-min-w-20 uno-min-h-20 uno-max-w-60 uno-max-h-60 absolute-middle-center animate-spin"
        }, null, 8, _hoisted_2$1)) : createCommentVNode("", true),
        isError.value ? (openBlock(), createElementBlock("img", {
          key: 2,
          src: unref(loadingFailPic),
          alt: "failure",
          class: "w-1/5 uno-min-w-20 uno-min-h-20 uno-max-w-60 uno-max-h-60 absolute-middle-center"
        }, null, 8, _hoisted_3$1)) : createCommentVNode("", true),
        renderSlot(_ctx.$slots, "picFooter")
      ], 2);
    };
  }
});
var index_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = {
  key: 0,
  class: "loading-model",
  "data-weiling-mobile-ui-wl-loading": ""
};
const _hoisted_2 = {
  key: 0,
  class: "percent"
};
const _hoisted_3 = {
  key: 1,
  class: "box"
};
const _hoisted_4 = {
  key: 0,
  class: "text"
};
const __default__ = {
  name: "WlLoading"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    needPercent: { type: Boolean, default: false },
    showLoading: { type: Boolean, default: true },
    currentRate: { default: 0 },
    content: { default: "\u6B63\u5728\u52A0\u8F7D\u4E2D..." },
    percent: { default: 1 },
    backgroundColor: { default: "white" },
    loadingModelBackgroundColor: { default: "rgba(0, 0, 0, 0.45)" }
  },
  setup(__props) {
    const props = __props;
    useCssVars((_ctx) => ({
      "c5ddf314": __props.loadingModelBackgroundColor,
      "78de1683": __props.backgroundColor
    }));
    const showLoadingValue = ref(false);
    const currentRateValue = ref(0);
    const percentValue = ref(0);
    const loadingPhoto = loadingPic;
    const onCancelUpload = () => {
      showLoadingValue.value = false;
    };
    const text = computed(() => {
      return props.currentRate.toFixed(0) + "%";
    });
    watchEffect(() => {
      showLoadingValue.value = props.showLoading;
    });
    watchEffect(() => {
      currentRateValue.value = props.currentRate;
    });
    watchEffect(() => {
      percentValue.value = props.percent;
    });
    return (_ctx, _cache) => {
      return showLoadingValue.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
        __props.needPercent ? (openBlock(), createElementBlock("div", _hoisted_2, [
          createVNode(unref(Circle), {
            "current-rate": currentRateValue.value,
            "onUpdate:current-rate": _cache[0] || (_cache[0] = ($event) => currentRateValue.value = $event),
            size: "80px",
            rate: percentValue.value,
            text: unref(text),
            color: "var(--wl-primary-color)",
            "layer-color": "#eee",
            "stroke-width": 60
          }, null, 8, ["current-rate", "rate", "text"]),
          createElementVNode("div", {
            class: "cancel-upload",
            onClick: onCancelUpload
          }, "\u53D6\u6D88\u4E0A\u4F20")
        ])) : (openBlock(), createElementBlock("div", _hoisted_3, [
          createVNode(_sfc_main$1, {
            class: "icon",
            src: unref(loadingPhoto)
          }, null, 8, ["src"]),
          __props.content ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.content), 1)) : createCommentVNode("", true)
        ]))
      ])) : createCommentVNode("", true);
    };
  }
});
let mountNode = null;
var index = (options) => {
  const {
    type,
    needPercent,
    tips,
    percent,
    currentRate,
    backgroundColor = "white",
    loadingModelBackgroundColor = "rgba(0, 0, 0, 0.45)"
  } = options;
  const app = createVNode(_sfc_main, {
    percent,
    needPercent,
    currentRate,
    content: tips,
    backgroundColor,
    loadingModelBackgroundColor
  });
  if (type === "hide") {
    if (mountNode) {
      if (options.parentNode) {
        options.parentNode.removeChild(mountNode);
      } else {
        document.body.removeChild(mountNode);
      }
      mountNode = null;
    }
  } else if (type === "show") {
    app.props.showLoading = true;
    mountNode = document.createElement("div");
    render(app, mountNode);
    if (options.parentNode) {
      options.parentNode.appendChild(mountNode);
    } else {
      document.body.appendChild(mountNode);
    }
  } else if (type === "changePercent") {
    app.props.currentRate = percent;
    app.props.needPercent = true;
    render(app, mountNode);
  }
};
export { index as default };
