<%+cbi/valueheader%>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<style>
    #mask-box {
        z-index: 1000;
        display: flex;
        position: absolute;
        text-align: center;
        background: rgba(255, 255, 255, .8);
    }
    #mask-box #code-box {
        color: #000000;
        width: 288px;
        height: 325px;
        border: 1px solid #585858;
        padding: 15px;
        position: absolute;
        box-shadow: 0px 0px 7px 3px rgb(0 0 0 / 20%);
        background: #fff url('data:image/gif;base64,[encoded data, 21656 characters]') no-repeat center center;
        border-radius: 4px;
    }
    #mask-box #code-box img {
        margin-top: 5px;
    }
    #mask-box #close-link {
        float: right;
        width: 32px;
        height: 32px;
        margin: -32px;
        cursor: pointer;
        overflow: hidden;
        background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHhtbDpzcGFjZT0icHJlc2VydmUiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB5PSIwIiB4PSIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSLlnJblsaRfMSIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iNDdweCIgaGVpZ2h0PSI0N3B4IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgc3R5bGU9IndpZHRoOjEwMCU7aGVpZ2h0OjEwMCU7YmFja2dyb3VuZC1zaXplOmluaXRpYWw7YmFja2dyb3VuZC1yZXBlYXQteTppbml0aWFsO2JhY2tncm91bmQtcmVwZWF0LXg6aW5pdGlhbDtiYWNrZ3JvdW5kLXBvc2l0aW9uLXk6aW5pdGlhbDtiYWNrZ3JvdW5kLXBvc2l0aW9uLXg6aW5pdGlhbDtiYWNrZ3JvdW5kLW9yaWdpbjppbml0aWFsO2JhY2tncm91bmQtY29sb3I6aW5pdGlhbDtiYWNrZ3JvdW5kLWNsaXA6aW5pdGlhbDtiYWNrZ3JvdW5kLWF0dGFjaG1lbnQ6aW5pdGlhbDthbmltYXRpb24tcGxheS1zdGF0ZTpwYXVzZWQiID48ZyBjbGFzcz0ibGRsLXNjYWxlIiBzdHlsZT0idHJhbnNmb3JtLW9yaWdpbjo1MCUgNTAlO3RyYW5zZm9ybTpyb3RhdGUoMGRlZykgc2NhbGUoMC44LCAwLjgpO2FuaW1hdGlvbi1wbGF5LXN0YXRlOnBhdXNlZCIgPjxjaXJjbGUgZmlsbD0iIzMzMyIgcj0iNDAiIGN5PSI1MCIgY3g9IjUwIiBzdHlsZT0iZmlsbDpyZ2IoODksIDg5LCA4OSk7YW5pbWF0aW9uLXBsYXktc3RhdGU6cGF1c2VkIiA+PC9jaXJjbGU+CjxnIHN0eWxlPSJhbmltYXRpb24tcGxheS1zdGF0ZTpwYXVzZWQiID48cGF0aCBkPSJNMjUuMyA0NWg0OS41djEwSDI1LjN6IiBmaWxsPSIjZTE1YjY0IiB0cmFuc2Zvcm09InJvdGF0ZSgtNDQuOTk2IDQ5Ljk5NyA0OS45OTcpIiBzdHlsZT0iZmlsbDpyZ2IoMjU1LCAyNTUsIDI1NSk7YW5pbWF0aW9uLXBsYXktc3RhdGU6cGF1c2VkIiA+PC9wYXRoPjwvZz4KPGcgc3R5bGU9ImFuaW1hdGlvbi1wbGF5LXN0YXRlOnBhdXNlZCIgPjxwYXRoIGQ9Ik00NSAyNS4zaDEwdjQ5LjVINDV6IiBmaWxsPSIjZTE1YjY0IiB0cmFuc2Zvcm09InJvdGF0ZSgtNDUuMDAxIDUwIDUwKSIgc3R5bGU9ImZpbGw6cmdiKDI1NSwgMjU1LCAyNTUpO2FuaW1hdGlvbi1wbGF5LXN0YXRlOnBhdXNlZCIgPjwvcGF0aD48L2c+CjxtZXRhZGF0YSB4bWxuczpkPSJodHRwczovL2xvYWRpbmcuaW8vc3RvY2svIiBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6cGF1c2VkIiA+PGQ6bmFtZSBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6cGF1c2VkIiA+Y2xvc2U8L2Q6bmFtZT4KPGQ6dGFncyBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6cGF1c2VkIiA+Y2xvc2UscmVqZWN0LG9mZixkaXNhYmxlLHJlbW92ZSxkZWxldGUsY2FuY2VsLGRyb3AsY29sbGFwc2U8L2Q6dGFncz4KPGQ6bGljZW5zZSBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6cGF1c2VkIiA+Ynk8L2Q6bGljZW5zZT4KPGQ6c2x1ZyBzdHlsZT0iYW5pbWF0aW9uLXBsYXktc3RhdGU6cGF1c2VkIiA+bmVmM2Q0PC9kOnNsdWc+PC9tZXRhZGF0YT48L2c+PCEtLSBnZW5lcmF0ZWQgYnkgaHR0cHM6Ly9sb2FkaW5nLmlvLyAtLT48L3N2Zz4=') no-repeat center center;
    }
    #mask-box #load-link {
        color: #fbfbfb;
        left: 0;
        right: 0;
        margin: 0 10px;
        bottom: 115px;
        cursor: pointer; 
        display: block;
        position: absolute;
        background: #e4393c;
        line-height: 48px;
        text-decoration: none;
    }
    div[id$="-html"] {
        display: none;
    }
</style>

<script type="text/javascript">
(function( window, document, undefined ) {
    // 选取 DOM 元素
    var selector, section = document.querySelector("[id$='refresh_token']");

    // 遮罩容器
    var mask = document.createElement('div');
    mask.id = 'mask-box';

    // 二维码容器
    var code = document.createElement('div');
    code.id = 'code-box';
    code.innerHTML = "请使用 阿里云盘 App 进行扫码认证";

    // 刷新按钮
    var load = document.createElement('a');
    load.id = 'load-link';
    load.innerHTML = "刷新";

    // 创建二维码
    var make = new QRCode( code, { correctLevel: QRCode.CorrectLevel.L });
    make.clear = function() {
        code.getElementsByTagName("img").item(0).removeAttribute('src');
        this._oDrawing.clear();
    }

    // 关闭按钮
    var link = document.createElement('a');
    link.id = 'close-link';
    link.addEventListener('click', ( e ) => {
        XHR.halt();
        XHR._q = [];
        mask.remove();
        return false;
    });

    // 二维码层居中
    var center = function() {
        // 调整遮罩层覆盖范围
        mask.style.width = section.clientWidth + "px";
        mask.style.height = section.clientHeight + "px";
        // 二维码层居中
        var top = selector.offsetTop - selector.parentNode.offsetTop;
        if ( selector.offsetTop <= 380 ) {
            code.style.top = top + selector.offsetHeight + "px";
        } else {
            code.style.top = top - code.offsetHeight + "px";
        }
        code.style.left = ( ( section.offsetWidth - code.offsetWidth ) / 2 ) + parseInt( ( selector.currentStyle || window.getComputedStyle( selector ) ).marginLeft ) + "px";
    };

    // 获取二维码
    var feedback = function() {
        // 清除二维码
        make.clear();
        // 获取通信数据
        XHR.get( '<%=luci.dispatcher.build_url("admin", "services", "aliyundrive-webdav","qrcode")%>', null, ( x, d ) => {
            if ( x.status != 200 ) {
                alert('获取二维码失败!');
                return false;
            }
            // 移除刷新
            load.remove();
            // 创建二维码
            make.makeCode("https://www.aliyundrive.com/o/oauth/authorize?sid=" + d.sid);
            // 监听扫码反馈
            XHR.poll( 3, '<%=luci.dispatcher.build_url("admin", "services", "aliyundrive-webdav", "query")%>', { sid: d.sid }, ( x, d ) => {
                if ( d.refresh_token.trim() ) {
                    // 清除线程
                    XHR.halt();
                    XHR._q = [];
                    // 回写 Cookie 数据
                    mask.remove();
                    selector.value = d.refresh_token.trim();
                }
            });
        });
    };

    // 鼠标事件
    var event = function( e ) {
        // 区分单击、双击事件
        if ( e.target.tagName == "INPUT" && e.type == "dblclick" ) {
            selector = e.target;
        } else if ( e.target.tagName == "IMG" && e.type == "click" && /add/ig.test( e.target.src ) ) {
            selector = section.getElementsByTagName("INPUT");
            selector = selector.item( selector.length - 1 );
        } else {
            return false;
        }
        // 插入容器
        if ( !document.contains( mask ) ) {
            section.prepend( mask );
            mask.prepend( code );
            code.prepend( link );
            center();
        }
        // 获取及监听扫码事件
        feedback();
    };

    // 绑定事件
    section.addEventListener( 'click', event );
    section.addEventListener( 'dblclick', event );
})( window, document );
</script>
<%+cbi/valuefooter%>
