<template>
	<view class="video-item" @click="gotoPaly">
		<view class="image-box">
			<view class="img-box">
				<image class="image" :src="carVideoItem.cover" mode="aspectFill"></image>
			</view>
			<text>{{carVideoItem.duration}}</text>
			<m-icon class="icon" type="bofangshipin"></m-icon>
		</view>
		<text>{{carVideoItem.title}}</text>
	</view>
</template>

<script>
	export default {
		props: {
			carVideoItem: {
				type: Object,
				default: {}
			},
			column: {
				type: Number,
				default: 2
			},
			palyObj: {
				type: Object,
				default: null
			}
		},
		name: "m-video-topbottom",
		methods: {
			gotoPaly() {
				if (!this.palyObj) {
					this.$utils.route.goPage('/pages/carVideo/play', null, {
						carVideoItem: this.carVideoItem
					})
				} else {
					this.$emit('click')
				}
			}
		}
	}
</script>

<style lang="scss">
	.video-item {
		margin-right: 30rpx;
		margin-top: 30rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		width: 200rpx;

		.image-box {
			position: relative;

			.img-box {
				width: 100%;
				padding-bottom: 144%;
				position: relative;

				.image {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}
			}


			text {
				position: absolute;
				color: #8A9099;
				right: 2rpx;
				bottom: 2rpx;

			}

			.icon {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		text {
			font-size: 30rpx;
			font-weight: 400;
			line-height: 39rpx;
			color: #0F0404;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
</style>
