<script setup>
import {ref} from "vue";

const {list, size, preview} = defineProps({
    list: {
        type: Array,
        default: []
    },
    size: {
        type: String,
        default: "40px"
    },
    preview: {
        type: Boolean,
        default: true,
    }
});
const previewVisible = ref(false);
</script>

<template>
    <div class="x-image-small-list">
        <a-image :width="size" :height="size" :src="list[0]" v-bind="$attrs"></a-image>
        <div class="x-image-small-list-mask cursor-pointer" v-if="list.length > 1"
             @click="preview?previewVisible=true:null">
            +{{ list.length - 1 }}
        </div>
    </div>

    <a-image-preview-group v-model:visible="previewVisible">
        <a-image :width="size" :height="size" v-for="v in list" :src="v" v-bind="$attrs" v-show="false"></a-image>
    </a-image-preview-group>
</template>

<style scoped lang="scss">
.x-image-small-list {
    width: v-bind(size);
    height: v-bind(size);
    overflow: hidden;
    position: relative;
    border-radius: 6px;

    .x-image-small-list-mask {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(0, 0, 0, .3);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>
