<template>
    <div>
        <lj-win-common title="二维码名片" :show-back="true" ref="baseWin">
            <mu-button icon slot="header_right" @click="handleMenus">
                <i class="iconfont icon-more"></i>
            </mu-button>
            <div class="bkground" slot="body">
                <mu-paper mu-paper :z-depth="3" class="login">
                    <div style="text-align:left;font-size:15px;font-weight:bold;margin-left:10px;">
                        <svg class="icon" aria-hide="true">
                            <use xlink:href="#icon-xing1"></use>
                        </svg>
                        {{username}}
                    </div>
                    <div style="text-align:left;font-size:15px;margin-left:30px;">{{usercode}}</div>
                    <div class="loginfrom" style="text-align:center;">
                        <qrcode :value="qrcode" type="img" style="margin:15px 0"></qrcode>
                    </div>
                    <div style="text-align:center;font-size:12px;color:#666;margin: 10px 0 10px 20px">
                        二维码名片有效期为5分钟,过期重新生成</div>
                </mu-paper>
            </div>
        </lj-win-common>
    </div>
</template>

<script>
    import ljWinCommon from "components/lj-win-common";
    import {
        Qrcode
    } from 'vux'
    export default {
        components: {
            ljWinCommon,
            Qrcode
        },
        data() {
            return {
                qrcode: "",
                username: "",
                usercode: "",
                qrcodeObj: {},
            }
        },
        created() {
            this.username = $lj.getStorage("user").username;
            this.usercode = $lj.getStorage("user").usercode;
            this.refresh();
        },
        methods: {
            refresh() {
                let self = this;
                $lj.postLJRequest("GetL1APPQrcode", {
                    token: $lj.getStorage("token"),
                    type: 0
                }, function (ret) {
                    if (ret) {
                        self.qrcodeObj = ret.Qrcode;
                        self.qrcode = self.qrcodeObj.qrcode;
                    }
                })
            },
            handleMenus() {
                let self = this;
                api.actionSheet({
                    // title: '底部弹出框测试',
                    cancelTitle: '取消',
                    buttons: ['重新生成二维码',]
                }, function (ret, err) {
                    var index = ret.buttonIndex;
                    if (index === 1) {
                        self.reloadQrcode();
                    }
                });
            },
            reloadQrcode(){
                let self = this;
                $lj.postLJRequest("GetL1APPQrcode", {
                    token: $lj.getStorage("token"),
                    type: 1,
                }, function (ret) {
                    if (ret) {
                        self.qrcodeObj = ret.Qrcode;
                        self.qrcode = self.qrcodeObj.qrcode;
                    }
                })
            }
        },
    }
</script>

<style>
    body {
        margin: 0;
        padding: 0;
        background-color: #64C1C8;
        font-family: "微软雅黑";
    }

    .login {
        position: fixed;
        top: 30%;
        width: 90%;
        /* background-color: #ffffff; */
        border-radius: 20px;
        margin: 0px 20px 0% 20px;
        padding: 10px 10px 15px 10px;
        z-index: 9999;
    }
</style>