<template>
	<loading v-if="loading"></loading>
	<view v-else class="branch-one">
		<view class="sidebar-box">
			<van-sidebar custom-class='van-sidebar' :active-key="activeKey" @change='sidebarOnChange'>
				<van-sidebar-item :title="item.chapterName" v-for="(item,index) in carVideoList" :key='index' />
			</van-sidebar>
			<view class="video-box">
				<view v-if="currentList.length===0">
					暂无视频
				</view>
				<m-video-leftright v-else :carVideoItem='item' v-for="(item,index) in currentList" :key='index'>
				</m-video-leftright>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			carVideoList: {
				type: Array
			}
		},
		data: () => ({
			bannerList: [],
			loading: true,
			activeKey: 0,
			currentList:[]
		}),
		methods: {
			async sidebarOnChange(e) {
				this.activeKey = e.detail
				const {data} = await this.$api.carVideo.getCarVideoList(this.carVideoList[this.activeKey].id)
				this.currentList=data
			}
		},
		async mounted() {
			// let {
			// 	data: bannerListData
			// } = await this.$api.home.getHomePageDataList(['carouselChart'])
			// this.sidebarOnChange({detail:this.activeKey})
			// this.bannerList = bannerListData.carouselChart
			this.$nextTick(() => {
				this.loading = false
			})
		}
	}
</script>

<style lang="scss" scoped>
	.sidebar-box {
		display: flex;
		background-color: #FFFFFF;
		height: calc(100vh - 130px);
		overflow: auto;

		/deep/ .van-sidebar {
			width: 220rpx;
			height: 100%;
			overflow-y: auto;
			font-size: 26rpx;
			font-weight: 400;
			line-height: 39rpx;
			color: #0F0404;
		}

		.video-box {
			height: 100%;
			overflow-y: auto;
		}
	}
</style>
