<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户中心</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>

<body>
<div class="layui-layout layui-layout-admin">
    <div id="header"></div>
    <div class="layui-body" style="left: 0px;">
        <div style="width: 40%;height: 25%;margin-left: 25%; margin-top: 2%;">
            <blockquote class="layui-elem-quote" style="background-color: #FFFFFF; height: 50%;">
                <div align="center">
                    哔哩哔哩账号,用于后台监控数据及录屏~
                    <p></p>
                    <a href="javascript:;" id="login"><img src="https://static.hdslb.com/images/akari.jpg"
                                                           class="layui-nav-img" id="bili_icon_img"
                                                           style="height: 80%;width: 10%">
                        <p></p>
                        <span id='bili_login_text'>管理员哔哩哔哩登陆</span></a>
                </div>
            </blockquote>
            <div class="layui-card" style="margin-top: 5%;height: 120%">
                <div class="layui-card-header">用户设置</div>
                <div class="layui-card-body">
                    <form class="layui-form" action="" style="margin-top: 2%;width: 80%">
                        <div class="layui-form-item">
                            <label class="layui-form-label">修改名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="user" required lay-verify="required" placeholder="新名称"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">修改密码</label>
                            <div class="layui-input-block">
                                <input type="password" name="password" required lay-verify="required" placeholder="新密码"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" type="button" lay-submit lay-filter="formDemo">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div id="config" class="layui-card" style="margin-top: 5%;height: 100%;display: none">
                    <div class="layui-card-header">系统设置</div>
                    <div class="layui-card-body">
                        <form class="layui-form" action="" style="margin-top: 2%;width: 80%">
                            <div class="layui-form-item">
                                <label class="layui-form-label">开放注册</label>
                                <div class="layui-input-block">
                                    <input id="userReg" type="checkbox" lay-filter="userReg" lay-skin="switch" lay-text="开启|关闭">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">保存阿B数据</label>
                                <div class="layui-input-block">
                                    <input id="saveBiliLive" type="checkbox" lay-filter="saveBiliLive" lay-skin="switch" lay-text="开启|关闭">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


        </div>

    </div>
    <div id="footer"></div>
</div>

<script src="/layui/layui.js"></script>
<script src="/js/jquery-3.2.1.js"></script>
<script src="/js/qrcode.min.js"></script>
<script>
    layui.use(['layer', 'form', 'element'], function () {
        let layer = layui.layer
            , form = layui.form;
        form.on('submit(formDemo)', function (data) {
            console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
            $.post('/user/set/update.do', data.field, function (json) {
                if (json.code !== undefined) {
                    layer.msg(json.msg)
                    if (josn.code === 0) {
                        window.location.reload()
                    }
                } else {
                    layer.msg("可能未登录")
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
        });
        $.post('/system/get/config.do', function (json) {
            if (json.code !== undefined) {
                $('#config').css('display', 'block')
                if (json.data.userReg === '1') {
                    $('#userReg').prop('checked', true);
                }
                if (json.data.biliLive === '1') {
                    $('#saveBiliLive').prop('checked', true);
                }
                form.render();
            }
        })
        form.on('switch(userReg)', function (data) {
            let flag = data.elem.checked ? '1' : '0';
            $.post("/system/set/config.do", {key: "userReg", value: flag}, function (json) {
                if (json.code !== undefined) {
                    layer.msg(json.msg)
                }
            })
        })
        form.on('switch(saveBiliLive)', function (data) {
            let flag = data.elem.checked ? '1' : '0';
            $.post("/system/set/config.do", {key: "biliLive", value: flag}, function (json) {
                if (json.code !== undefined) {
                    layer.msg(json.msg)
                }
            })
        })
    });
    $.post('/bili/login/get/test.do', function (json) {
        if (json.code === undefined || json.code !== 0) {
            return;
        }
        $('#bili_login_text').text(json.data.uname);
        $('#bili_icon_img').attr("src", json.data.icon);

    })
    $('#login').click(function () {
        $.post('/bili/login/set/login.do', function (json) {
            if (json.code === undefined || json.code !== 0) {
                layer.msg("您无权修改")
                return;
            }
            console.log(json)
            layer.open({
                title: "BiliBili客户端扫描登陆",
                content: "<div id=\"qrcode\"></div>",
                success: function () {
                    new QRCode(document.getElementById("qrcode"), json.url);
                },
                yes: function (index) {
                    layer.close(index)
                    window.location.reload();
                }

            })
        })
    })
    $('#header').load("/html/header.html");
    $('#footer').load("/html/footer.html");

</script>
</body>
<style>
    .layui-body {
        position: relative;
        z-index: 0;
        background-color: #F2F2F2;
    }
</style>
</html>