<template>
	<el-image
		class="image-box"
		:src="src"
		:fit="fit"
		:lazy="lazy"
		:alt="alt"
		:preview-src-list="previewSrcList"
		close-on-press-escape
		hide-on-click-modal
		infinite
		:z-index="zIndex"
		:error="errorText"
		:placeholder="placeholder"
		@abort="$emit('abort')"
		@onload="$emit('load')"
		@onclick="$emit('click')"
		@ondblclick="$emit('dblclick')"
		@onfocus="$emit('focus')"
		@onblur="$emit('blur')"
		@onkeyup="$emit('keyup')"
		@onkeydown="$emit('keydown')"
		@onkeypress="$emit('keypress')"
		@onmousedown="$emit('mousedown')"
		@onmousemove="$emit('mousemove')"
		@onmouseover="$emit('mouseover')"
		@onmouseout="$emit('mouseout')"
		@onmouseup="$emit('mouseup')"
	>
	</el-image>
</template>

<script>
export default {
	name: 'ImageBox',
	data() {
		return {};
	},
	props: {
		src: {
			type: String,
			default: '',
		},
		fit: {
			type: String,
			default: 'cover',
		},
		preview: {
			type: Boolean,
			default: false,
		},
		alt: {
			type: String,
			default: '',
		},
		lazy: {
			type: Boolean,
			default: true,
		},
		previewSrcList: {
			type: Array,
			default: () => [],
		},
		placeholder: {
			type: String,
			default: '',
		},
		errorText: {
			type: String,
			default: '×',
		},
		zIndex: {
			type: Number,
			default: 10000,
		},
	},

	methods: {
		click() {
			this.$emit('click');
		},
		error() {
			this.$emit('error');
		},
		load() {
			this.$emit('load');
		},
	},
};
</script>

<style scope>
.image-box {
	width: 100px;
	height: 100px;
}
</style>
