import { defineComponent, ref, computed, watch, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createCommentVNode, renderSlot, useCssVars, watchEffect, withModifiers, createElementVNode, Fragment, createBlock, toDisplayString, renderList, createVNode } from "vue";
import WlSvg from "@wltech/svg";
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$2 = ["src", "alt"];
const _hoisted_2$2 = ["src"];
const _hoisted_3$2 = ["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__$2 = {
  name: "WlPic"
};
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
  ...__default__$2,
  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$2)) : 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$2)) : 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$2)) : createCommentVNode("", true),
        renderSlot(_ctx.$slots, "picFooter")
      ], 2);
    };
  }
});
var index_vue_vue_type_style_index_0_lang$1 = "";
const _hoisted_1$1 = ["onClick"];
const _hoisted_2$1 = {
  key: 1,
  class: "dot"
};
const _hoisted_3$1 = {
  key: 2,
  class: "count"
};
const _hoisted_4 = {
  key: 0,
  class: "uno-pl-8"
};
const __default__$1 = {
  name: "WlRadioIcon"
};
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
  ...__default__$1,
  props: {
    isChoosed: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    size: { default: 18 },
    color: { default: "var(--wl-primary-color)" },
    count: { default: 1 },
    type: { default: "hook" },
    iconType: { default: "" },
    text: { default: "" }
  },
  emits: ["onClick"],
  setup(__props, { emit }) {
    const props = __props;
    useCssVars((_ctx) => ({
      "56e71e8b": unref(iconSize),
      "0a993a92": __props.color
    }));
    const isChecked = ref(false);
    const iconSize = computed(() => props.size + "px");
    const svgType = computed(() => props.type === "hook" ? "successFill" : props.iconType);
    const radioWrapClass = computed(() => {
      return `radio-wrap ${isChecked.value ? "" : "checked"}`;
    });
    const onClick = () => {
      if (props.disabled)
        return;
      emit("onClick", isChecked.value);
    };
    watchEffect(() => {
      isChecked.value = props.isChoosed;
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: "radio-icon-wrap",
        onClick: withModifiers(onClick, ["stop"]),
        "data-weiling-mobile-ui-wl-radio-icon": ""
      }, [
        createElementVNode("div", {
          class: normalizeClass(unref(radioWrapClass))
        }, [
          isChecked.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
            ["hook", "icon"].includes(__props.type) ? (openBlock(), createBlock(unref(WlSvg), {
              key: 0,
              type: unref(svgType),
              color: "var(--wl-primary-color)",
              height: unref(iconSize),
              width: unref(iconSize)
            }, null, 8, ["type", "height", "width"])) : __props.type === "dot" ? (openBlock(), createElementBlock("p", _hoisted_2$1)) : __props.type === "count" ? (openBlock(), createElementBlock("p", _hoisted_3$1, toDisplayString(__props.count), 1)) : createCommentVNode("", true)
          ], 64)) : createCommentVNode("", true)
        ], 2),
        __props.text ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(__props.text), 1)) : createCommentVNode("", true)
      ], 8, _hoisted_1$1);
    };
  }
});
var index_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = {
  class: "pic-list-container",
  "data-weiling-mobile-ui-wl-pic-list": ""
};
const _hoisted_2 = ["onClick"];
const _hoisted_3 = { class: "pic-list-icon" };
const __default__ = {
  name: "WlPicList"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    list: { default: null },
    column: { default: 3 },
    isMultiple: { type: Boolean, default: false },
    space: { default: 2 },
    singleCancel: { type: Boolean, default: false }
  },
  emits: ["onChange"],
  setup(__props, { emit }) {
    const props = __props;
    const originList = ref(null);
    const choosedList = ref([]);
    watchEffect(() => {
      originList.value = props.list;
    });
    const getCount = computed(() => {
      return function(index) {
        return choosedList.value.indexOf(index) + 1;
      };
    });
    const getIsChoosed = computed(() => {
      return function(index) {
        return choosedList.value.includes(index);
      };
    });
    const picStyle = computed(() => {
      return function(index) {
        let allRow = Math.ceil(props.list.length / props.column);
        let row = Math.ceil((index + 1) / props.column);
        let width = `(100% - ${(props.column - 1) * props.space}px)/${props.column}`;
        return {
          width: `calc(${width})`,
          marginBottom: row === allRow ? "" : props.space,
          marginRight: (index + 1) % props.column ? props.space : 0
        };
      };
    });
    const onChoose = (index) => {
      const order = choosedList.value.indexOf(index);
      if (props.isMultiple) {
        if (order === -1) {
          choosedList.value.push(index);
        } else {
          choosedList.value.splice(order, 1);
        }
      } else {
        if (order === -1) {
          choosedList.value = [index];
        } else {
          if (props.singleCancel) {
            choosedList.value = [];
          }
        }
      }
      emit(
        "onChange",
        choosedList.value.map((res) => originList.value[res])
      );
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(originList.value, (item, index) => {
          return openBlock(), createElementBlock("div", {
            key: index,
            class: "pic-list-content",
            style: normalizeStyle(unref(picStyle)(index)),
            onClick: ($event) => onChoose(index)
          }, [
            createVNode(_sfc_main$2, {
              fit: "cover",
              src: item,
              class: "pic-list"
            }, null, 8, ["src"]),
            createElementVNode("div", _hoisted_3, [
              !__props.isMultiple ? (openBlock(), createBlock(_sfc_main$1, {
                key: 0,
                type: "hook",
                isChoosed: unref(getIsChoosed)(index),
                onOnClick: ($event) => onChoose(index)
              }, null, 8, ["isChoosed", "onOnClick"])) : createCommentVNode("", true),
              __props.isMultiple ? (openBlock(), createBlock(_sfc_main$1, {
                key: 1,
                type: "count",
                count: unref(getCount)(index),
                isChoosed: unref(getIsChoosed)(index),
                onOnClick: ($event) => onChoose(index)
              }, null, 8, ["count", "isChoosed", "onOnClick"])) : createCommentVNode("", true)
            ])
          ], 12, _hoisted_2);
        }), 128))
      ]);
    };
  }
});
_sfc_main.install = (Vue) => {
  Vue.component(_sfc_main.name, _sfc_main);
};
export { _sfc_main as default };
