(() => { 
    let LOGINED = localStorage.getItem('logined') == '1';
    function addStyle(styleStr) { 
        var style = document.createElement('style');
        style.innerHTML = styleStr;
        document.getElementsByTagName('head')[0].appendChild(style);
    }
    if (!LOGINED) {
        addStyle(`
            .btn_login {
                background-color: #2C999A; 
                color: #fff; 
                padding: 10px 20px;
                cursor: pointer;
                border-radius: 3px;
            }
            .form-login {
                padding: 20px 50px;
            }
            .form-login .row {
                padding: 10px 0;
            }
            .form-login label {
                display:inline-block;
                width: 60px;
                margin-right: 5px;
                text-align: right;
            }
            .form-login input {
                padding: 5px 10px;
                border: 1px solid #ccc;
                border-radius: 5px;
                width: 200px;
            }
            .form-login button {
                border: none;
                outline: none;
                margin: 0 auto;
                display: block;
            }
        `);
        $(`<div id="btn_login" class="btn_login fr">登录</div>
        `).insertAfter($('.search'));
        $('.btn_login').on('click', function () { 
            let html = '<div class="form-login">';
                html += '<div class="row">';
                    html += '<label>用户名</label>';
                    html += '<input id="username" type="text" placeholder="请输入用户名"/>';
                html += '</div>';
                html += '<div class="row">';
                    html += '<label>密码</label>';
                    html += '<input id="pwd" type="password" placeholder="请输入密码"/>';
                html += '</div>';
                html += '<div class="row">';
                    html += '<button id="form_btn" class="btn_login">登录</button>';
                html += '</div>';
            html += '</div>';
            show_dialog(html, '登录');
        });

        $('body').delegate('#form_btn', 'click', function () { 
            let username = $('#username').val();
            let pwd = $('#pwd').val();
            if (username == 'pcjk' && pwd == 'pcjk@123') {
                close_dialog();

                LOGINED = true;
                localStorage.setItem('logined', '1');
                $('#btn_login').remove();
                $('.search').show();
            } else { 
                alert('请输入正确的用户名和密码');
            }
        });
    } else { 
        $('.search').show();
    }
    $('.y_list li').on('click', function (e) {
        if (!LOGINED) {
            e.preventDefault();

            let html = '<div style="text-align: center;width: 400px; padding: 20px 0;">';
            html += '<div>支付金额</div>';
            html += '<div style="color: #e51d23;">¥<span style="font-size: 40px;">200</span></div>';
            html += '<div><img src="./qrcode.png.html" style="width: 300px;"/></div>';
            // html += '<div>请使用微信扫码支付</div>';
            html += '</div>'
            show_dialog(html, '付费查看');
        }
    });

    var $dialog;

    function init_dialog() { 
        if (!$dialog) {
            addStyle(`
                .dialog {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 9999;
                    display: none;
                }
                .dialog.on {
                    display: block;
                }
                .dialog-mask {
                    background-color: rgba(0, 0, 0, 0.3);
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 1;
                }
                .dialog-content {
                    min-width: 200px;
                    min-height: 200px;
                    background: #fff;
                    border-radius: 5px;
                    position: fixed;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 2;
                    padding: 10px;
                }
                .btn_close {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    cursor: pointer;
                    width: 20px;
                    height: 20px;
                }
                .btn_close::before,
                .btn_close::after{
                    content: '';
                    display: block;
                    height: 2px;
                    width: 14px;
                    border-radius: 2px;
                    background-color: #ccc;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%) rotate(45deg);
                }
                .btn_close::after {
                    transform: translate(-50%, -50%) rotate(-45deg);
                }
                .btn_close:hover::before,
                .btn_close:hover::after {
                    background-color: #aaa;
                }
                .title {
                    font-size: 14px;
                    padding: 3px 0 8px;
                    border-bottom: 1px solid #ccc;
                }
            `);

            var html = '<div class="dialog on">';
            html += '<div class="dialog-mask"></div>';
            html += '<div class="dialog-content">';
                html += '<div class="title"></div>';
                html += '<div class="btn_close"></div>';
                html += '<div class="content"></div>';
            html += '</div > ';
            html += '</div>'
            $dialog = $(html).appendTo($('body'));

            $dialog.on('click', '.dialog-mask', function () {
                $dialog.removeClass('on');
            });
            $dialog.on('click', '.btn_close', function () {
                $dialog.removeClass('on');
            });
        }
    }
    function show_dialog(content, title = '') { 
        init_dialog();

        console.log(content, title)
        $dialog.find('.dialog-content .title').html(title);
        $dialog.find('.dialog-content .content').html(content);
        $dialog.addClass('on');
    }
    function close_dialog() { 
        $dialog.removeClass('on');
    }
})();