<template>
  <view style="display: flex">
    <image class="bg" mode="widthFix" :src="bg"></image>
    <view class="buttons">
      <view
        @click="
          () => {
            watchShow = true;
            extraQuery = {
              category: 3,
              title: '新规秘卷一',
            };
          }
        "
        class="buttons-left"
        >进入秘卷一
      </view>
      <view
        @click="
          watchShow = true;
          extraQuery = {
            category: 4,
            title: '新规秘卷二',
          };
        "
        class="buttons-right"
        >进入秘卷二</view
      >
      <van-popup round :show="watchShow">
        <view class="ad">
          <image
            style="width: 100%"
            mode="widthFix"
            src="https://ndata.zzxcx.net/ctjk/mp-wx/selectRulePaper/dialog_bg.png"
          ></image>
          <view class="ad-buttons">
            <view @click="watchAdGoExerciseMi(extraQuery)" class="ad-button1">
              <image
                style="width: 36rpx; margin-right: 15rpx"
                mode="widthFix"
                src="https://ndata.zzxcx.net/ctjk/mp-wx/selectRulePaper/watchAd.png"
              ></image
              ><text>看广告免费领秘卷</text>
            </view>
            <view
              @click="
                () => {
                  watchShow = false;
                }
              "
              class="ad-button2"
            >
              <image
                style="width: 36rpx; margin-right: 15rpx"
                mode="widthFix"
                src="https://ndata.zzxcx.net/ctjk/mp-wx/selectRulePaper/cancel.png"
              ></image>
              <text>取消</text>
            </view>
          </view>
        </view>
      </van-popup>
    </view>
  </view>
</template>

<script>
//试卷
import utils from "@/utils/index";

export default {
  data() {
    return {
      watchShow: false,
      bg: "https://ndata.zzxcx.net/ctjk/mp-wx/selectRulePaper/selectrulePaperBg2.png",
      query: {},
      extraQuery: {
        category: 3,
        title: "新规秘卷一",
      },
    };
  },
  onLoad(query) {
    this.query = query;
  },
  methods: {
    watchAdGoExerciseMi(extraQuery) {
      let query = Object.assign({}, this.query);
      if (extraQuery) {
        query = {
          ...query,
          ...extraQuery,
        };
      } else {
      }
      let videoAd = null;
      if (wx.createRewardedVideoAd) {
        videoAd = wx.createRewardedVideoAd({
          adUnitId: "adunit-f0e94618f34d4baf",
        });
        videoAd.onLoad(() => {});
        videoAd.onError((err) => {});
        videoAd.offClose();
        videoAd.onClose((res) => {
          this.watchShow = false;
          uni.navigateTo({
            url: "/otherPages/exerciseMi/index?" + utils.mapToUrlQuery(query),
          });
        });
      }

      videoAd.show().catch(() => {
        // 失败重试
        videoAd
          .load()
          .then(() => videoAd.show())
          .catch((err) => {
            console.log("激励视频 广告显示失败");
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
}

.buttons {
  position: absolute;
  top: 906rpx;
  width: 100%;
  padding: 0 80rpx;
  display: flex;
  justify-content: space-between;

  .buttons-left {
    width: 274rpx;
    height: 86rpx;
    background: linear-gradient(0deg, #df262a, #c3060a, #e33135);
    border-radius: 45rpx;
    color: #fff;
    font-size: 38rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .buttons-right {
    width: 287rpx;
    height: 90rpx;
    background: linear-gradient(0deg, #df262a, #c3060a, #e33135);
    border-radius: 45rpx;
    color: #fff;
    font-size: 38rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.ad {
  width: 580rpx;
  height: 652rpx;
  overflow-x: hidden;
  overflow-y: hidden;
  background: #fff;
  font-size: 0rpx;
  .ad-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    padding-top: 80rpx;
    .ad-button1 {
      width: 480rpx;
      height: 90rpx;
      background: linear-gradient(180deg, #ffa057 0%, #f84031 100%);
      display: flex;
      align-content: center;
      align-items: center;
      border-radius: 50rpx 50rpx 50rpx 50rpx;
      text-align: center;
      color: #fff;
      justify-content: center;
      margin-bottom: 40rpx;
      font-size: 34rpx;
      color: #fff;
    }
    .ad-button2 {
      display: flex;
      border-radius: 50rpx 50rpx 50rpx 50rpx;
      border: 2rpx solid #5c6066;
      color: #5c6066;
      width: 480rpx;
      height: 90rpx;
      align-content: center;
      align-items: center;
      justify-content: center;
      font-size: 34rpx;
    }
  }
}
</style>