<template>
	<view class="proof-uploader">
		<view class="label">结算凭证（至少1张）</view>
		<view class="image-list">
			<view v-for="(url, idx) in images" :key="url" class="image-item">
				<image class="thumb" :src="url" mode="aspectFill" @click="preview(idx)" />
				<view class="remove" @click="remove(idx)">×</view>
			</view>
			<view v-if="images.length < maxCount" class="add-btn" @click="chooseImage">
				<u-icon name="plus" size="40" color="#999" />
			</view>
		</view>
	</view>
</template>

<script>
import { uploadSalespersonManageFileApi, extractUploadUrl } from '@/api/upload.js';

export default {
	name: 'ProofImageUploader',
	props: {
		value: { type: Array, default: () => [] },
		maxCount: { type: Number, default: 5 },
	},
	computed: {
		images: {
			get() { return this.value || []; },
			set(v) { this.$emit('input', v); },
		},
	},
	methods: {
		chooseImage() {
			const remain = this.maxCount - this.images.length;
			uni.chooseImage({
				count: remain,
				sizeType: ['compressed'],
				success: async (res) => {
					const paths = res.tempFilePaths || [];
					for (const filePath of paths) {
						try {
							uni.showLoading({ title: '上传中' });
							const uploadRes = await uploadSalespersonManageFileApi({ filePath });
							const url = extractUploadUrl(uploadRes);
							if (url) {
								this.$emit('input', [...this.images, url]);
							}
						} catch (e) {
							uni.showToast({ title: '上传失败', icon: 'none' });
						} finally {
							uni.hideLoading();
						}
					}
				},
			});
		},
		remove(idx) {
			const next = [...this.images];
			next.splice(idx, 1);
			this.$emit('input', next);
		},
		preview(idx) {
			uni.previewImage({ urls: this.images, current: this.images[idx] });
		},
	},
};
</script>

<style lang="scss" scoped>
.proof-uploader { margin-top: 24rpx; }
.label { font-size: 26rpx; color: #666; margin-bottom: 16rpx; }
.image-list { display: flex; flex-wrap: wrap; gap: 16rpx; }
.image-item { position: relative; width: 160rpx; height: 160rpx; }
.thumb { width: 100%; height: 100%; border-radius: 12rpx; }
.remove {
	position: absolute; top: -8rpx; right: -8rpx;
	width: 36rpx; height: 36rpx; background: #ef4444; color: #fff;
	border-radius: 50%; text-align: center; line-height: 36rpx; font-size: 28rpx;
}
.add-btn {
	width: 160rpx; height: 160rpx; border: 2rpx dashed #ddd; border-radius: 12rpx;
	display: flex; align-items: center; justify-content: center; background: #fafafa;
}
</style>
