<template>
  <div class="pic-select">
    <div
      class="pic-wrap"
      v-for="(item, index) in list"
      :key="item.id"
      :style="picWrapStyle(index)"
      @click="onClick(item, index)"
    >
      <div
        class="pic"
        :class="selectedIdList.includes(item.id) ? 'select-pic' : ''"
        :style="picStyle"
      >
        <WlPic type="backgroundImage" :src="item.picUrl" />
      </div>
      <div
        class="pic-text"
        :class="selectedIdList.includes(item.id) ? 'selected' : ''"
        v-if="showText"
      >
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "RfPicSelect",
};
</script>

<script lang="ts" setup>
import { computed, watchEffect, ref } from "vue";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";

type Props = {
  list?: TRenderForm.TPicSelectOption[];
  space?: number;
  picWidth?: number;
  picHeight?: number;
  isMultiple?: boolean;
  selectedId?: string[];
  modelValue?: TRenderForm.TPicSelectOption[];
  showText?: boolean;
  column?: number;
  maxWidth?: string;
  themeColor?: string;
  flexWrap?: string;
  justifyContent?: string;
};
const props = withDefaults(defineProps<Props>(), {
  list: null,
  space: 0,
  picWidth: 0,
  picHeight: 0,
  isMultiple: false,
  selectedId: null,
  modelValue: null,
  showText: false,
  column: 4,
  maxWidth: "",
  flexWrap: "wrap",
  justifyContent: "flex-start",
  themeColor: "var(--wl-primary-color)",
});

const emit = defineEmits<{
  (e: "update:modelValue", val: TRenderForm.TPicSelectOption[]);
  (e: "onChange", val: TRenderForm.TPicSelectOption);
}>();

const picList = ref<TRenderForm.TPicSelectOption[]>();

const selectedList = ref<TRenderForm.TPicSelectOption[]>([]);

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);
};
</script>

<style lang="scss">
.render-form[data-weiling-mobile-ui-bc-render-form] {
  .pic-select {
    display: flex;
    flex-wrap: v-bind(flexWrap);
    justify-content: v-bind(justifyContent);
    width: 100%;
    padding-top: j(6);

    .pic-wrap {
      @extend %flex-middle;
      flex-direction: column;
      box-sizing: border-box;

      .pic {
        width: 100%;
        height: 100%;
        border: j(2) solid transparent;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        flex: 1;
        border-radius: j(5);

        &.select-pic {
          border-color: var(--wl-primary-color);

          &::before {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            background-color: var(--themeColor);
            opacity: 0.1;
          }
        }

        &-text {
          font-size: j(11);
          line-height: j(15);
          color: var(--wl-text-color-secondary-2);
          @include textEllipsis(1);
          padding: j(6) 0;

          &.selected {
            color: "var(--wl-primary-color)";
          }
        }
      }
    }
  }
}
</style>
