<script setup>
const {list, size} = defineProps({
    list: {
        type: Array,
        default: []
    },
    size: {
        type: String,
        default: "40px"
    }
});
</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" v-if="list.length > 1">
            +{{ list.length - 1 }}
        </div>
    </div>
</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>
