<template>
	<view class="container">
		<view class="video-box">
			<video class="video" ref="videoStatus" @play="propsPlay" :src="Videos.src"></video>
			<view class="box-bottom">
				<view class="user-info">
					<u-avatar class="avatar" :src="Videos.avatar"></u-avatar>
					<text class="username">{{Videos.username}}</text>
				</view>
				<u-tag class="tag" :text="Videos.tagName" bg-color="#6c757d" type="info" mode="plain" shape="circle"
					size="medium"></u-tag>
			</view>
			<view class="bottom-title">
				<text class="title">{{Videos.titleName}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			VideoId: {
				type: Number,
				default: null
			},
			Videos: {
				type: Object,
				default: {
					src: "",
					avatar: '',
					username: 'sdsd',
					titleName: 'asdsdas',
					tagName: 'sdasd'
				}
			}
		},
		name: "cardVideo",
		data() {
			return {
				videoContent: ''
			};
		},
		mounted() {
			this.videoContent = uni.createVideoContext("video", this)
		},
		onLoad() {

		},
		methods: {
			propsPlay(e) {
				const videoContext = this.videoContent
				const videoStatus = this.$refs.videoStatus
				this.$emit("onplay", {
					e,
					videoStatus,
					videoContext
				})
				
				

			}
		}
	};
</script>

<style lang="scss">
	$videoBoxradius: 30rpx;
	$backColor: rgba(170, 85, 255, 0.6);

	.container {
		padding: 20rpx;

		.video-box {
			overflow: hidden;
			border-radius: $videoBoxradius;
			background-color: $backColor;
			width: 100%;

			.video {
				width: 100%;
			}

			.box-bottom {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 4%;

				.user-info {
					display: inline-flex;
					align-items: center;
					// width: 26%;
					justify-content: space-around;
				}

				.avatar {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				.username {
					color: #fff;
					font-size: $uni-font-size-base;
					margin-right: 10rpx;
				}

				.tag {
					font-size: $uni-font-size-sm;
				}
			}

			.bottom-title {
				text-align: center;
				color: #fff;
				font-size: $uni-font-size-subtitle;
				height: 80rpx;

				.title {
					line-height: 80rpx;
				}
			}
		}
	}
</style>