<template>
	<div v-if="needPre">
		<img :src="imgObj.src" alt=""
			:style="{width: imgObj.width,height: imgObj.height,'object-fit': imgObj.mode, 'border-radius': 0} "
			@click="preImage(imgObj.src)">
		<a-modal v-model:open="imageBigOpen" width="50%" centered :footer="null" @cancel="close">
			<div style="padding: 30px;">
				<img :src="imgObj.src" style="width: 100%; height: 100%;">
			</div>
		</a-modal>
	</div> 
	<div v-else>
		<img :src="imgObj.src" alt=""
			:style="{width: imgObj.width,height: imgObj.height,'object-fit': imgObj.mode, 'border-radius': 0} ">
	</div>

</template>

<script lang="ts" setup>
	import { ref, onMounted, defineProps, watch, computed } from 'vue';

	const props = defineProps({
		imgObj: {
			type: Object,
			default: {}
		},
		need: {
			type: Boolean,
			default: false
		}
	});

	let needPre = ref<Boolean>(props.need)
	let imageBigOpen = ref<Boolean>(false)
	
	interface imgType {
		src ?: String,
		width ?: Number,
		height ?: Number,
		mode ?: String,
	}
	const imgObj = ref<imgType>({
		src: '',
		width: 0,
		height: 0,
		mode: '',
	})

	// 预览
	const preImage = (src) => {
		imageBigOpen.value = true
	}

	const close = (src) => {
		imageBigOpen.value = false
	}



	watch(() => [props.imgObj], (newVal : any) => {
		if (newVal[0]) {
			imgObj.value = newVal[0]
		}
	}, { immediate: true })
</script>

<style>
</style>