<template>
	<view class="shortVideo-box">
		<van-cell @click='clickCell' title="短视频" is-link value="更多" />
		<view class="video-box" v-if="type=='top-bottom'">
			<m-video-topbottom :column='column' :carVideoItem='item' v-for="(item,index) in carVideoList.list"
				:key='index' :palyObj='palyObj' @click='returnData(item)' />
		</view>
		<view class="video-box" v-if="type=='left-right'">
			<m-video-leftright @click='returnData(item)' :palyObj='palyObj' :carVideoItem='item'
				v-for="(item,index) in carVideoList.list" :key='index' />
		</view>
		<view class="video-box-slide" v-if="type=='slide'">
			<m-video-topbottom-short :column='column' :carVideoItem='item' v-for="(item,index) in carVideoList.list"
				:key='index' :palyObj='palyObj' @click='returnData(item)' />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: 'top-bottom'
			},
			column: {
				type: Number,
				default: 2
			},
			palyObj: {
				type: Object,
				default: {}
			}
		},
		name: "m-video-box",
		data: () => ({
			carVideoList: null
		}),
		async mounted() {
			let {
				data
			} = await this.$api.carVideo.getShortVideoList()
			this.carVideoList = data
		},
		methods: {
			returnData(item) {
				console.log(item)
				this.$utils.route.goPage('/pages/carVideo/shortVideoPaly',null, {
					carVideoList: this.carVideoList.list
				})
			},
			clickCell() {
				this.$utils.route.goPage('/pages/carVideo/more', null, {
					carVideoList: this.carVideoList
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shortVideo-box{
		margin-top: 10px;
	}
	.cell {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		padding: 10rpx 20rpx;
		border-bottom: 1rpx solid #e8e8e8;

		.item-tit {
			border-left: 8rpx solid #E31818;
			font-size: 30rpx;
			font-weight: 400;
			padding: 5rpx;
		}

		.right-box {
			display: flex;
			align-items: center;

			.item-tit-right {
				font-size: 26rpx;
				color: #666666;
				line-height: 58rpx;
				padding: 11rpx;
			}
		}

	}

	.video-box {
		background-color: #FFFFFF;
		display: flex;
		flex-wrap: wrap;
		padding-left: 30rpx;
		padding-bottom: 30rpx;
		margin-bottom: 30rpx;
		z-index: 0;
	}
	.video-box-slide{
		background-color: #FFFFFF;
		display: flex;
		z-index: 0;
		overflow-x: auto;
		margin-bottom: 30rpx;
		padding-left: 30rpx;
		padding-bottom: 30rpx;
	}
</style>
