<template>
    <el-dialog title="二维码" :visible.sync="dialogVisible" width="320px" class="dialog-info">
        <div class="info-wrp">
            <div class="img-wrp">
                <img :src="imgUrl" alt="" class="qcode-img" ref="imgQcode" v-if="imgUrl">
                <i class="el-icon-picture-outline" v-else></i>
            </div>
            <div class="btn-group">
                <el-row>
                    <el-button type="primary" @click="saveCode">保存</el-button>
                </el-row>
            </div>
        </div>
    </el-dialog>
</template>

<script>
    import api from '@/api/bike'
    export default {
        name: "view-qcode",
        data() {
            return {
                dialogVisible: false,
                imgUrl: '',
                plateNumber: ''
            }
        },
        methods: {
            open(plateNumber) {
                this.dialogVisible = true
                this.getCode(plateNumber)
                this.plateNumber = plateNumber
            },
            getCode(plateNumber) {
                api.showQRcode({ plateNumber }).then(res => {
                    console.log(res)
                    this.imgUrl = ' data:image/jpg;base64,' + res.results.QRCode
                }).catch(err => {
                    console.log(err)
                })
            },
            saveCode() {
                let img = this.$refs.imgQcode
                let url = img.src
                let a = document.createElement('a')
                let event = new MouseEvent('click')
                a.download = (this.plateNumber || 'qcode') + '.jpg'
                a.href = url
                a.dispatchEvent(event)
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .dialog-info {
        .img-wrp {
            text-align: center;
            .qcode-img {
                width: 250px;
                height: 250px;
                background-color: #eeeeee;
            }
            i {
                width: 250px;
                height: 250px;
                font-size: 250px;
            }
        }
        .info-wrp {
            margin-top: -20px;
            .btn-group {
                text-align: center;
                margin-top: 20px;
            }
        }
    }
</style>