<template>
	<div
		class="v-image"
		ref="container"
		:style="containerStyle"
	>
		<!-- 视频加载器 -->
		<video
			v-if="videoSrc"
		   ref="video"
		   preload="auto"
		   style="display: none"
		   @loadeddata="videoLoad"
		   :src="videoSrc"
		></video>

		<div class="v-image-container"
			:style="containerImageStyle"
		>
			<img
				v-if="imageSrc&&!useVideo&&status !== imageStatus.fail"
				:src="imageSrc"
				@load="onLoadSuccess"
				@error="onLoadFail"
				ref="image"
				alt="image"
				class="v-image-style"
				:style="imageStyle"
				:class="imageClassStyle"
			/>
			<video
				v-if="imageSrc&&useVideo&&status !== imageStatus.fail"
				:src="imageSrc"
				:poster="usePoster"
				:preload="usePoster?'meta':'auto'"
				:controls="controls"
				webkit-playsinline
				controlslist="nodownload nofullscreen noremoteplayback"
				oncontextmenu="return false"
				@loadeddata="onLoadSuccess"
				@error="onLoadFail"
				ref="image"
				class="v-image-style"
				:style="imageStyle"
				:class="imageClassStyle"
			></video>

			<aside class="v-image-icon" :style="containerIconStyle" v-if="icon">
				<v-image
					:src="icon"
					backgroundColor="transparent"
					class="v-image-icon-image"
					:mode="iconMode"
				/>
			</aside>

		</div>
		<div class="v-image-slot" :class="{'v-image-pointer':pointer}">
			<slot></slot>
			<slot name="success" v-if="status === imageStatus.success"></slot>
			<slot name="fail" v-if="status === imageStatus.fail"></slot>
			<slot name="loading" v-if="status === imageStatus.loading"></slot>
		</div>
	</div>
</template>
<script lang="ts">
import mixins from '../mixins/index';
import props from '../props';
export default {
	name: "v-image",
    mixins,
    props,
}
</script>
<style scoped lang="scss" src="../style/index.scss"></style>
<style lang="scss" src="../style/global.scss"></style>
