<template>
	<view class="nvd-photo-view">
		<!-- 空状态 -->
		<view v-if="photos.length === 0" class="nvd-photo-view__empty">
			<text class="nvd-photo-view__empty-text">暂无图片</text>
		</view>

		<!-- 图片网格 -->
		<view v-else class="nvd-photo-view__grid">
			<view
				v-for="(photo, index) in photos"
				:key="photo._id"
				class="nvd-photo-view__item"
				:style="{ width: `${750 / cols}rpx`, height: `${750 / cols}rpx` }"
				@click="handlePreview(index)"
			>
				<image
					class="nvd-photo-view__img"
					:src="photo.src"
					mode="aspectFill"
				/>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue'
import { parseAttachUrls } from '@/utils/request.js'

const props = defineProps({
	/** 逗号分隔的附件路径字符串，如 "FileUpLoad/a.png,FileUpLoad/b.png" */
	attachUrl: { type: String, default: '' },
	/** 每行显示列数 */
	cols: { type: Number, default: 3 }
})

const photos = computed(() => {
	if (!props.attachUrl) return []
	return parseAttachUrls(props.attachUrl)
})

const handlePreview = (index) => {
	const urls = photos.value.map((p) => p.src)
	uni.previewImage({ current: index, urls })
}
</script>

<style lang="scss" scoped>
$radius: 10rpx;
$gap: 10rpx;

.nvd-photo-view {
	width: 100%;

	&__empty {
		padding: 48rpx 24rpx;
		text-align: center;

		&-text {
			font-size: 26rpx;
			color: #8e99a4;
		}
	}

	&__grid {
		display: flex;
		flex-wrap: wrap;
	}

	&__item {
		padding: 12rpx;
		box-sizing: border-box;
	}

	&__img {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: $radius;
		background: #f0f2f5;
        border: 1px solid #e0e0e0;
	}
}
</style>
