<template>
    <div class='QR-code-wrap'>
        <div class="info-card">
            <div class="title">身份二维码</div>
            <div class="QR-wrap">
                <div class="temp">
                    <div class="QRImg" ref="qrCodeUrl"></div>
                </div>
                <div class="hint">
                    <div>本码用于领取物资！请妥善保管二维码！</div>
                    <div>（刷新倒计时：<span style="color:red">{{times}}s</span>）
                    </div>
                </div>
            </div>
            <div class="button" @click="Update">刷新</div>
        </div>
        <img class="bottom-img" src="@/assets/image/logo.png" alt="">
    </div>
</template>
<script>
import QRCode from 'qrcodejs2'
import { GetQRCode } from 'api/QRCode'

export default {
    name:'QRCode',
    data(){
        return {
            times: 0,
            Code: null,
            timer: null,
            upDateTime:30
        }
    },
    activated(){
        this.Code = sessionStorage.Code
        if(this.Code){
            this.getQRCode(this.Code)
        }else{
            this.$Toast.error('未认证人脸信息！即将返回！')
            setTimeout(() => {
                this.$router.push('/home')
            },800)
        }
    },
    deactivated(){
        clearInterval(this.timer)
    },
    methods:{
        getQRCode(code,flag){
            GetQRCode(code).then(res =>{
                if(res.code === 0){
                    this.QRCode = res.data.Code
                    this.creatQrCode(this.QRCode)
                    if(flag){                         //如果是刷新操作则提示一下
                        this.$Toast.success('二维码刷新成功')
                    }
                }else{
                    this.$Toast.error('查询二维码失败！即将返回！')
                    setTimeout(() => {
                        this.$router.push('/home')
                    },800)
                }
            })
        },
        Update(){                  //刷新二维码
            this.getQRCode(this.Code,true)
        },
        creatQrCode(text) {       //创建二维码
            clearInterval(this.timer)
            this.times = this.upDateTime
            this.$refs.qrCodeUrl.innerHTML = ''       //每次创建二维码先清空之前的二维码图片
            var qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text:text,
                width:200,
                height:200,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.H
            })
            // 每三十秒刷新一次二维码
            this.timer = setInterval(() => {
                if(this.times == 0){
                    this.getQRCode(this.Code,true)
                }else{
                    this.times --
                }
            },1000)
        },
    }
}
</script>
<style lang="stylus" scoped>
    .QR-code-wrap
        box-sizing border-box
        width 100%
        overflow hidden
        height 100vh
        position relative
        .bottom-img
            position absolute 
            bottom 0px
            width 100%
            left 0
        .info-card
            position relative
            z-index 999
            width 90%
            border-radius 15px
            background white
            margin 0 auto
            display flex
            flex-direction column
            justify-content center
            align-items center
            padding-bottom 30px
            overflow hidden
            margin-top 70px
            .title
                Title()
            .button
                Button()
            .QR-wrap
                width 100%
                display flex
                justify-content center
                flex-direction column
                align-items center
                padding 20px
                box-sizing border-box
                .temp
                    width 224px
                    height 224px
                    box-sizing border-box
                    padding 10px
                    border 2px dotted #eee
                    border-radius 5px
                    .QRImg 
                        display flex
                        justify-content center
                        font-size 0
                .hint
                    font-size 12px
                    color #666
                    margin-top 10px
                    text-align center
                    div
                        margin-top 15px




</style>
