<template>
	<video data-component-name="diy-video" class="diy-video" :src="$util.img(value.videoUrl)"
		:poster="$util.img(value.imageUrl)" :style="videoWarpCss" objectFit="cover"
		@click="handlerClick(value.videoUrl)" @tap="handlerClick(value.videoUrl)"></video>
</template>

<script>
// 视频
import DiyMinx from './minx.js'
export default {
	name: 'diy-video',
	props: {
		value: {
			type: Object
		}
	},
	data() {
		return {};
	},
	created() { },
	mixins: [DiyMinx],
	watch: {
		// 组件刷新监听
		componentRefresh: function (nval) { }
	},
	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;';
			}
			return obj;
		}
	},
	methods: {
		async handlerClick(videoUrl) {
			await this.__$emitEvent({
				eventName: 'video-tap', data: videoUrl, promiseCallback: (event, handler, awaitedResult) => {
					if (!awaitedResult) return;
				}
			})
		}
	}
};
</script>

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

.diy-video>>>.uni-video-container {
	background-color: transparent;
}
</style>