<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
        class="custom-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;
  width: 690rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30rpx;
  z-index: 0;
  justify-content: space-between;
  .custom-video-topbottom ::v-deep .video-item {
    margin-right: 0;
    margin-bottom: 0;
  }
}
</style>
