{extend name="$base" /}
{block name="resources"}
<script type="text/javascript" src="ADMIN_JS/progressbar.js"></script>
<link rel="stylesheet" type="text/css" href="ADMIN_CSS/upgrade/style.css" media="screen">
<link rel="stylesheet" type="text/css" href="ADMIN_CSS/upgrade/jquery.easy-pie-chart.css" media="screen">
<style>
.chart{
    display:inline-block;
    float:unset;
}
.up-footer{padding:20px;text-align:center;}
.up-footer button{
    background-color: #067cf3;
    padding:8px 15px;
    color:#FFF;
    border:none;
    border-radius:3px;
    font-size:15px;
    margin: 0 10px;
}
.up-footer button:nth-child(2){
    display: none;
}
.install-content{
    margin-top:40px;
}
.panel-title{
    font-size:15px;
    margin:7px auto;
    line-height:30px;
    color: #31708f;
    border-bottom:1px solid #aad2e5 !important;
}
.step-title{
    color: #31708f;
    font-weight:bold;
}
.step-text{
    color: #31708f;
}
#container {
    width: 300px;
    height: 300px;
    margin: 50px auto;
    position: relative;
}

</style>
{/block}
{block name="main"}
<div id="container"></div>
<div style="clear:both;"></div>
<div class="alert alert-warning">
    <strong>警告！</strong>版本升级中,请不要关闭当前页面!
</div>
<div class="install-content alert alert-info">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
               详细过程
            </h3>
        </div>
        <div class="panel-body">
            <span class="step-title">整体进度&nbsp;：&nbsp;</span><span class="step-text count-percent">0/100%</span><br/>
            <span class="step-title">正在进行&nbsp;：&nbsp;</span><span class="step-text step-content"></span></span>
        </div>
    </div>
</div>
<div class="space-10"></div>
    <div class="up-view" >
        <div class="up-footer">
            <button class="up-btn" onclick="upgradeAction();">点击升级</button>
            <button class="up-btn" onclick="recovery(this);">撤回更新</button>
        </div>
    </div>

{/block}
{block name="script"}

<script type="text/javascript">

var container = document.querySelector('#container');

var bar = new ProgressBar.Circle(container, {
    color: '#067cf3',
    strokeWidth: 5,  // 正好是从圆心开始画起，>50会越过圆心，<50画出的是圆环
    trailWidth: 0,  // 也设置为50，就是一个未填充的圆形，而不是圆环。要么设置为0
    easing: 'easeInOut',
    duration: 10,
    text: {
        style: {
            color: '#31708f',
            display: 'inline-block',
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%,-50%)'
        },
        autoStyleContainer: false
    },
    fill: '#e1f2fa',   // 圆形内容区域填充色，当需要画圆环时，效果应该最好。
    from: { color: '#aaa', width: 1},
    to: { color: '#333', width: 5},
    step: function(state, circle) {
        circle.path.setAttribute('stroke-width', state.width);

        var value = Math.round(circle.value() * 100);
        circle.setText(value+'%');
    }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '32px';


//升级操作
function upgradeAction(){
    $(".up-btn:eq(0)").attr('disabled',true);
    $(" .up-footer .up-btn:eq(0)").addClass("btn-disabled");

    var index  = 0;

    if({$version_info.file_count} > 0){
        upgrade(index);
    }else{
        execute();
    }
}
//下载文件
function upgrade(index){
    $.ajax({
        type:'post',
        url : "{:__URL('ADMIN_MAIN/version/download')}",
        data:{
            'index':index,
        },
        success:function(data){
            if(data['code'] > 0){
                //下载完毕
                console.log(data)
                if(data["code"] == 10){
                    setProgress(50,"即将执行升级操作");
                    execute();
                    return;
                }
                setProgress((index+1)/{$version_info.file_count}*50, data["data"]+"下载完成");
                index++;
                upgrade(index);//递归调用
            }else{
                showMessage('error',data['data']);
            }
        }
    })
}
//备份将覆盖的文件
function execute(){
    setProgress(50,"正在备份旧文件");
    $.ajax({
        type:'post',
        url : "{:__URL('ADMIN_MAIN/version/backupFile')}",
        success:function(data){
            if(data['code'] > 0){
                setProgress(62, data["data"]+"备份完成");
                backupSql();
            }else{
                showMessage('error',data['data']);
            }
        }
    })
}

//备份数据库
function backupSql(){
    setProgress(62,"正在备份数据库...");
    $.ajax({
        type:'post',
        url : "{:__URL('ADMIN_MAIN/version/backupSql')}",
        success:function(data){
            if(data['code'] > 0){
                //执行完毕
                setProgress(75, data["data"]+"备份完成");
                executeFile();
            }else{
                showMessage('error',data['data']);
            }
        }
    })
}

//更新文件覆盖
function executeFile(){
    setProgress(75,"正在覆盖旧文件");
    $.ajax({
        type:'post',
        url : "{:__URL('ADMIN_MAIN/version/executeFile')}",
        success:function(data){
            if(data['code'] > 0){
                //执行完毕
                setProgress(86, data["data"]+"覆盖完毕");
                executeSql();
            }else{
                showMessage('error',data['data']);
            }
        }
    })
}

//更新sql 执行
function executeSql(){
    setProgress(86,"正在执行sql语句");
    $.ajax({
        type:'post',
        url : "{:__URL('ADMIN_MAIN/version/executeSql')}",
        success:function(data){
            if(data['code'] > 0){
                upgradeEnd();
                setProgress(99, data["data"]+"执行完毕");
            }else{
                showMessage('error',data['data']);
            }
        }
    })
}

//更新结束
function upgradeEnd(){
    setProgress(99,"正在更新");
    $.ajax({
        type:'post',
        url : "{:__URL('ADMIN_MAIN/version/upgradeEnd')}",
        success:function(data){
            if(data['code'] > 0){
                //执行完毕
                setProgress(100, "更新结束");
                $(".up-footer button:eq(0)").hide();
                $(".up-footer button:eq(1)").show();
            }else{
                $(".up-btn").attr('disabled',false);
                $(" .up-footer .up-btn").removeClass("btn-disabled");
                showMessage('error',data['data']);
            }
        }
    })
}


//控制进度条
function setProgress(width, text){
    var barValue = width /100;
    width = width.toFixed(2);

    bar.animate(barValue);
    $(".count-percent").text(width+"/100%");
    $(".step-content").text(text);
}


//撤回更新
function recovery(){
    showMessage('success','还原时间较长,请耐心等待!');
    $('.up-footer button:nth-child(2)').text("撤回更新...").css("background-color", '#999');
    $.ajax({
        type:'post',
        url : "{:__URL('ADMIN_MAIN/version/recovery')}",
        success:function(data){
            if(data['code'] > 0){
                //执行完毕
                showMessage('success','撤回成功');
                $(".up-footer button:eq(0)").show();
                $(".up-footer button:eq(1)").hide();
				location.href = "{:__URL('ADMIN_MAIN/upgrade/onlineupdate')}";
            }else{
                showMessage('error',data['data']);
            }
        }
    })
}

</script>
{/block}