<template>
	<view>
		<van-cell @click='clickCell' :title="carVideoList.chapterName" is-link value="更多" />
		<!-- <view class="cell">
			<text class="item-tit">{{carVideoList.chapterName}}</text>
			<view class="right-box" @click='clickCell'>
				<text class="item-tit-right">更多</text>
				<m-icon type="arrow-right"></m-icon>
			</view>
		</view> -->
		<view class="video-box" v-if="type=='top-bottom'">
			<m-video-topbottom :column='column' :carVideoItem='item' v-for="(item,index) in showList"
				: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 showList" :key='index' />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: 'top-bottom'
			},
			column: {
				type: Number,
				default: 2
			},
			carVideoList: {
				type: Object,
				default: {}
			},
			palyObj: {
				type: Object,
				default: null
			}
		},
		name: "m-video-box",
		computed:{
			showList(){
				return this.carVideoList.list
			}
		},
		methods: {
			returnData(item) {
				if (this.palyObj) {
					this.$emit('update:palyObj', item)
				}
			},
			clickCell() {
				this.$utils.route.goPage('/pages/carVideo/more', null, {
					carVideoList: this.carVideoList
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.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;
	}
</style>
