<template>
  <view
    class="video-item ^video-item"
    :style="{ width: `${(750 - 30 * column - 30) / column}rpx` }"
    @click="gotoPaly"
  >
    <view class="image-box">
      <view class="img-box">
        <image
          class="image"
          :src="carVideoItem.cover"
          mode="aspectFill"
        ></image>
      </view>
      <image v-if="carVideoItem.permission==2" class="img-tip" :src="vip"></image>
      <image v-if="carVideoItem.permission==1" class="img-tip" :src="shikan"></image>
      <text>{{ carVideoItem.duration }}</text>
      <m-icon class="icon" type="bofangshipin"></m-icon>
    </view>
    <text>{{ carVideoItem.title }}</text>
  </view>
</template>

<script>
import shikan from "@/assets/img/shikan.png";
import vip from "@/assets/img/vip.png";
export default {
  data() {
    return {
      shikan: shikan,
      vip: vip,
    };
  },
  props: {
    carVideoItem: {
      type: Object,
      default: {},
    },
    column: {
      type: Number,
      default: 2,
    },
    palyObj: {
      type: Object,
      default: null,
    },
  },
  name: "m-video-topbottom",
  mounted() {
    console.log(this.carVideoItem);
  },
  methods: {
    gotoPaly() {
      if (!this.palyObj) {
        this.$utils.route.goPage("/pages/carVideo/play", null, {
          carVideoItem: this.carVideoItem,
        });
      } else {
        this.$emit("click");
      }
    },
  },
};
</script>

<style lang="scss">
.video-item {
  margin-right: 30rpx;
  margin-top: 30rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;

  .image-box {
    position: relative;
    .img-tip {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      width: 50rpx;
      height: 28rpx;
    }
    .img-box {
      width: 100%;
      padding-bottom: 64%;
      position: relative;

      .image {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
    }

    text {
      position: absolute;
      color: #8a9099;
      right: 2rpx;
      bottom: 2rpx;
    }

    .icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  text {
    font-size: 30rpx;
    font-weight: 400;
    line-height: 39rpx;
    color: #0f0404;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>
