<template>
  <div class="authorization">
    <cy-dialog ref="dialog" title="微信扫码认证" :width="activeInfo.length > 1 ? '70%' : '600px'" top="8vh" @close="openDialog(false)">
      <div class="wechat-content">
        <div v-for="item in activeInfo" :key="item.id">
          <img :src="item.fullQrcodeUrl" class="img-box" />
          <div class="tips" :style="activeInfo.length > 1 ? 'text-align: center' : ''">需要：<span style="color: #FE7D0B">{{ item.authenticator }}</span>，使用<span style="color: #FE7D0B">微信</span>扫描二维码进行认证</div>
          <div class="tips" :style="activeInfo.length > 1 ? 'text-align: center' : ''">注意：请在<span style="color: #FE7D0B">{{ defaultAcitveTime }}小时</span>内完成授权操作</div>
        </div>
      </div>
      <div class="btn" @click="openDialog(false)">
        <div>我知道了</div>
        <div v-if="hideCuntdown" class="count-down">
          （<div><span>倒计时:</span></div>
          <div>
            <count-down
              :current-time="countDownStart"
              :start-time="countDownStart"
              :end-time="countDownEnd"
              :tip-text="'距离开始文字1'"
              :tip-text-end="'距离结束文字1'"
              :end-text="'结束自定义文字2'"
              :day-txt="'天'"
              :hour-txt="'小时'"
              :minutes-txt="'分钟'"
              :seconds-txt="'秒'"
              @start_callback="startCall"
              @end_callback="endCall"
            />
          </div>）
        </div>
      </div>
    </cy-dialog>
  </div>
</template>

<script>
// 到计时文档 https://github.com/Gala-1024/vue2-countdown?tab=readme-ov-file
import CountDown from 'vue2-countdown'
export default {
  components: {
    CountDown
  },
  props: {
    startDate: {
      type: String,
      default: ''
    },
    activeInfo: {
      type: Array,
      default: () => []
    },
    goList: {
      type: Boolean,
      default: false
    },
    freshPage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      timeReduce: 48 * 60 * 60 * 1000,
      countDownNow: new Date().getTime(),
      countDownStart: 0,
      countDownEnd: 0,
      defaultAcitveTime: 48,
      hideCuntdown: true
    }
  },
  watch: {
    activeInfo: {
      handler(val) {
        console.log('activeInfo-----', val)
        if (val && val.length) {
          this.hideCuntdown = true

          this.payTime = this.calcTimes(val[0].qrCodeEffectTime)
          this.countDownEnd = new Date(this.payTime).getTime() || 0
          if (this.countDownEnd - new Date().getTime() > this.timeReduce) {
            this.countDownStart = this.countDownEnd - this.timeReduce
          } else {
            this.countDownStart = new Date().getTime()
          }

          val.forEach((el) => {
            if (el.qrCode !== null && el.qrCode !== '') {
              const base64Prifix = 'data:image/png;base64,'
              let tempQrcodeUrl = ''

              if (el.qrCode.indexOf(base64Prifix) > -1) {
                tempQrcodeUrl = val.qrCode
              } else {
                tempQrcodeUrl = base64Prifix + el.qrCode
              }
              const url = URL.createObjectURL(this.base64ToBlob(tempQrcodeUrl))

              el.fullQrcodeUrl = url
            }
          })
        }
      }
    }
  },
  methods: {
    openDialog(status) {
      this.$refs.dialog.show = status

      if (status === false && this.goList) {
        this.$router.push({
          name: 'CyAccountManage'
        })
      }

      if (status === false && this.freshPage) {
        this.$router.go(0)
      }

      if (status && this.activeInfo && this.activeInfo.length) {
        this.payTime = this.calcTimes(this.activeInfo[0].qrCodeEffectTime)
        this.countDownEnd = new Date(this.payTime).getTime() || 0
        this.countDownStart = new Date().getTime()
      }
    },
    // 默认+48小时
    calcTimes(time) {
      if (!time) return ''
      const givenTime = new Date(time.replace(/-/g, '/'))
      const newTime = new Date(givenTime.getTime() + this.timeReduce)
      const formattedTime = newTime.getFullYear() + '-' +
      String(newTime.getMonth() + 1).padStart(2, '0') + '-' +
      String(newTime.getDate()).padStart(2, '0') + ' ' +
      String(newTime.getHours()).padStart(2, '0') + ':' +
      String(newTime.getMinutes()).padStart(2, '0') + ':' +
      String(newTime.getSeconds()).padStart(2, '0')

      return formattedTime || ''
    },
    startCall() {
      this.hideCuntdown = true
    },
    endCall() {
      this.hideCuntdown = false
    },
    base64ToBlob(base64, type = 'image/png') {
      const binary = atob(base64.split(',')[1])
      const array = []
      for (let i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i))
      }
      return new Blob([new Uint8Array(array)], { type: type })
    }
  }
}
</script>

<style lang="scss" scoped>
.authorization {
  .wechat-content {
    display: flex;
    justify-content: space-around;
    padding: 40px 60px;
    .img-box {
      width: 360px;
      height: 360px;
      margin: 0 auto;
      background: red;
      margin-bottom: 20px;
    }
    .tips {
      color: #333;
      font-size: 16px;
      line-height: 30px;
    }

  }
  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FE7D0B;
    border-radius: 30px;
    padding: 6px;
    color: #fff;
    text-align: center;
    font-size: 12px;
    max-width: 360px;
    height: 46px;
    margin: 0 auto;
    margin-top: 30px !important;
    cursor: pointer;
    .count-down {
      // margin-top: 5px;
      // height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
<style lang="scss">
.authorization {
  .btn {
    .count-down {
      height: 13px;
      p {
        span {
          margin-right: 4px;
        }
        i {
          margin-right: 4px;
          font-style: normal;
        }
      }
    }
  }
}
</style>
