<template>
	<div v-if="previewItems.length > 0" class="image-preview-list flex wrap">
		<div
			v-for="(image, index) in previewItems"
			:key="`${index}-${getPreviewUrl(image)}`"
			class="image-preview-item"
		>
			<img
				:src="getPreviewUrl(image)"
				class="preview-image"
				@click="emit('preview', getPreviewUrl(image))"
			/>
			<div class="image-remove-btn" @click="emit('remove', index, image)">
				<SvgIcon name="delete" size="16" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { computed } from 'vue'
	import type { PreviewImage, UploadedImage } from './types'

	const props = defineProps<{
		uploadedImages: UploadedImage[]
		quoteList: string[]
	}>()

	const emit = defineEmits<{
		(e: 'preview', url: string): void
		(e: 'remove', index: number, image: PreviewImage): void
	}>()

	const previewItems = computed<PreviewImage[]>(() => [
		...props.uploadedImages,
		...props.quoteList
	])

	const getPreviewUrl = (image: PreviewImage) => {
		return typeof image === 'string' ? image : image.url
	}
</script>

<style lang="less" scoped>
	.image-preview-list {
		padding: 0 1.4rem 1rem;
		column-gap: 1rem;
		max-height: 15rem;
		overflow-y: auto;
		flex-shrink: 0;

		.image-preview-item {
			position: relative;
			width: 8.6rem;
			height: 8.6rem;
			border-radius: 1.5rem;
			overflow: hidden;
			flex-shrink: 0;
			border: 0.1rem solid #cdcdcd;

			.preview-image {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: 0.8rem;
				cursor: pointer;
			}

			.image-remove-btn {
				position: absolute;
				top: 0.6rem;
				right: 0.6rem;
				width: 1.6rem;
				height: 1.6rem;
				color: #fff;
				border-radius: 50%;
				align-items: center;
				justify-content: center;
				font-size: 1.2rem;
				cursor: pointer;
				display: none;
			}

			&:hover .image-remove-btn {
				display: flex;
			}
		}
	}
</style>
