<template>
  <view>
    <view class="video-box">
      <video
        id="myVideo"
        v-if="videoVisible"
        @play="playVideo"
        unit-id="adunit-c169acee32b4aa9f"
        class="video"
        :src="carVideoItem.videoUrl"
        controls
        autoplay
      ></video>
      <view
        class="video-tip"
        v-if="!videoVisible && carVideoItem.permission == 1"
      >
        <text class="video-tip-text1" style="font-size: 32rpx"
          >试看结束，开通会员观看完整视频</text
        >
        <button @click="goBuyVip" class="video-tip-open">立即开通</button>
        <image
          @click="backFront"
          class="video-tip-leftArrow1"
          :src="leftArrow1"
        ></image>
        <image
          @click="
            () => {
              refreshVideo();
            }
          "
          class="video-tip-backArrow1"
          :src="backArrow1"
        ></image>
        <text class="video-tip-text2">重播</text>
      </view>
      <view
        class="video-tip"
        v-if="!videoVisible && carVideoItem.permission == 2"
      >
        <text class="video-tip-text1" style="font-size: 32rpx"
          >只有vip可以观看</text
        >
        <button @click="goBuyVip" class="video-tip-open">立即开通</button>
        <image
          @click="backFront"
          class="video-tip-leftArrow1"
          :src="leftArrow1"
        ></image>
        <!-- <image
          @click="
            () => {
              refreshVideo();
            }
          "
          class="video-tip-backArrow1"
          :src="backArrow1"
        ></image> -->
      </view>
      <view class="des">
        <text>{{ carVideoItem.title }}</text>

        <!-- <text>{{carVideoItem.remarks}}</text> -->
      </view>
    </view>

    <loading v-if="loading"></loading>
    <scroll-view v-else>
      <m-video-leftright
        :palyObj="{}"
        @click="videoListClick(item)"
        :carVideoItem="item"
        v-for="(item, index) in carVideoList"
        :key="index"
      ></m-video-leftright>
    </scroll-view>

    <!-- <loading v-if="loading"></loading>
		<view v-else>
			<m-video-box :palyObj.sync='carVideoItem' :column="[2, 1, 3][index % 3]"
				:type="[1, 1, 1][index % 3]==1?'left-right':'top-bottom'" :carVideoList='item'
				v-for="(item,index) in carVideoList" :key='index'></m-video-box>
		</view> -->
  </view>
</template>

<script>
import backArrow1 from "@/assets/img/backArrow1.png";
import leftArrow1 from "@/assets/img/leftArrow1.png";
export default {
  data: () => ({
    videoTimer: 0,
    isInit: false,
    backArrow1,
    leftArrow1,
    loading: true,
    videoVisible: false,
    carVideoList: [],
    carVideoItem: {},
    videoAd: null,
    switchingTimes: 1,
    videoVisible: true,
  }),
  watch: {
    carVideoItem() {
      //用于激励广告计数
      this.switchingTimes++;
    },
  },
  computed: {
    isVip() {
      return this.$store.getters.isVip;
    },
  },
  onLoad: async function (option) {
    let data = await this.goPageGetData();
    this.carVideoItem = data.carVideoItem;
  },
  async mounted() {
    // console.log(wx.createVideoContext("myVideo"));
    let { data: carVideoData } = await this.$api.carVideo.getCarVideoList(
      this.carVideoItem.pid
    );
    this.carVideoList = carVideoData;
    console.log(this.carVideoList, "carVideoList");
    this.loading = false;
  },
  methods: {
    goBuyVip() {
      uni.navigateTo({
        url: "/otherPages/buyVip/index",
      });
    },
    refreshVideo() {
      this.isInit = false;
      this.videoVisible = true;

      //   clearTimeout(this.videoTimer);
      //   if (!this.isInit && this.carVideoItem.permission == 1) {
      //     this.isInit = true;
      //     this.videoTimer = setTimeout(() => {
      //       this.videoVisible = false;
      //     }, 15 * 1000);
      //   }
    },
    playVideo(e) {
      clearTimeout(this.videoTimer);
	  //vip 不需要判断
      if (this.isVip) {
        return;
      }
      if (!this.isInit && this.carVideoItem.permission == 1) {
        this.isInit = true;
        this.videoTimer = setTimeout(() => {
          this.videoVisible = false;
        }, 15 * 1000);
      } else if (!this.isInit && this.carVideoItem.permission == 2) {
        this.isInit = true;
        this.videoVisible = false;
      }
    },
    backFront(e) {
      uni.navigateBack();
    },
    loadedmetadata(e) {
      if (this.carVideoItem.permission == 1) {
        this.videoTimer = setTimeout(() => {
          this.videoVisible = false;
        }, 15 * 1000);
      } else {
        clearTimeout(this.videoTimer);
      }
    },
    adTimeupdate(e) {
      //小程序专用
      if (e.detail.currentTime > 15 && this.carVideoItem.permission >= 1) {
        this.videoVisible = false;
      }
    },

    videoListClick(item) {
      this.carVideoItem = item;
      this.isInit = false;
      this.videoVisible = true;
    },
  },
};
</script>

<style lang="scss">
.video-box {
  width: 100vw;
  box-sizing: border-box;
  margin-bottom: 30rpx;
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
  video {
    width: 100%;
    height: 450rpx;
  }
  .video-tip {
    width: 100%;
    height: 450rpx;
    background: #0a1a33;
    position: relative;

    .video-tip-text1 {
      position: absolute;
      top: 120rpx;
      color: #dba05c;
      width: 100%;
      text-align: center;
    }
    .video-tip-text2 {
      position: absolute;
      bottom: 40rpx;
      color: #fff;
      left: 85rpx;
      font-size: 24rpx;
    }
    .video-tip-open {
      width: 180rpx;
      height: 60rpx;
      background: linear-gradient(90deg, #dba05c 0%, #f3c085 100%);
      position: absolute;
      left: 50%;
      color: #91540f;
      font-size: 26rpx;
      top: 200rpx;
      transform: translate(-50%);
    }
    .video-tip-leftArrow1 {
      position: absolute;
      top: 24rpx;
      left: 34rpx;
      width: 16rpx;
      height: 32rpx;
    }
    .video-tip-backArrow1 {
      position: absolute;
      bottom: 42rpx;
      left: 40rpx;
      width: 30rpx;
      height: 28rpx;
    }
  }

  .video {
    width: 100%;
  }

  .des {
    display: flex;
    flex-direction: column;
    padding: 30rpx;
    padding-top: 24rpx;

    text {
      &:nth-of-type(1) {
        font-size: 30rpx;
        font-weight: 400;
        line-height: 39rpx;
        color: #0f0404;
      }

      &:nth-of-type(2) {
        margin-top: 6rpx;
        font-size: 26rpx;
        font-weight: 400;
        line-height: 20rpx;
        color: #666666;
      }
    }
  }
}
</style>
