<template>
    <view class="ut-album" :style="albumStyle">
        <view v-for="(item, index) in displayUrls" :key="index" class="album-item" :style="getItemStyle(index)"
            @click="handleItemClick(index)">
            <image :src="getThumbnailUrl(index)" :mode="singleMode" class="album-image" />
            <!-- 超出数量显示 +N -->
            <view v-if="index === maxCount - 1 && urls.length > maxCount" class="album-more">
                <text class="more-text">+{{ urls.length - maxCount }}</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
    urls: {
        type: Array,
        default: []
    },
    singleMode: {
        type: String,
        default: 'aspectFill'
    },
    space: {
        type: String,
        default: '14rpx'
    },
    rowCount: {
        type: Number,
        default: 3
    },
    keyName: {
        type: String,
        default: ''
    },
    unit: {
        type: String,
        default: 'rpx'
    },
    // 统一的图片尺寸（单个和多个都使用这个）
    multipleSize: {
        type: String,
        default: '160rpx'
    },
    // 兼容旧版本的单张图片尺寸（如果没有设置multipleSize则使用这个）
    singleMaxSize: {
        type: String,
        default: '180rpx'
    },
    previewFullImage: {
        type: Boolean,
        default: true
    },
    maxCount: {
        type: Number,
        default: 9
    },
    // 缩略图系数
    factor: {
        type: Number,
        default: 4
    },
    t: {
        type: String,
        default: '0'
    }
})

// 显示的图片数组（限制数量）
const displayUrls = computed(() => {
    return props.urls.slice(0, props.maxCount);
});

// 计算相册容器样式
const albumStyle = computed(() => {
    return {
        display: 'flex',
        flexWrap: 'wrap',
        gap: props.space,
        width: '100%'
    };
});

// 统一的图片尺寸（单个和多个都使用相同尺寸）
const getImageSize = () => {
    // 统一使用 multipleSize
    return props.multipleSize;
};

// 获取原始图片URL
const getImageUrl = (index) => {
    const item = props.urls[index];
    if (props.keyName && typeof item === 'object') {
        return item[props.keyName] || '';
    }
    return item || '';
}

// 获取缩略图URL
const getThumbnailUrl = (index) => {
    const url = getImageUrl(index);
    if (!url) return '';

    const size = uni.$u.getPx(getImageSize()) * props.factor;

    return `${url}?w=${size}&h=${size}&t=${props.t}`;
}

// 获取原图URL（移除参数）
const getOriginalUrl = (index) => {
    const url = getImageUrl(index);
    return url ? url.split('?')[0] : '';
}

// 获取所有原图URL数组
const getAllOriginalUrls = () => {
    return props.urls.map((item, index) => getOriginalUrl(index));
}

// 获取单个图片项的样式 - 统一宽高
const getItemStyle = (index) => {
    const size = getImageSize();

    // 无论单张还是多张，都使用相同的尺寸
    return {
        width: size,
        height: size,
        flexShrink: 0
    };
}

// 处理图片点击
const handleItemClick = (index) => {
    if (props.previewFullImage) {
        previewImg(index);
    }
}

// 预览图片（使用原图）
const previewImg = (index) => {
    if (!props.previewFullImage) return;

    const originalUrls = getAllOriginalUrls();

    if (originalUrls.length > 0) {
        uni.previewImage({
            urls: originalUrls,
            current: index
        });
    }
};
</script>

<style lang="scss" scoped>
.ut-album {
    width: 100%;

    .album-item {
        position: relative;
        border-radius: 8rpx;
        overflow: hidden;
        border: 1rpx solid #f8f8f8;


        .album-image {
            width: 100%;
            height: 100%;
            border-radius: 8rpx;
            object-fit: cover;
            box-sizing: border-box;
            background-color: #ccc;
        }

        .album-more {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8rpx;

            .more-text {
                color: #fff;
                font-size: 32rpx;
                font-weight: 500;
            }
        }
    }
}
</style>