<template>
    <div>
        <div class="adminPart" v-show="!posterPart">
            <div class="box">
                <div id="qrcode" ref=box></div>
                <h5>{{shopname}}</h5>
                <p>{{qrname}} 房间</p>
                <span>检测房间安全请您扫描二维码</span>
            </div>
            <el-button v-print="'#printMer'" id="coryCode" type="primary" @click="printQrcode">打印二维码</el-button>
            <el-button id="goback" type="primary" @click="goback">返回列表</el-button>
        </div>
        <div id="printMer" class="posterPart " v-show="posterPart">
            <div class="poster">
                <img src="img/poster/tickdig%20logo@2x.png" alt="">
                <h5>安全监控系统</h5>
                <div id="qrcode2" ref=box2></div>
                <p>检测房间安全请您扫描二维码</p>
                <div class="btmInfo">
                    <p>
                        <span>{{shopname}}</span> &nbsp;●&nbsp; <s>{{qrname}}</s>
                    </p>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    import QRCode from 'qrcodejs2'
    import md5 from 'js-md5';

    let Base64 = require('js-base64').Base64;
    import Print from 'vue-print-nb'

    export default {
        data() {
            return {
                posterPart: false,
                shopname: '',
                qrname: '',
                qrcodeId: '',
                getVfcode: '',
            }
        },
        mounted() {
            this.getInfo();
        },
        methods: {
            getInfo() {
                this.shopname = this.$route.query.shopname;
                this.qrname = this.$route.query.qrname;
                this.qrcodeId = this.$route.query.qrcodeId;
                this.getVfcode = this.$route.query.getVfcode;
                let webSite = "http://sd.tickdig.com:85/#/";
                let times = Base64.encode(new Date());
                let url = "/poster?q=" + Base64.encode(this.qrcodeId) + "&c=" + Base64.encode(1) + '&t=' + times + '&v=' + Base64.encode(this.getVfcode);
                this.writeQrcode(webSite + url);
                let testSite = "http://192.168.0.162:8080" + url;
                console.log(testSite);
                console.log(webSite + url);
            },
            writeQrcode(url) {
                this.$refs.box.innerHTML = "";
                this.$refs.box2.innerHTML = "";
                let qrcode = new QRCode('qrcode', {
                    width: 220,
                    height: 220, // 高度
                    text: url, // 二维码内容
                    background: '#000000',
                    foreground: '#ffffff'
                });
                let qrcode2 = new QRCode('qrcode2', {
                    width: 180,
                    height: 180, // 高度
                    text: url, // 二维码内容
                    background: '#000000',
                    foreground: '#ffffff'
                });
            },
            printQrcode() {
                this.posterPart = true;
            },
            goback() {
                this.$router.push({path: '/qrcodemanage'});
            }
        },

    }
</script>

<style scoped>
    #qrcode {
        width: 220px;
        height: 220px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #0B628D;
    }

    body {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #F9F9F9;
    }

    .box {
        width: 92%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.09);
        background: #FFFFFF;
        border-radius: 11px;
        margin-top: 26px;
        padding: 48px 0px;
    }

    .box h5 {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: center;
        font-size: 26px;
        font-weight: normal;
        margin-top: 18px;
    }

    .box p {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: center;
        font-size: 22px;
    }

    .box span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: center;
        margin-top: 44px;
        font-size: 14px;
        color: #4C4C4C;
    }

    button {
        width: 92%;
        height: 59px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 40px;
        background: #32C5FF;
        border-radius: 5px;
        color: #fff;
        text-align: center;
        font-size: 22px;
        border: none;
        outline: none;
    }

    .copyrights {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        color: #575757;
        font-size: 12px;
        text-align: center;
        margin-top: 30px;
        margin-bottom: 11px;
    }

    .posterPart {
        width: 280px;
        /*height: 1400px;*/
        overflow: hidden;
        display: block;
        margin: 0 auto;
        box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
        margin-top: 23px;
        padding-top: 27px;
        border-radius: 11px;
        background: #fff;
    }

    .poster > img {
        width: 107px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .posterPart h5 {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: center;
        font-size: 24px;
        font-weight: normal;
        margin-top: 12px;
        margin-bottom: 23px;
    }

    #qrcode2 {
        width: 180px;
        margin: 0 auto;
    }

    .poster p {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        text-align: center;
        font-size: 14px;
        margin-top: 12px;
        margin-bottom: 28px;
    }

    .btmInfo {
        width: 100%;
        padding-top: 31px;
        padding-bottom: 31px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #08BF96;
        color: #fff;
    }

    .btmInfo p {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .btmInfo span {
        /*width: 100%;*/
        overflow: hidden;
        /*display: block;*/
        /*margin: 0 auto;*/
        text-align: center;
        font-size: 24px;
    }

    .btmInfo s {
        width: 100%;
        overflow: hidden;
        /*display: block;*/
        /*margin: 0 auto;*/
        text-align: center;
        font-size: 24px;
        text-decoration: none;
    }

    .big {
        width: 360px;
    }

    .big h5 {
        margin-top: 25px;
        margin-bottom: 45px;
    }

    .big .poster > p {
        margin-top: 30px;
    }

    .big .btmInfo {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .big #qrcode2 {
        width: 180px;
        margin: 0 auto;
    }

    #goback {
        display: block;
        margin-left: 0;
        margin: 0 auto;
        margin-top: 40px;
    }
</style>
