<template>
  <view class="bg">
    <view class="video">
      <view
        @click="playRoadExamVideo(item)"
        v-for="(item, index) in list"
        :key="index"
        class="video-item"
      >
        <!-- <view class="video-item-leftBorder"></view> -->
     
        <image
          v-if="item.permission == 1"
          class="video-item-angle"
          :src="shikan"
        ></image>
        <image
          v-if="item.permission == 2"
          class="video-item-angle"
          :src="vip"
        ></image>
        <image
          class="video-item-left"
          mode="heightFix"
          :src="item.videoCover"
        ></image>
        <view class="video-item-right">
          <view style="width: 100%; font-size: 30rpx">{{
            item.videoName
          }}</view>
          <view class="video-item-right-icon">学习中</view>
        </view>
      </view>
      <!-- <view class="video-item">
        <image
          class="video-item-left"
          mode="widthFix"
          src="https://ndata.zzxcx.net/ctjk/mp-wx/courseCatalog/video_poster.png"
        ></image>
        <view class="video-item-right">
          <view>福州 | 华威夜间模拟灯光全套 （东南V5）</view>
          <view class="video-item-right-icon">学习中</view>
        </view>
      </view>
      <view class="video-item">
        <image
          class="video-item-left"
          mode="widthFix"
          src="https://ndata.zzxcx.net/ctjk/mp-wx/courseCatalog/video_poster.png"
        ></image>
        <view class="video-item-right">
          <view>福州 | 华威夜间模拟灯光全套 （东南V5）</view>
          <view class="video-item-right-icon">学习中</view>
        </view>
      </view> -->
    </view>
    <view
      v-if="!roadExamIds.includes(examId)"
      v-show="isVideoFree == '0'"
      style="width: 100%; padding-left: 30rpx"
    >
      <van-checkbox-group :value="userAgreement" @change="changeUserAgreement">
        <van-checkbox name="userAgree">
          <span
            >开通前请阅读
            <navigator
              url="/pages/extraWeb/index?src=https://ndata.zzxcx.net/agreement/ctjk-sf.html&paramsMode=1"
              style="color: #498ef5; display: inline"
              >《用户服务协议》</navigator
            ></span
          ></van-checkbox
        >
      </van-checkbox-group>

      <!-- <checkbox-group @change="changeUserAgreement">
        <label class="radio">
          <checkbox
            value="userAgree"
            v-model="userAgree"
            color="#498EF5"
            :checked="false"
          />

      
        </label>
      </checkbox-group> -->
    </view>
    <view
      @click="
        !roadExamIds.includes(examId) && isVideoFree == '0'
          ? buyRoadCourse()
          : ''
      "
      class="pay"
    >
      <view class="pay-text">
        <text v-if="!roadExamIds.includes(examId) && isVideoFree == '0'"
          >立即支付&nbsp;&nbsp;¥{{ price / 100 }}</text
        >
        <icon
          v-if="roadExamIds.includes(examId) && isVideoFree == '0'"
          type="success_no_circle"
          color="#ffffff"
          size="16"
          style="margin-right: 15rpx"
        ></icon>
        <text v-if="roadExamIds.includes(examId) && isVideoFree == '0'"
          >已购买</text
        >
        <text v-if="isVideoFree == '1'">限时免费</text>
      </view>
      <image
        v-if="!roadExamIds.includes(examId) && isVideoFree == '0'"
        style="width: 100%"
        mode="widthFix"
        src="https://ndata.zzxcx.net/ctjk/mp-wx/courseCatalog/payBg.png"
      ></image>
      <image
        v-if="roadExamIds.includes(examId) && isVideoFree == '0'"
        mode="widthFix"
        src="https://ndata.zzxcx.net/ctjk/mp-wx/courseCatalog/alreadyPay.png"
      ></image>
      <image
        v-if="isVideoFree == '1'"
        mode="widthFix"
        src="https://ndata.zzxcx.net/ctjk/mp-wx/courseCatalog/alreadyPay.png"
      ></image>
    </view>
    <view class="advantage">
      <view class="advantage-title"> 实拍优势</view>
      <view class="advantage-img">
        <image
          mode="widthFix"
          src="https://ndata.zzxcx.net/ctjk/mp-wx/courseCatalog/advantage.png"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api";
import { mapGetters, mapState } from "vuex";
import vip from "@/assets/img/vip.png";
import shikan from "@/assets/img/shikan.png";
export default {
  data() {
    return {
      IS_VIDEO_FREE: 0,
      query: {
        price: 0,
      },
      vip,
      shikan,
      userAgreement: [],
      userAgree: false,
    };
  },
  methods: {
    changeUserAgreement(e) {
      console.log(e, "..");
      this.userAgreement = e.detail;
      console.log(this.userAgreement);
    },
    playRoadExamVideo(item) {
      if (this.isVideoFree == "0") {
        if (!this.roadExamIds.includes(this.examId) && item.permission == 2) {
          uni.showToast({
            title: "请购买",
            icon: "none",
          });
          return;
        }
      }

      uni.setStorageSync("storageWebSrc", item.videoUrl);
      uni.navigateTo({
        url: "/otherPages/playStorageWebSrc/index",
      });
    },
    buyRoadCourse() {
      let that = this;
      if (this.userAgreement.length == 0) {
        uni.showToast({
          title: "开通前请同意用户服务协议",
          icon: "none",
        });
        return;
      }
      let systemInfo = wx.getSystemInfoSync();
      api.buy
        .studentWxXcxPrepareOrder({
          goodsId: this.examId,
          foreType: 2,
          goodsType: 1,
          phoneType: systemInfo.platform == "ios" ? 1 : 2,
        })
        .then((res) => {
          wx.requestPayment({
            ...res.data,
            complete: (res) => {
              console.log(res);
              if (res.errMsg.includes("ok")) {
                uni.showLoading({
                  title: "购买中",
                });
                setTimeout(() => {
                  that.$store.dispatch("GetRoadExamVip");
                  uni.hideLoading();
                }, 3000);
              } else if (res.errMsg.includes("fail")) {
              } else {
                setTimeout(() => {
                  that.$store.dispatch("GetRoadExamVip");
                  uni.hideLoading();
                }, 3000);
              }
            },
          });
        });
    },
  },
  props: {
    list: {
      type: Array,
      default: [],
    },
    price: {
      type: Number,
      default: 0,
    },
    examId: {
      type: Number,
      default: 0,
    },
  },
  onLoad(query) {
    this.query = query;
  },
  computed: {
    ...mapState({
      isVideoFree: (state) => {
        return state.user.isVideoFree;
      },
    }),
    ...mapGetters(["roadExamIds"]),
  },
};
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
  display: inline-block;
  height: 100%;
  .video {
    white-space: normal;
    padding: 0 30rpx;
    padding-top: 54rpx;
    display: inline-block;
    width: 100%;
    .video-item {
      width: 100%;
      display: flex;
      padding: 30rpx;
      margin-bottom: 20rpx;
      position: relative;
      height: 200rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(5, 61, 26, 0.1);
      border-left: 10rpx solid #3AC770;
    }
    .video-item-leftBorder {
      width: 8rpx;
      background: linear-gradient(360deg, #3ac770 0%, #6be69b 100%);
      height: 100%;
    }
    .video-item-angle {
      width: 68rpx;
      height: 32rpx;
      position: absolute;
      top: 30;
      left: 30;
    }
    .video-item-left {
      width: 250rpx;
      font-size: 30rpx;
      height: 138rpx;
    }
    .video-item-right {
      padding-left: 30rpx;
      display: flex;
      flex-wrap: wrap;
      font-size: 30rpx;
    }
    .video-item-right-icon {
      width: 94rpx;
      height: 40rpx;
      background: #d6e9fc;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      opacity: 1;
      color: #3AC770;
      font-size: 22rpx;
      line-height: 40rpx;
      text-align: center;
      background: #E6FFEF;
    }
    .video-item-right-icon_vip {
      background: rgba(255, 77, 83, 0.3);
      color: rgba(255, 77, 83, 1);
    }
  }
  .pay {
    padding: 0 30rpx;
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .pay-text {
      position: absolute;
      top: 50%;
      width: 100%;
      text-align: center;
      color: white;
      transform: translateY(-85%);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .advantage {
    padding: 0 30rpx;
    .advantage-title {
      font-size: 42rpx;
      color: #0a1a33;
      font-weight: 600;
    }
    .advantage-img {
      width: 100%;
      display: flex;
      justify-content: center;
      flex-shrink: 0;
      padding-top: 30rpx;
    }
  }
}
</style>