<template>
  <div class="pic-list-container" data-weiling-mobile-ui-wl-pic-list>
    <div
      v-for="(item, index) in originList"
      :key="index"
      class="pic-list-content"
      :style="picStyle(index)"
      @click="onChoose(index)"
    >
      <WlPic fit="cover" :src="item" class="pic-list" />
      <div class="pic-list-icon">
        <template v-if="!isMultiple">
          <WlRadioIcon
            type="hook"
            :isChoosed="getIsChoosed(index)"
            @onClick="onChoose(index)"
          />
        </template>
        <template v-if="isMultiple">
          <WlRadioIcon
            type="count"
            :count="getCount(index)"
            :isChoosed="getIsChoosed(index)"
            @onClick="onChoose(index)"
          />
        </template>
      </div>
    </div>
  </div>
</template>

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

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

type Props = {
  list: string[];
  column?: number;
  isMultiple?: boolean;
  space?: number;
  singleCancel?: boolean;
};

const props = withDefaults(defineProps<Props>(), {
  list: null,
  column: 3,
  isMultiple: false,
  space: 2,
  singleCancel: false,
});

const emit = defineEmits<{
  (e: "onChange", val: string[]);
}>();

const originList = ref<string[]>(null);
//多选的时候累加
const choosedList = ref<string[]>([]);

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

<style lang="scss">
.pic-list-container[data-weiling-mobile-ui-wl-pic-list] {
  display: flex;
  margin-bottom: j(1);
  flex-wrap: wrap;

  .pic-list-content {
    position: relative;
    height: j(125);
  }

  .pic-list {
    position: relative;
    overflow: hidden;

    &-pic {
      flex: 1;
      padding: 0 j(1);
      width: 100%;
      height: 100%;
    }

    &-icon {
      position: absolute;
      top: j(6);
      right: j(6);

      .checked-number {
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: j(16);
        border-radius: 50%;
        background-color: var(--wl-primary-color);
        @extend %flex-middle-center;
      }
    }
  }
}
</style>
