import { defineComponent, useCssVars, ref, computed, watchEffect, openBlock, createElementBlock, Fragment, renderList, normalizeStyle, unref, createElementVNode, normalizeClass, createVNode, toDisplayString, createCommentVNode } from "vue";
import { _ as _sfc_main$1 } from "./index11.js";
import "./index4.js";
var index_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = { class: "pic-select" };
const _hoisted_2 = ["onClick"];
const __default__ = {
  name: "RfPicSelect"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: {
    list: { default: null },
    space: { default: 0 },
    picWidth: { default: 0 },
    picHeight: { default: 0 },
    isMultiple: { type: Boolean, default: false },
    selectedId: { default: null },
    modelValue: { default: null },
    showText: { type: Boolean, default: false },
    column: { default: 4 },
    maxWidth: { default: "" },
    themeColor: { default: "var(--wl-primary-color)" },
    flexWrap: { default: "wrap" },
    justifyContent: { default: "flex-start" }
  },
  emits: ["update:modelValue", "onChange"],
  setup(__props, { emit }) {
    const props = __props;
    useCssVars((_ctx) => ({
      "39c847f8": __props.flexWrap,
      "4dbde41e": __props.justifyContent
    }));
    const picList = ref();
    const selectedList = ref([]);
    const selectedIdList = computed(() => selectedList.value.map((res) => res.id));
    const picWrapStyle = computed(() => {
      return function(index) {
        let row = Math.ceil((index + 1) / props.column);
        let allRow = Math.ceil(props.list.length / props.column);
        let width = `(100% - ${(props.column - 1) * props.space})/${props.column}`;
        const commonStyle = {
          width: `calc(${width})`,
          marginBottom: row === allRow ? "" : props.space,
          marginRight: (index + 1) % props.column ? props.space : 0
        };
        if (props.maxWidth) {
          return {
            ...commonStyle,
            maxWidth: props.maxWidth + "px"
          };
        } else {
          return commonStyle;
        }
      };
    });
    const picStyle = computed(() => {
      return {
        width: props.picWidth + "px",
        height: props.picHeight + "px",
        "--themeColor": props.themeColor
      };
    });
    watchEffect(() => {
      picList.value = props.list || [];
      selectedList.value = props.list.filter(
        (res) => (props.selectedId || []).includes(res.id)
      );
    });
    const onClick = (item, index) => {
      if (props.isMultiple) {
        const order = selectedIdList.value.indexOf(item.id);
        if (order === -1) {
          selectedList.value = [...selectedList.value, item];
        } else {
          selectedList.value = selectedList.value.filter(
            (res) => res.id !== item.id
          );
        }
      } else {
        selectedList.value = [item];
      }
      emit("update:modelValue", selectedList.value);
      emit("onChange", item);
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.list, (item, index) => {
          return openBlock(), createElementBlock("div", {
            class: "pic-wrap",
            key: item.id,
            style: normalizeStyle(unref(picWrapStyle)(index)),
            onClick: ($event) => onClick(item)
          }, [
            createElementVNode("div", {
              class: normalizeClass(["pic", unref(selectedIdList).includes(item.id) ? "select-pic" : ""]),
              style: normalizeStyle(unref(picStyle))
            }, [
              createVNode(_sfc_main$1, {
                type: "backgroundImage",
                src: item.picUrl
              }, null, 8, ["src"])
            ], 6),
            __props.showText ? (openBlock(), createElementBlock("div", {
              key: 0,
              class: normalizeClass(["pic-text", unref(selectedIdList).includes(item.id) ? "selected" : ""])
            }, toDisplayString(item.text), 3)) : createCommentVNode("", true)
          ], 12, _hoisted_2);
        }), 128))
      ]);
    };
  }
});
export { _sfc_main as default };
