<template>
	<view class="private-image">
		<image v-if="signedUrl" :src="signedUrl" :mode="mode" :style="{ width: width, height: height }"
			@click="onClick" @error="onError" />
		<view v-else-if="loading" class="ph">加载中…</view>
		<view v-else-if="error" class="ph err">{{ error }}</view>
		<view v-else-if="!path" class="ph">未上传</view>
	</view>
</template>

<script>
	// PrivateImage —— 私密文件查看（小程序，商家本人）
	//
	// 用法：
	//   <PrivateImage :path="form.id_card_front" width="200rpx" height="120rpx" />
	//
	// 不传 targetUserId —— 服务端会校验 object key 必须属于当前登录用户
	import {
		signPrivateView
	} from '@/utils/uploadOSS.js'

	export default {
		name: 'PrivateImage',
		props: {
			path: {
				type: String,
				default: ''
			},
			width: {
				type: String,
				default: '200rpx'
			},
			height: {
				type: String,
				default: '120rpx'
			},
			mode: {
				type: String,
				default: 'aspectFill'
			},
			// mount 立即签发；click 点击才签
			trigger: {
				type: String,
				default: 'mount'
			}
		},
		data() {
			return {
				signedUrl: '',
				loading: false,
				error: ''
			}
		},
		watch: {
			path: {
				immediate: true,
				handler(v) {
					if (v && this.trigger === 'mount') this.fetch()
					else this.signedUrl = ''
				}
			}
		},
		methods: {
			async fetch() {
				if (!this.path) return
				this.loading = true
				this.error = ''
				try {
					const res = await signPrivateView(this.path)
					this.signedUrl = res.url
				} catch (e) {
					this.error = e.message || '加载失败'
				} finally {
					this.loading = false
				}
			},
			onClick() {
				if (this.signedUrl) {
					uni.previewImage({
						urls: [this.signedUrl]
					})
				} else if (this.trigger === 'click') {
					this.fetch()
				}
			},
			onError() {
				this.error = '图片加载失败'
				this.signedUrl = ''
			}
		}
	}
</script>

<style scoped>
	.private-image .ph {
		display: inline-block;
		text-align: center;
		color: #999;
		font-size: 22rpx;
		padding: 16rpx;
		border: 2rpx dashed #ccc;
	}

	.private-image .ph.err {
		color: #f56c6c;
	}
</style>
