{% extends "../main.html" %}
{% block title %}个人信息{% end %}
{% block  css %}
<style>
    .main-content .card-header {
        background-color: #576177 !important;
    }

    .profile-detail label {
        font-weight: 500;
    }

    .profile-detail label, .profile-detail input, .profile-detail span, .profile-detail button,
    .userinfo .regs, .userinfo .ends, .userinfo .renew, .profile-detail a, .profile-detail small {
        font-size: 12px;
    }

    .profile-detail input {
        border-radius: 0;
    }

    .profile-detail .form-group {
        margin-bottom: 2.5rem;
    }

    .userinfo .ends {
        line-height: 2rem;
    }

    .userinfo .badge {
        font-size: 12px;
        font-weight: 500;
    }

    .cancel-password a {
        width: 50px;
        height: 31px;
        font-size: 12px;
        font-weight: 400;
        margin-top: -6px;
        border-radius: 0;
        margin-right: .5rem;
    }

    .cancel-password svg {
        margin-right: 5px;
    }

    .cancel-password {
        transition: all 2s;
    }

    .new-password {
        display: none;
    }
</style>
{% end %}
{% block content %}
<div id="content" class="flex ">
    <!-- ############ Main START-->
    <div class="page-content page-container" id="page-content">
        <div class="padding sr main-content">
            <div class="card">
                <div class="card-header bg-dark bg-img p-0 no-border" data-stellar-background-ratio="0.1" data-plugin="stellar">
                    <div class="bg-dark-overlay r-2x no-r-b">
                        <div class="d-md-flex userinfo">
                            <div class="p-4">
                                <div class="d-flex">
                                    <a href="#">
                                        <span class="avatar w-64">
                                            <img src="{{ static_url('img/user.png') }}">
                                            <i class="on"></i>
                                        </span>
                                    </a>
                                    <div class="mx-3">
                                        <h5 class="mt-2 user-name">
                                            <span>{{ userinfo['nickname'] }}</span>
                                            {% if current_user['group_name']=="ee" %}
                                            <span>
                                                <img src="{{ static_url('img/ee.png') }}" width="20" height="20"/>
                                            </span>
                                            <span class="badge badge-light text-uppercase">
                                                企业版用户
                                            </span>
                                            {% elif current_user['group_name']=="pro" %}
                                             <span>
                                                <img src="{{ static_url('img/pro.png') }}" width="20" height="20"/>
                                            </span>
                                            <span class="badge badge-light text-uppercase">
                                                专业版用户
                                            </span>
                                            {% elif current_user['group_name']=="vip" %}
                                             <span>
                                                <img src="{{ static_url('img/vip.png') }}" width="20" height="20"/>
                                            </span>
                                            <span class="badge badge-light text-uppercase">
                                                VIP版用户
                                            </span>
                                            {% else %}
                                             <span>
                                                <img src="{{ static_url('img/free.png') }}" width="20" height="20"/>
                                            </span>
                                            <span class="badge badge-light text-uppercase">
                                                免费版用户
                                            </span>
                                            {% end %}
                                        </h5>
                                        <div class="text-fade text-sm"><span
                                                class="m-r user-mail">{{ userinfo['email'] }}</span>
                                            <span class="regs">
                                                <i class="fa fa-map-marker mr-2"></i>注册时间: <span
                                                    class="reg-time">{{ userinfo['addtime'] }}</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <span class="flex"></span>
                            <div class="align-items-center d-flex p-4">
                                <div class="toolbar">
                                    {% if userinfo['group_name']=="vip" or userinfo['group_name']=="pro" or userinfo['group_name']=="ee" %}
                                    <!-- 如果已经是会员，则只输出下面注释的语句-->
                                    <a href="member" class="btn btn-sm bg-dark-overlay btn-rounded text-white bg-success active">
                                        <span class="renew">续费</span>
                                    </a>
                                    <span class="ends">到期时间: <span class="end-time">{{ userinfo['expire_time'] }}</span></span>
                                    {% else %}
                                    <a href="member"
                                       class="btn btn-sm bg-dark-overlay btn-rounded text-dark bg-warning active">
                                        <span class="renew">升级会员</span>
                                    </a>
                                    {% end %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 col-lg-12">
                    <div class="card profile-detail">
                        <div class="px-3">
                            <div class="py-3">
                                <div>
                                    {% module xsrf_form_html() %}
                                    <div class="form-group row">
                                        <label class="col-sm-2 col-form-label text-dark">用户昵称</label>
                                        <div class="col-sm-4">
                                            <input value="{{ userinfo['nickname'] }}" name="username" id="username"
                                                   type="text" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-sm-2 col-form-label text-dark">登陆邮箱</label>
                                        <div class="col-sm-4">
                                            <input disabled value="{{ userinfo['email'] }}" name="usermail"
                                                   id="usermail" type="text" class="form-control">
                                        </div>
                                        <span class="col-sm-2 col-form-label">邮箱不可更改</span>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-sm-2 col-form-label text-dark">用户AccessKey</label>
                                        <div class="col-sm-4">
                                            <input value="PTAI4FeqGT83Np4KemTnhFc2" name="userkey" id="userkey"
                                                   type="text" class="form-control">
                                        </div>
                                        <span class="col-sm-2 col-form-label">暂未开放</span>
                                    </div>
                                    <div class="form-group row">
                                        <label class="col-sm-2 col-form-label text-dark">登陆密码</label>
                                        <div class="col-sm-4">
                                            <span class="new-password">
                                                <input value="" name="newpass" id="newpass" type="text"
                                                       class="form-control">
                                            </span>
                                            <a class="btn btn-raised btn-wave mb-2 w-sm light text-dark gen-password">生成新密码</a>
                                        </div>
                                        <span class="col-sm-3 col-form-label cancel-password new-password">
                                            <a class="btn bg-secondary-lt w-xs hidden-pass" style="width:80px;"><i
                                                    class="eay" style="display:none;" data-feather="eye"></i><i
                                                    class="eay-off" data-feather="eye-off"></i> <small>隐藏</small></a>
                                            <a class="btn bg-secondary-lt w-xs calcel-pass-btn">取消</a>
                                        </span>
                                    </div>
                                    <button class="btn w-sm mb-1 btn-primary" id="update_profile">更新个人信息</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% end %}
{% block js %}
<script src="/static/libs/bootstrap-table/dist/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.js"></script>
<script src="/static/libs/notie/dist/notie.min.js"></script>
<script>
    var pasArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '_', '-', '$', '%', '&', '@', '+', '!'];

    function passwords(pasLen) {
        // random password
        var password = '';
        var pasArrLen = pasArr.length;
        for (var i = 0; i < pasLen; i++) {
            var x = Math.floor(Math.random() * pasArrLen);
            password += pasArr[x];
        }
        return password
    }

    $(document).ready(function () {
        $(".gen-password").click(function () {
            $(".gen-password").hide();
            $(".new-password").show();
            $("#newpass").val(passwords(25))
        });
        $(".calcel-pass-btn").click(function () {
            $(".new-password").hide();
            $(".gen-password").show();
            $("#newpass").val("")
        });
        $(".profile-detail").on("click", ".hidden-pass", function () {
            $("#newpass").prop('type', 'password');
            $(".eay").show();
            $(".eay-off").hide();
            $(".hidden-pass small").text("显示");
            $(".hidden-pass").removeClass('hidden-pass').addClass('show-pass');
        });

        $(".profile-detail").on("click", ".show-pass", function () {
            $("#newpass").prop('type', 'text');
            $(".eay").hide();
            $(".eay-off").show();
            $(".show-pass small").text("隐藏");
            $(".show-pass").removeClass('show-pass').addClass('hidden-pass');
        })
    });
    $("#update_profile").click(function () {
        var nickname = $("#username").val();
        var pwd = $("#newpass").val();
        var dataArray = {
            _xsrf: $("[name='_xsrf']").val(),
            nickname: nickname,
            pwd: pwd,
        };
        $.ajax({
            url: "/profile",
            type: "POST",
            dataType: "json",
            data: dataArray,
            success: function (res) {
                if (res.status == 1) {
                    notie.alert({type: 1, text: res.msg, position: 'top'});
                    if(res.url!="/profile"){
                        setTimeout(function () {
                        location.href = res.url;
                    }, 3000);
                    }
                } else {
                    notie.alert({type: 3, text: '<b>' + res.msg + '</b>', position: 'top'});
                }

            },
            error: function (res) {
                notie.alert({type: 3, text: '<b>' + 网络错误 + '</b>', position: 'top'});
            }
        });
    });
</script>
{% end %}