<template>
  <loading v-if="loading"></loading>
  <view v-else class="vant-tab">
    <!-- <m-banner :bannerList="bannerList" height="150"></m-banner> -->
    <!-- <ShortVideo type="slide" class="top-margin"></ShortVideo> -->
    <view>
      <view v-for="(item, index) in carVideoList" :key="index">
        <m-video-row2
          :column="[2, 1, 3][index % 3]"
          :type="[2, 1, 3][index % 3] == 1 ? 'left-right' : 'top-bottom'"
          :carVideoList="item"
          v-if="item.children.length == 0"
        />
        <VideoListBox :carVideoList="item" v-else />
      </view>
    </view>
  </view>
</template>

<script>
import ShortVideo from "./shortVideo.vue";
import VideoListBox from "./videoListBox.vue";
export default {
  components: {
    ShortVideo,
    VideoListBox,
  },
  props: {
    carVideoList: {
      type: Array,
    },
  },
  mounted() {
    console.log(this.carVideoList);
  },
  data: () => ({
    bannerList: [],
    loading: true,
  }),
  async mounted() {
    // let { data: bannerListData } = await this.$api.home.getHomePageDataList([
    //   "carouselChart",
    // ]);
    // this.bannerList = bannerListData.carouselChart;
    this.$nextTick(() => {
      this.loading = false;
    });
  },
};
</script>

<style lang="scss">
.vant-tab{
  width: 100%;
}
.top-margin {
  margin-top: 10px;
}
</style>
