<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
          style="width: 240rpx"
          @selected="changeSideBar"
          :active-key="activeKey"
          :title="item.chapterName"
          v-for="(item, index) in carVideoList"
          :key="index"
          :item-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;
      console.log(e.detail, this.carVideoList);
      const { data } = await this.$api.carVideo.getCarVideoList(
        this.carVideoList[this.activeKey].id
      );
      this.currentList = data;
    },
    async changeSideBar(itemKey) {
      this.activeKey = itemKey;
      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;
  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%;
    max-height: 100vh;
    overflow-y: scroll;
  }
}
</style>
