<template>
  <view class="divert" :style="{ backgroundColor: bgColor }">
    <image :src="bgUrl" class="divert-bg" mode="widthFix" />
    <!-- <image :src="qrcodeUrl" class="divert-img" mode="aspectFit" /> -->
    <image :src="btnUrl" class="divert-btn" @click="checkAuth" />
  </view>
</template>
<script>
import { saTrackEvent } from "@/utils/sa.js";
import { getPrivDomain } from "../../api/pay.api";
const PAGE_CONFIG = {
  // title: "领88元优惠券",
  // bgUrl: "https://img.lkbang.net/landing-bg.a1ee5cf9.jpg",
  bgColor: "#FF2C40",
  // qrcodeUrl: "https://img.lkbang.net/landing-qrcode.acb117ef.jpg",
  btnUrl: "https://img.lkbang.net/xcx/save-btn.e8f785b7.png"
};
export default {
  data() {
    return {
      bgUrl: "",
      bgColor: "",
      qrcodeUrl: "",
      btnUrl: ""
    };
  },
  onLoad(option) {
    saTrackEvent("PD_YXMMAEC_SiyuLandingPageExtensionBannerExposure", {
      page_name: "微信红包"
    });
    this.getPageInfo(option.activityType);
  },
  methods: {
    async getPageInfo(activityType) {
      const [res] = await getPrivDomain(activityType);
      this.bgUrl = res.backgroundImg;
      this.bgColor = PAGE_CONFIG.bgColor;
      this.qrcodeUrl = res.qrCodeImg;
      this.btnUrl = PAGE_CONFIG.btnUrl;
      uni.setNavigationBarTitle({
        title: res.title
      });
    },
    checkAuth() {
      /* #ifndef MP-ALIPAY */
      uni.getSetting({
        success: res => {
          if (!res.authSetting["scope.writePhotosAlbum"]) {
            uni.authorize({
              scope: "scope.writePhotosAlbum",
              success: () => {
                saTrackEvent("PD_YXMMAEC_UserClickSiyuLandingPageExtensionBanner", {
                  page_name: "微信红包"
                });
                this.saveQrcode();
              },
              fail() {
                uni.showModal({
                  title: "温馨提示",
                  content: "保存图片功能需要您的授权才能使用",
                  cancelText: "不授权",
                  confirmText: "授权",
                  confirmColor: "#ec1500",
                  success: function(res) {
                    console.log(res, "=================>res");
                    if (res.confirm) {
                      if (uni.openSetting) {
                        console.log("uni.openSetting============>", uni.openSetting);
                        uni.openSetting();
                      } else {
                        uni.showModal({
                          title: "授权提示",
                          confirmColor: "#ec1500",
                          content:
                            "保存图片需要您的授权才能使用，错过授权页面的处理方法：1、删除小程序->重新搜索进入->点击授权按钮；2、可在小程序设置打开相应权限"
                        });
                      }
                    } else if (res.cancel) {
                      uni.showModal({
                        title: "温馨提示",
                        content:
                          "相册授权失败，错过授权页面的处理方法：1、删除小程序->重新搜索进入->点击授权按钮；2、可在小程序设置打开相应权限",
                        showCancel: false,
                        confirmColor: "#ec1500"
                      });
                    }
                  }
                });
              }
            });
          } else {
            //用户已经授权过了
            this.saveQrcode();
          }
        }
      });
      /* #endif */
      /* #ifdef MP-ALIPAY */
      this.saveQrcode();
      /* #endif */
    },
    saveQrcode() {
      uni.downloadFile({
        url: this.qrcodeUrl,
        success: res => {
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              this.$api.msg("保存成功");
            },
            fail: () => {
              this.$api.msg("保存失败");
            }
          });
        },
        fail: function(error) {
          uni.hideLoading();
          console.log(error);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@mixin abs-center {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 2;
}
.divert {
  background-color: $uni-bg-color-grey;
  position: relative;
  height: 100%;
  &-bg {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100vw;
    margin: 0 auto;
    overflow: auto;
    display: block;
  }
  &-img {
    @include abs-center();
    display: block;
    top: 744rpx;
    width: 432rpx;
    height: 432rpx;
  }
  &-btn {
    @include abs-center();
    display: block;
    bottom: -73rpx;
    width: 282rpx;
    height: 60rpx;
    line-height: 70rpx;
    color: #fff;
    font-size: 32rpx;
    background: #ff2525;
    border-radius: 43rpx;
  }
}
</style>
