<template>
  <view class="main-page">
    <img :src="posterUrl" style="width:100%;height:100%;" v-show="posterUrl"/>
    <view class="spread-wrap" id="poster-wrap" v-show="!posterUrl">
      <view class="logo-wrap">
        <img :src="`${tenantInfo.logo}?timeStamp=${timeStamp}`" crossorigin="anonymous" class="logo-image" />
      </view>
      <view class="activity-wrap">
        <view class="item-wrap" v-for="(item, index) in activityList">
          <view class="title">{{setTitle(index)}}</view>
          <view class="line"></view>
          <view class="text-wrap">
            <view class="text">办理会员{{item.gearAmount}}元</view>
            <view class="text">可享一年返回<span>{{item.refundAmount}}元</span>话费</view>
          </view>
        </view>
        <view class="tips">
          三个活动可同时参与，每个手机号仅限一次，最高可返<span>{{total}}元</span>话费！！！
        </view>
        <view class="extra-info">
          <view class="extra-item">
            <view class="text"><span>①</span>扫码主图二维码</view>
            <view class="text">即可直接参与活动</view>
          </view>
          <view class="extra-item">
            <view class="text"><span>②</span>客服联系电话</view>
            <view class="text service-phone">400-8009935</view>
          </view>
        </view>
      </view>
      <view class="tenant-info-wrap">
        <view class="info-wrap">
          <view class="info">
            <view class="name">{{userInfo.nickname}}</view>
            <view class="phone">{{userInfo.mobile}}</view>
            <view class="address">
              {{userInfo.parentDeptName}}
            </view>
          </view>
          <view class="qrcode-wrap">
            <canvas id="qrcode" style="width:132rpx;height:132rpx;"></canvas>
          </view>
        </view>
        <u-button class="logon" @click="downImage" v-show="!isHideBtn">生成海报</u-button>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    toLogin
  } from '@/libs/login.js';
  import {
    memberGradeInfo
  } from '@/api/member.js';
  import {
    mapGetters
  } from "vuex";
  import appConfig from '@/config/app.js'
  import QRCode from 'qrcode'
  import html2canvas from 'html2canvas'
  export default {
    data() {
      return {
        activityList: [],
        posterUrl: '',
        isHideBtn: false,
        timeStamp: ''
      };
    },
    computed: {
      ...mapGetters(['isLogin', 'uid', 'userInfo', 'tenantId', 'tenantInfo']),
      total: function() {
        let _total = 0
        for (let active of this.activityList) {
          _total += parseInt(active.refundAmount)
        }
        return _total
      },
    },
    onLoad() {
      if (!this.isLogin) {
        toLogin()
      } else {
        this.getActivityInfo()
      }
      this.timeStamp = new Date().getTime()
    },
    onReady() {},
    methods: {
      setTitle(index) {
        switch (index) {
          case 0:
            return '活动一'
            break
          case 1:
            return '活动二'
            break
          case 2:
            return '活动三'
        }
      },
      async downImage() {
        const that = this
        uni.showLoading({
          title: '生成海报中',
          mask: true
        });
        that.isHideBtn = true
        setTimeout(() => {
          html2canvas(document.getElementById('poster-wrap'), {
            useCORS: true,
            x: 0,
            y: window.pageYOffset
          }).then(function(canvas) {
            that.$util.Tips({
              title: '生成成功，长按保存图片'
            })
            that.posterUrl = canvas.toDataURL('image/png')
          }).catch(() => {
            that.$util.Tips({
              title: '生成失败'
            })
            that.isHideBtn = false
          })
        }, 500)
      },
      // 生成二维码；
      make() {
        let that = this;
        const url =
          `${appConfig.SPREAD_DOMAIN}${appConfig.SPREAD_LINK}?redirectUrl=${appConfig.SPREAD_DOMAIN}&tenantId=${that.tenantId}&spreadId=${that.uid}`
        console.log('url', url)
        QRCode.toCanvas(document.getElementById('qrcode').querySelector('canvas'), url, {
          scale: 1.5
        }, function(error) {
          console.log(error)
        })
      },
      // 获取活动套餐信息
      async getActivityInfo() {
        try {
          uni.showLoading({
            title: '加载中',
            mask: true
          });
          const res = await memberGradeInfo()
          this.activityList = res.data
          // 生成二维码
          setTimeout(() => {
            this.make()
          }, 500)
        } catch (e) {
          this.$util.Tips({
            title: '获取活动信息失败'
          })
        } finally {
          uni.hideLoading()
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  page {
    background-color: #F8EEEF !important;
    height: 100vh;
    overflow: auto;
  }

  .main-page {
    height: 100%;
    overflow: auto;
  }

  .spread-wrap {
    min-height: 100%;
    background: url('@/static/images/spread_bg.png') center 0 no-repeat;
    background-size: 100% auto;
    position: relative;
    background-color: #F8EEEF;
  }

  .logo-wrap {
    text-align: center;
    padding-top: 53rpx;

    .logo-image {
      width: 160rpx;
      height: 141rpx;
    }
  }

  .tenant-info-wrap {
    margin: 30rpx 40rpx;
    padding: 30rpx 40rpx;
    border-radius: 20rpx;
    background: #fff;
    .info-wrap {
      display: flex;
      justify-content: space-between;
    }

    .qrcode-wrap {
      margin-left: 40rpx;
    }

    .address {
      margin-top: 18rpx;
    }

    .logon {
      width: 100%;
      height: 70rpx;
      margin-top: 40rpx;
      color: #FFFFFF;
      font-size: 28rpx;
      background: linear-gradient(0deg, #E63163 0%, #FF819F 100%);
      border-radius: 44rpx;
    }
  }

  .activity-wrap {
    margin: 212rpx 40rpx 0;
    border: 3px solid #FF77AA;
    border-radius: 20rpx;
    padding: 40rpx;

    .tips {
      font-size: 28rpx;
      color: #000;

      span {
        color: #C80D00;
        font-weight: bold;
      }
    }

    .extra-info{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 40rpx;
      font-size: 28rpx;
      .extra-item{
        flex: 1;
        .service-phone {
          font-size: 30rpx;
          color: #ED387C;
          font-style: italic;
          font-weight: bold;
        }
        span{
          color: #ED387C;
          margin-right: 4rpx;
        }
      }
    }

    .item-wrap {
      display: flex;
      align-items: center;
      padding: 10rpx 24rpx;
      border-radius: 20rpx;
      // background: linear-gradient(90deg, rgba(200, 16, 86, 1), RGBA(252, 183, 209, 1), RGBA(255, 245, 248, 1), rgba(200, 16, 86, 0));
      background: #fff;
      margin-bottom: 38rpx;

      .title {
        font-size: 42rpx;
        letter-spacing: 10rpx;
        color: #ED387C;
        font-weight: bold;
        font-style: italic;
        text-shadow: 0rpx 6rpx 4rpx #EEA5C0;
      }

      .line {
        width: 3rpx;
        height: 40rpx;
        margin: 0 30rpx;
        background-color: RGBA(238, 87, 143, 1);
      }

      .text-wrap {
        .text {
          font-size: 26rpx;
          font-style: italic;
          color: #010101;
          font-weight: bold;

          span {
            color: #C80D00;
          }

        }
      }
    }
  }
</style>
