{% extends "../main.html" %}
{% block title %}更新版本{% end %}
{% block content %}
<style>
    #init-modal .modal-title {
        font-size: 1rem;
        color: #000;
    }

    #init-modal .modal-body {
        font-size: 12px;
        color: #4c4c4c;
        padding-bottom: 0;
    }

    #init-modal .modal-content {
        border-radius: 0;
    }

    #init-modal .loading {
        left: 140px;
        position: absolute;
        top: 36px;
    }

    #init-modal .modal-footer button {
        border-radius: 0;
        font-size: 12px;
        float: left;
    }

    #init-modal .modal-footer {
        padding-top: 0;
    }

    #accordion {
        font-size: 12px;
    }

    .update-card .vname {
        font-size: 19px;
        font-weight: 500;
        color: #e80000;
    }

    .update-card svg {
        color: #e80000;
    }

    .update-content {
        font-size: 14px;
        font-weight: 500;
        line-height: 3;
        color: #000;
    }

    #update {
        margin-top: 1rem;
    }

    #update button {
        font-size: 12px;
        border-radius: 0;
    }

    .new-version {
        font-weight: 500;
    }

    .pub-date {
        margin-left: 1rem;
    }

    #update-modal .modal-body {
        padding: 2.5rem;
    }

    #update-modal .modal-body p {
        color: #000;
    }

    #update-modal .modal-body .loading {
        margin: 0 auto !important;
        width: 35px;
        height: 35px;
    }

    #update-modal {
        font-size: 12px;
    }

    #update-modal .modal-dialog {
        margin: 12.75rem auto;
    }

    .being-update {
        padding: 2.5rem;
    }

    .icon {
        width: 80px;
        height: 80px;
        border: 4px solid gray;
        border-radius: 50%;
        margin: 20px auto;
        padding: 0;
        position: relative;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    .icon.error {
        border-color: #f27474;
    }

    .icon.error .x-mark {
        position: relative;
        display: block;
    }

    .icon.error .line {
        position: absolute;
        height: 5px;
        width: 47px;
        background-color: #f27474;
        display: block;
        top: 37px;
        border-radius: 2px;
    }

    .icon.error .line.left {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        left: 17px;
    }

    .icon.error .line.right {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        right: 16px;
    }

    .icon.warning {
        border-color: #f8bb86;
    }

    .icon.warning .body {
        position: absolute;
        width: 5px;
        height: 47px;
        left: 50%;
        top: 10px;
        border-radius: 2px;
        margin-left: -2px;
        background-color: #f8bb86;
    }

    .icon.warning .dot {
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-left: -3px;
        left: 50%;
        bottom: 10px;
        background-color: #f8bb86;
    }

    .icon.info {
        border-color: #c9dae1;
    }

    .icon.info::before {
        content: "";
        position: absolute;
        width: 5px;
        height: 29px;
        left: 50%;
        bottom: 17px;
        border-radius: 2px;
        margin-left: -2px;
        background-color: #c9dae1;
    }

    .icon.info::after {
        content: "";
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        margin-left: -3px;
        top: 19px;
        background-color: #c9dae1;
    }

    .icon.success {
        border-color: #a5dc86;
    }

    .icon.success::before,
    .icon.success::after {
        content: '';
        border-radius: 50%;
        position: absolute;
        width: 60px;
        height: 120px;
        background: white;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .icon.success::before {
        border-radius: 120px 0 0 120px;
        top: -7px;
        left: -33px;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 60px 60px;
        -ms-transform-origin: 60px 60px;
        transform-origin: 60px 60px;
    }

    .icon.success::after {
        border-radius: 0 120px 120px 0;
        top: -11px;
        left: 30px;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0px 60px;
        -ms-transform-origin: 0px 60px;
        transform-origin: 0px 60px;
    }

    .icon.success .placeholder {
        width: 80px;
        height: 80px;
        border: 4px solid rgba(165, 220, 134, 0.2);
        border-radius: 50%;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        position: absolute;
        left: -4px;
        top: -4px;
        z-index: 2;
    }

    .icon.success .fix {
        width: 5px;
        height: 90px;
        background-color: white;
        position: absolute;
        left: 28px;
        top: 8px;
        z-index: 1;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .icon.success .line {
        height: 5px;
        background-color: #a5dc86;
        display: block;
        border-radius: 2px;
        position: absolute;
        z-index: 2;
    }

    .icon.success .line.tip {
        width: 25px;
        left: 14px;
        top: 46px;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .icon.success .line.long {
        width: 47px;
        right: 8px;
        top: 38px;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .icon.custom {
        background-size: contain;
        border-radius: 0;
        border: none;
        background-position: center center;
        background-repeat: no-repeat;
        /*
     * Animations
     */
    }

    @-webkit-keyframes showSweetAlert {
        0% {
            transform: scale(0.7);
            -webkit-transform: scale(0.7);
        }
        45% {
            transform: scale(1.05);
            -webkit-transform: scale(1.05);
        }
        80% {
            -webkit-transform: scale(0.95);
            transform: scale(0.95);
            -webkit-tranform: scale(0.95);
        }
        100% {
            transform: scale(1);
            -webkit-transform: scale(1);
        }
    }

    @keyframes showSweetAlert {
        0% {
            transform: scale(0.7);
            -webkit-transform: scale(0.7);
        }
        45% {
            transform: scale(1.05);
            -webkit-transform: scale(1.05);
        }
        80% {
            -webkit-transform: scale(0.95);
            transform: scale(0.95);
            -webkit-tranform: scale(0.95);
        }
        100% {
            transform: scale(1);
            -webkit-transform: scale(1);
        }
    }

    @-webkit-keyframes hideSweetAlert {
        0% {
            transform: scale(1);
            -webkit-transform: scale(1);
        }
        100% {
            transform: scale(0.5);
            -webkit-transform: scale(0.5);
        }
    }

    @keyframes hideSweetAlert {
        0% {
            transform: scale(1);
            -webkit-transform: scale(1);
        }
        100% {
            transform: scale(0.5);
            -webkit-transform: scale(0.5);
        }
    }

    .showSweetAlert {
        -webkit-animation: showSweetAlert 0.3s;
        animation: showSweetAlert 0.3s;
    }

    .hideSweetAlert {
        -webkit-animation: hideSweetAlert 0.2s;
        animation: hideSweetAlert 0.2s;
    }

    @-webkit-keyframes animateSuccessTip {
        0% {
            width: 0;
            left: 1px;
            top: 19px;
        }
        54% {
            width: 0;
            left: 1px;
            top: 19px;
        }
        70% {
            width: 50px;
            left: -8px;
            top: 37px;
        }
        84% {
            width: 17px;
            left: 21px;
            top: 48px;
        }
        100% {
            width: 25px;
            left: 14px;
            top: 45px;
        }
    }

    @keyframes animateSuccessTip {
        0% {
            width: 0;
            left: 1px;
            top: 19px;
        }
        54% {
            width: 0;
            left: 1px;
            top: 19px;
        }
        70% {
            width: 50px;
            left: -8px;
            top: 37px;
        }
        84% {
            width: 17px;
            left: 21px;
            top: 48px;
        }
        100% {
            width: 25px;
            left: 14px;
            top: 45px;
        }
    }

    @-webkit-keyframes animateSuccessLong {
        0% {
            width: 0;
            right: 46px;
            top: 54px;
        }
        65% {
            width: 0;
            right: 46px;
            top: 54px;
        }
        84% {
            width: 55px;
            right: 0px;
            top: 35px;
        }
        100% {
            width: 47px;
            right: 8px;
            top: 38px;
        }
    }

    @keyframes animateSuccessLong {
        0% {
            width: 0;
            right: 46px;
            top: 54px;
        }
        65% {
            width: 0;
            right: 46px;
            top: 54px;
        }
        84% {
            width: 55px;
            right: 0px;
            top: 35px;
        }
        100% {
            width: 47px;
            right: 8px;
            top: 38px;
        }
    }

    @-webkit-keyframes rotatePlaceholder {
        0% {
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
        }
        5% {
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
        }
        12% {
            transform: rotate(-405deg);
            -webkit-transform: rotate(-405deg);
        }
        100% {
            transform: rotate(-405deg);
            -webkit-transform: rotate(-405deg);
        }
    }

    @keyframes rotatePlaceholder {
        0% {
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
        }
        5% {
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
        }
        12% {
            transform: rotate(-405deg);
            -webkit-transform: rotate(-405deg);
        }
        100% {
            transform: rotate(-405deg);
            -webkit-transform: rotate(-405deg);
        }
    }

    .animateSuccessTip {
        -webkit-animation: animateSuccessTip 0.75s;
        animation: animateSuccessTip 0.75s;
    }

    .animateSuccessLong {
        -webkit-animation: animateSuccessLong 0.75s;
        animation: animateSuccessLong 0.75s;
    }

    .icon.success.animate::after {
        -webkit-animation: rotatePlaceholder 4.25s ease-in;
        animation: rotatePlaceholder 4.25s ease-in;
    }

    @-webkit-keyframes animateErrorIcon {
        0% {
            transform: rotateX(100deg);
            -webkit-transform: rotateX(100deg);
            opacity: 0;
        }
        100% {
            transform: rotateX(0deg);
            -webkit-transform: rotateX(0deg);
            opacity: 1;
        }
    }

    @keyframes animateErrorIcon {
        0% {
            transform: rotateX(100deg);
            -webkit-transform: rotateX(100deg);
            opacity: 0;
        }
        100% {
            transform: rotateX(0deg);
            -webkit-transform: rotateX(0deg);
            opacity: 1;
        }
    }

    .animateErrorIcon {
        -webkit-animation: animateErrorIcon 0.5s;
        animation: animateErrorIcon 0.5s;
    }

    @-webkit-keyframes animateXMark {
        0% {
            transform: scale(0.4);
            -webkit-transform: scale(0.4);
            margin-top: 26px;
            opacity: 0;
        }
        50% {
            transform: scale(0.4);
            -webkit-transform: scale(0.4);
            margin-top: 26px;
            opacity: 0;
        }
        80% {
            transform: scale(1.15);
            -webkit-transform: scale(1.15);
            margin-top: -6px;
        }
        100% {
            transform: scale(1);
            -webkit-transform: scale(1);
            margin-top: 0;
            opacity: 1;
        }
    }

    @keyframes animateXMark {
        0% {
            transform: scale(0.4);
            -webkit-transform: scale(0.4);
            margin-top: 26px;
            opacity: 0;
        }
        50% {
            transform: scale(0.4);
            -webkit-transform: scale(0.4);
            margin-top: 26px;
            opacity: 0;
        }
        80% {
            transform: scale(1.15);
            -webkit-transform: scale(1.15);
            margin-top: -6px;
        }
        100% {
            transform: scale(1);
            -webkit-transform: scale(1);
            margin-top: 0;
            opacity: 1;
        }
    }

    .animateXMark {
        -webkit-animation: animateXMark 0.5s;
        animation: animateXMark 0.5s;
    }

    @-webkit-keyframes pulseWarning {
        0% {
            border-color: #f8d486;
        }
        100% {
            border-color: #f8bb86;
        }
    }

    @keyframes pulseWarning {
        0% {
            border-color: #f8d486;
        }
        100% {
            border-color: #f8bb86;
        }
    }

    .pulseWarning {
        -webkit-animation: pulseWarning 0.75s infinite alternate;
        animation: pulseWarning 0.75s infinite alternate;
    }

    @-webkit-keyframes pulseWarningIns {
        0% {
            background-color: #f8d486;
        }
        100% {
            background-color: #f8bb86;
        }
    }

    @keyframes pulseWarningIns {
        0% {
            background-color: #f8d486;
        }
        100% {
            background-color: #f8bb86;
        }
    }

    .pulseWarningIns {
        -webkit-animation: pulseWarningIns 0.75s infinite alternate;
        animation: pulseWarningIns 0.75s infinite alternate;
    }
</style>
<div id="gx">
    <div class="page-hero page-container " id="page-hero">
        <div class="padding d-flex" style="padding-bottom:0;">
            <div class="page-title">
                <h2 class="text-md text-highlight">更新版本</h2>
                <small class="text-muted">让程序保持最新，持续拥有最强的功能、稳定性和安全性。</small>
            </div>
            <div class="flex"></div>
        </div>
    </div>
    <div class="page-content page-container" id="page-content">
        <div class="padding">
            <div id="accordion">
                <div class="card update-card">
                    <div class="d-flex align-items-center px-4 py-3 b-t">
                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                             class="feather feather-slack">
                            <path d="M14.5 10c-.83 0-1.5-.67-1.5-1.5v-5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5z"></path>
                            <path d="M20.5 10H19V8.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"></path>
                            <path d="M9.5 14c.83 0 1.5.67 1.5 1.5v5c0 .83-.67 1.5-1.5 1.5S8 21.33 8 20.5v-5c0-.83.67-1.5 1.5-1.5z"></path>
                            <path d="M3.5 14H5v1.5c0 .83-.67 1.5-1.5 1.5S2 16.33 2 15.5 2.67 14 3.5 14z"></path>
                            <path d="M14 14.5c0-.83.67-1.5 1.5-1.5h5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-5c-.83 0-1.5-.67-1.5-1.5z"></path>
                            <path d="M15.5 19H14v1.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5-.67-1.5-1.5-1.5z"></path>
                            <path d="M10 9.5C10 8.67 9.33 8 8.5 8h-5C2.67 8 2 8.67 2 9.5S2.67 11 3.5 11h5c.83 0 1.5-.67 1.5-1.5z"></path>
                            <path d="M8.5 5H10V3.5C10 2.67 9.33 2 8.5 2S7 2.67 7 3.5 7.67 5 8.5 5z"></path>
                        </svg>
                        <div class="px-3">
                            <div class="vname">Swan Beta</div>
                        </div>
                    </div>
                    {% if current_user['c_version_update']=='1' or current_user['c_f_version_update']=='1' %}
                    <div class="d-flex align-items-center px-4 py-3 b-t">
                        <div class="px-0">
                            <div class="update-content">新的版本可供升级!</div>
                            <div class="new-version">最新版本: <span
                                    id="client_new-v">client-v{{ version_update['c_version'] }}</span> <span
                                    class="pub-date">发布时间: {{ version_update['c_version_utime'] }}</span>
                            </div>
                            <div class="new-version">最新版本: <span
                                    id="client_front_new-v">client-front-v{{ version_update['c_f_version'] }}</span>
                                <span
                                        class="pub-date">发布时间: {{ version_update['c_f_version_utime'] }}</span></div>
                            <div id="update">
                                <button class="btn w-sm mb-1 btn-primary">立即更新</button>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex align-items-center px-4 py-3 b-t">
                        <div class="px-0">
                            <div class="">当前版本：<span id="client_current-v">client-v{{ version_update['l_c_version'] }} | client-front-v{{ version_update['l_c_f_version'] }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex align-items-center px-4 py-3 b-t">
                        <div class="px-0">
                            <div class="check-time">最后检查于{{ version_update['l_version_utime'] }}</div>
                        </div>
                    </div>
                    {% end %}
                </div>
            </div>
        </div>
    </div>
</div>
<!-- .modal -->
<div id="update-modal" class="modal fade" data-backdrop="static">
    <div class="modal-dialog modal-center">
        <div class="modal-content">
            <div class="modal-body">
                <div class="sweetAlert" style="display:none;">
                    <div class="icon success animate">
                        <span class="line tip animateSuccessTip"></span>
                        <span class="line long animateSuccessLong"></span>
                        <div class="placeholder"></div>
                        <div class="fix"></div>
                    </div>
                    <div class="p-2 text-center">
                        <h4 id="result-msg">更新成功</h4>
                    </div>
                </div>
                <div class="being-update">
                    <div class="loading m-4"></div>
                    <div class="p-3 text-center" style="padding-bottom:0 !important;">
                        <p>正在更新版本, 请不要关闭此页面.</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
</div>
<!-- / .modal -->
{% end %}
{% block js %}
<script src="/static/libs/notie/dist/notie.min.js"></script>
<script>
    function submit_update(url) {
        // 提交到后台开始更新
        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            timeout: 1000000,
            success: function (res) {

                // 更新成功后返回处理
                setTimeout(function () {
                    $(".being-update").hide();
                    $("#result-msg").empty();
                    $("#result-msg").append(res.msg);
                    $(".sweetAlert").show();
                }, 2000);
                if (res.statu == 1) {
                    setTimeout(function () {
                        window.location.href = "/login";
                    }, 3000);
                } else {
                    setTimeout(function () {
                        window.location.href = "/update";
                    }, 3000);
                }


            },
            error: function (res) {
                // 网络类型错误
                notie.alert({type: 3, text: '<b>网络错误</b>', position: 'top'});
                $("#update-modal").modal("hide")
            }

        });
    }

    $("#update").click(function () {
        $("#update-modal").modal("show");
        var url = "/update";
        submit_update(url)
    });
</script>
{% end %}