<template>
	<view class="" :style="boxStyle">
		<view class="goods-video" v-show="switchMedia == 'video'">
			<video :id="videoId" :src="$util.img(value.videoUrl)" :poster="$util.img(value.imageUrl)"
				:style="videoWarpCss + boxStyle" objectFit="contain" :controls="true" :show-fullscreen-btn="true"
				:auto-pause-if-navigate="false" :auto-pause-if-open-native="false" :show-mute-btn="true" :autoplay="autoplay"
				@pause="pauseVideo()"></video>
		</view>
		<view style="position: relative;" v-show="switchMedia == 'img'" @click="changeType()">
			<img class="play_icon" :src="$util.img('upload/weapp/user/play_icon.png')" alt="">
			<image class="goods-img" :style="videoWarpCss + boxStyle" :src="$util.img(value.imageUrl)" mode="scaleToFill"
				style="width: 100%;">
			</image>
		</view>


	</view>
</template>

<script>
// 视频
export default {
	name: 'diy-video',
	props: {
		value: {
			type: Object
		}
	},
	data() {
		return {
			videoId: 'video' + this._uid,
			switchMedia: "img",
			autoplay: false,
			videoKey: 1,
			boxStyle: {},
			videoContext: null
		};
	},

	created() {
		uni.$on('videoStop', () => {
			this.pauseVideo()
		})
		// uni.$on('videoStart', () => {
		// 	this.changeType()
		// })
		this.videoContext = uni.createVideoContext(this.videoId)
	},
	computed: {
		videoWarpCss: function () {
			var obj = '';
			if (this.value.componentAngle == 'round') {
				obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
				obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
				obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
				obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
			}
			this.calcStyle()
			return obj;
		}
	},
	methods: {
		calcStyle() {
			// uni.getSystemInfo({
			// 	success: res => {
			// 		const { screenWidth, screenHeight, ratio } = res
			// 	}
			// });
			this.$nextTick(() => {
				this.boxStyle = `width: 100%; height: ${this.value.imgHeight / (this.value.imgWidth / 690)}rpx;`
				// this.boxStyle = {
				// width: '100%',
				// height: this.value.imgHeight / (this.value.imgWidth / 690) + 'rpx'
				// }
			})
		},
		changeType() {
			this.switchMedia = "video";
			this.autoplay = true;
			this.videoContext.play();
		},
		pauseVideo() {
			this.switchMedia = "img";
			this.autoplay = false;

			this.videoContext.pause();
		}
	}
};
</script>

<style scoped>
video {
	width: 100%;
}

.play_icon {
	width: 80rpx;
	height: 80rpx;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 10;
}
</style>
