<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 lang="scss" scoped>
	video {
		width: 100%;
	}

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