<template>
  <view class="bg">
    <view class="video">
      <view   @click="isPlayVideo(item)" v-for="(item, index) in list" :key="index" class="video-item">
        <image
        
          class="video-item-left"
          mode="widthFix"
          :src="item.videoCover"
        ></image>
        <view class="video-item-right">
          <view style="width: 100%">{{ 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://ct.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://ct.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 class="pay">
      <view @click="buyRoadCourse" class="pay-text">
        <text v-if="!examIds.includes(examId)"
          >立即支付&nbsp;&nbsp;¥{{ price / 100 }}</text
        >
        <icon
          v-if="examIds.includes(examId)"
          type="success_no_circle"
          color="#ffffff"
          size="16"
          style="margin-right:15rpx;"
        ></icon>
        <text v-if="examIds.includes(examId)">已购买</text>
      </view>
      <image
        v-if="!examIds.includes(examId)"
        style="width: 100%"
        mode="widthFix"
        src="https://ct.zzxcx.net/ctjk/mp-wx/courseCatalog/payBg.png"
      ></image>
      <image
        v-if="examIds.includes(examId)"
        mode="widthFix"
        src="https://ct.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://ct.zzxcx.net/ctjk/mp-wx/courseCatalog/advantage.png"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      query: {
        price: 0,
      },
    };
  },
  methods: {
    isPlayVideo(item) {
      if(!this.examIds.includes(this.examId)){
        uni.showToast({
          title:"请购买",
          icon:'none'
        })
        return
      }
      let queryJson = JSON.stringify({
        url: item.videoUrl,
      });
      uni.navigateTo({
        url: "/otherPages/playVideo/index?query=" + queryJson,
      });
    },
    buyRoadCourse() {
      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);
        });
    },
  },
  props: {
    list: {
      type: Array,
      default: [],
    },
    price: {
      type: Number,
      default: 0,
    },
    examId: {
      type: Number,
      default: 0,
    },
  },
  onLoad(query) {
    this.query = query;
  },
  computed: {
    ...mapGetters(["examIds"]),
  },
};
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
  display: inline-block;
  height: 100%;
  .video {
    white-space: normal;
    padding: 0 30rpx;
    padding-top: 40rpx;
    display: inline-block;
    width: 100%;
    .video-item {
      width: 100%;
      display: flex;
      margin-bottom: 40rpx;
    }
    .video-item-left {
      width: 250rpx;
      font-size: 30rpx;
      flex-shrink: 0;
    }
    .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: #498ef5;
      font-size: 22rpx;
      line-height: 40rpx;
      text-align: center;
    }
  }
  .pay {
    padding: 0 30rpx;
    position: relative;
    display: flex;
    justify-content: center;
    .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>