<template>
    <view>
        <uni-section :title="`${cardRuleName}(${cardTypeName})`" type="line">
            <uni-card padding="0" spacing="0">
                <uni-list>
                    <uni-list-item title="适应车场" :rightText="plName">
                        <text></text>
                    </uni-list-item>
                    <uni-list-item :title="`价格：¥${(price/100).toFixed(2)}/张`" :rightText="`商户库存：${cardNum}张`"></uni-list-item>
                </uni-list>
            </uni-card>
        </uni-section>

        <view class=" uni-card" style="padding: 10px 0">
            <view class="qr-box">
                <canvas canvas-id="qrcode" v-show="qrShow" style="width: 300rpx;height:300rpx;margin: 0 auto;"/>
            </view>
        </view>

        <view class="tip-wrap">
            <uni-notice-bar single text="温馨提示:"/>
            <uni-notice-bar single text="卡券自动发放，扫码领券后会自动刷新卡券二维码。"/>
        </view>

        <view class="uni-padding-wrap uni-common-mt">
            <button type="primary" style="margin-bottom: 15px" @click="stopProvide">{{provideText}}</button>
            <button type="warn" @click="toPrintCard">生成静态二维码图片</button>
        </view>


    </view>
</template>

<script>
import uQRCode from '../../common/uqrcode.js' //引入uqrcode.js
export default {
  data() {
    return {
      qrShow: false,
      cardTypeName: '',// 卡类型名称
      cardRuleName: '',// 卡名称
      plName: '', // 停车场
      price: '', // 卡价格
      cardNum: '', // 库存
      timer: null, // 定时器
      qrUrl: '',// 二维码url
      provideText:'停止自动发放',
      cardRelParkNo:'',//商券规则关联车场和商户编码
    }
  },
  onLoad(params) {
    let that =  this
    wx.showShareMenu({
      withShareTicket: true
    })
    let option = JSON.parse(params.optionData)
    console.log(option)
    this.cardRelParkNo = option.cardRelParkNo
    this.cardTypeName = option.cardTypeName
    this.cardRuleName = option.cardRuleName
    this.plName = option.plName
    this.price = option.value
    this.cardNum = option.cardNum
    // this.maxNum = option.cardNum
    this.getCouponDynamicQR()
    that.timer = setInterval(() => {
      // 业务逻辑
      console.log(that.dateFormat(Date.parse(new Date())))
      that.getCouponDynamicQR() //调用二维码方法
    }, 60000)
  },
  onUnload() {
    let me = this
    if(me.timer) {
      clearTimeout(me.timer);
      me.timer = null;
    }
  },
  onShow() {
    var me = this;
  },
  computed: {},
  methods: {
    dateFormat(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      // 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
      let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return year + "年" + month + "月" + day + "日" + hours + ":" + minutes + ":" + seconds;
      // return year + "-" + month + "-" + day;
    },
    getCouponDynamicQR() {
      let that = this
      let paramsData = {
        cardRelParkNo: this.cardRelParkNo,
        codeType: '2'
      }
      // 首页信息获取 接口
      that.$myRequest({
        url: that.$common.getCouponDynamicQR,
        method: 'POST',
        data: that.$common.requestSign(paramsData)
      }).then(res => {
        console.log(res)
        that.qrUrl = res.data.qrUrl
        that.qrFun(that.qrUrl) //调用二维码方法

        console.log(that.qrUrl)
      })
    },
    //**生成二维码**//
    qrFun: function (text) {
      this.qrShow = true
      uQRCode.make({
        canvasId: 'qrcode',
        componentInstance: this,
        text: text,
        size: 130,
        margin: 0,
        backgroundColor: '#ffffff',
        foregroundColor: '#000000',
        fileType: 'jpg',
        errorCorrectLevel: uQRCode.errorCorrectLevel.H,
        success: res => {
        }
      })
    },
    stopProvide: function () {
      let that = this
      // provideText:'停止自动发放'
      if(that.provideText == '停止自动发放'){
        that.provideText = '开始自动发放'
        clearInterval(that.timer)
        that.timer = null;
      }else{
        that.provideText = '停止自动发放'
        that.qrFun(that.qrUrl) //调用二维码方法
        that.timer = setInterval(() => {
          // 业务逻辑
          console.log('11')
          that.getCouponDynamicQR() //调用二维码方法
        }, 60000)
      }
    },
    toPrintCard: function () {
      uni.navigateTo({

        url: '../businessCard/printCard?cardRelParkNo='+this.cardRelParkNo+
        '&cardTypeName='+ this.cardTypeName+
        '&cardRuleName='+this.cardRuleName+
        '&plName='+this.plName+
        '&price='+this.price+
        '&cardNum='+this.cardNum
      });
    }
  }
}
</script>

<style lang="scss" scoped>
    /deep/ .uni-section {
        padding-bottom: 10px;
    }




    .tip-wrap /deep/ .uni-noticebar {
        margin-bottom: 0;
    }
</style>
