<template>
  <view class="video-item" @click="gotoPaly">
    <view class="img-box">
      <image class="image" :src="carVideoItem.cover" mode="aspectFill"></image>
      <m-icon class="icon" type="bofangshipin"></m-icon>
      <image
        v-if="carVideoItem.permission == 2"
        class="img-tip"
        :src="vip"
      ></image>
      <image
        v-if="carVideoItem.permission == 1"
        class="img-tip"
        :src="shikan"
      ></image>
    </view>
    <view class="tit-box">
      <text>{{ carVideoItem.title }}</text>
      <text>{{ carVideoItem.duration }}</text>
    </view>
  </view>
</template>

<script>
import shikan from "@/assets/img/shikan.png";
import vip from "@/assets/img/vip.png";
export default {
  props: {
    carVideoItem: {
      type: Object,
      default: {},
    },
    palyObj: {
      type: Object,
      default: null,
    },
  },
  name: "m-video-leftright",
  mounted () {
	  console.log(this.carVideoItem);
  },
  data() {
    return {
		shikan,
		vip
	};
  },
  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 {
  display: flex;
  margin: 20rpx;

  .img-box {
    flex-shrink: 0;
    width: 240rpx;
    height: 160rpx;
    position: relative;
    .img-tip {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
      width: 50rpx;
      height: 28rpx;
    }

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

  .tit-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16rpx 16rpx;

    text {
      &:nth-child(1) {
        font-size: 30rpx;
        font-weight: 400;
        color: #0f0404;
      }

      &:nth-child(2) {
        font-size: 26rpx;
        font-weight: 400;
        color: #999999;
      }
    }
  }
}
</style>
