{{template "base/head" .}}
<style>
.according-panel-heading{
    box-sizing: border-box;
    padding: 8px 16px;
    color: #252b3a;
    background-color: #f2f5fc;
    line-height: 1.5;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion-panel-title {
    margin-top: 0;
    margin-bottom: 0;
    color: #252b3a;
}
.accordion-panel-title-content{
    vertical-align: middle;
    display: inline-block;
    width: calc(100% - 32px);
    cursor: default;
}
.acc-margin-bottom {
    margin-bottom: 5px;
}
.title_text {
    font-size: 12px;
}
.ac-display-inblock {
    display: inline-block;
}
.cti-mgRight-sm {
    margin-right: 8px;
}
.ac-text-normal {
    font-size: 14px;
    color: #575d6c;
}
.uc-accordionTitle-black {
    color: #333;
}
.accordion-border{
    border:1px solid #cce2ff;
}
.padding0{
    padding: 0 !important;
}
.content-pad{
    padding: 15px 35px;
}
.content-margin{
    margin:10px 5px ;
}
.tab_2_content {
    min-height: 360px;
    margin-left: 10px;
}
.ac-grid {
    display: block;
    *zoom: 1;
}
.ac-grid-col {
    float: left;
    width: 100%;
}
.ac-grid-col2 .ac-grid-col {
    width: 50%;
}
.ti-form {
    text-align: left;
    max-width: 100%;
    vertical-align: middle;
}
.ti-form>tbody {
    font-size: 12px;
}
.ti-form>tbody, .ti-form>tbody>tr {
    vertical-align: inherit;
}
.ti-text-form-label {
    
    padding-bottom: 20px;
    padding-right: 20px;
    color: #8a8e99;
    font-size: 12px;
    white-space: nowrap;
    width: 80px;
    line-height: 30px;
}
.ti-text-form-content{
    line-height: 30px;
    padding-bottom: 20px;
}
.ti-form>tbody>tr>td {
    vertical-align: top;
    white-space: normal;
}
td, th {
    padding: 0;
}
.ac-grid-col .text-span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.redo-color{
    color: #3291F8;
}
.ti-action-menu-item:not(:last-child){
    margin-right: 10px;
    padding-right: 11px;
    text-decoration: none!important;
    color: #526ecc;
    cursor: pointer;
    display: inline-block;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    position: relative;
}
.ti-action-menu-item:not(:last-child):after {
    content: "";
    display: inline-block;
    position: absolute;
    height: 12px;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    transform: translateY(-6px);
    border-right: 1px solid #dfe1e6;
}
.text-width80{
    width: 100px;
    line-height: 30px;
}
.border-according{
    border: 1px solid #dfe1e6;
}
.disabled {
        cursor: default;
        pointer-events: none;
        color: rgba(0,0,0,.6) !important;
        opacity: .45 !important;
}
.pad20{
    
    border:0px !important;
}
.model_file_bread{
    margin-bottom: -0.5rem !important;
    padding-left: 1rem;
    padding-top: 0.5rem ;
}
</style>
<div class="repository">
{{template "repo/header" .}}
    <div class="ui container">
        <h4 class="ui header" id="vertical-segment">
            <a href="javascript:window.history.back();"><i class="arrow left icon"></i>返回</a>
        </h4>
        {{range $k ,$v := .version_list_task}}
        <div class="ui accordion border-according"  id="accordion{{.VersionName}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}" data-version="{{.VersionName}}">
            <div class="title padding0">
                <div class="according-panel-heading">
                    <div class="accordion-panel-title">
                        <i class="dropdown icon"></i>
                        <span class="accordion-panel-title-content">
                            <span>
                                <div style="float: right;">
                                    <a class="ti-action-menu-item {{if ne .Status "COMPLETED"}}disabled {{end}}">创建模型</a>
                                    <a class="ti-action-menu-item" href="{{$.RepoLink}}/modelarts/train-job/{{.JobID}}/create_version?version_name={{.VersionName}}">修改</a>
                                    <a class="ti-action-menu-item {{if eq .Status "KILLED" "FAILED" "START_FAILED" "KILLING" "COMPLETED"}}disabled {{end}}" id="{{.VersionName}}-stop" onclick="stopVersion({{.VersionName}})">停止</a>
                                    <a class="ti-action-menu-item " href="{{$.Link}}/models?version_name={{.VersionName}}" target="_blank">模型下载</a>
                                    <a class="ti-action-menu-item"  onclick="deleteVersion({{.VersionName}})" style="color: #FF4D4F;">删除</a>
                                </div>
                                <div class="ac-display-inblock title_text acc-margin-bottom">
                                    
                                    <span class="cti-mgRight-sm">2021/11/08 19:35:19</span>
                                    <span class="cti-mgRight-sm"> 当前版本：{{.VersionName}}</span>
                                    <span class="cti-mgRight-sm">  父版本：{{.FatherVersionName}}</span>
                                    <span class="cti-mgRight-sm ac-text-normal title_text">状态：
                                        <span id="{{.VersionName}}-status-span"><i id="icon" style="vertical-align: middle;" class="{{.Status}}"></i><span id="text" style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span>
                                    </span>
                                    <span class="ac-text-normal title_text">运行时间：</span>
                                    <span class="cti-mgRight-sm uc-accordionTitle-black" id="{{.VersionName}}-duration-span">{{.TrainJobDuration}}</span>
                                    <span data-tooltip="刷新" style="cursor: pointer;" data-inverted="" onclick="refreshStatus({{.VersionName}})"><i class="redo icon redo-color"></i></span>

                                </div>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="content accordion-border">
                <div class="content-pad">
                    <div class="ui pointing secondary menu">
                        <a class="active item" data-tab="first{{$k}}">配置信息</a>
                        <a class="item" data-tab="second{{$k}}" onclick="loadLog({{.VersionName}})">日志文件</a>
                        <a class="item" data-tab="third{{$k}}" onclick="loadModelFile({{.VersionName}},'','true')" target="_blank">模型下载</a>
                    </div>
                    <div class="ui tab active" data-tab="first{{$k}}">
                        <div style="padding-top: 10px;">
                            <div class="tab_2_content">
                                <div class="ac-grid ac-grid-col2">
                                    <div class="ac-grid-col">
                                        <table class="ti-form">
                                            <tbody class="ti-text-form">
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        任务名称
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                                {{.JobName}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        状态
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w" id="{{.VersionName}}-status">
                                                                {{.Status}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        运行版本
                                                    </td>
        
                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                                {{.VersionName}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        开始时间
                                                    </td>
        
                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                                空白
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        运行时间
                                                    </td>
        
                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w" id="{{.VersionName}}-duration">
                                                            {{.TrainJobDuration}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        规格
                                                    </td>
        
                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.FlavorName}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        计算节点
                                                    </td>
        
                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.WorkServerNumber}}
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="ac-grid-col">
                                            <table class="ti-form">
                                                <tbody class="ti-text-form">
                                                    <tr class="ti-no-ng-animate">
                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                            AI引擎
                                                        </td>
    
                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w">
                                                            {{.EngineName}}
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="ti-no-ng-animate">
                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                            {{$.i18n.Tr "repo.modelarts.code_version"}}
                                                        </td>
    
                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w">
                                                                {{.BranchName}}
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="ti-no-ng-animate">
                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                            启动文件
                                                        </td>
            
                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w">
                                                                    {{.BootFile}}
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="ti-no-ng-animate">
                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                            训练数据集
                                                        </td>
                
                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w">
                                                                {{.DatasetName}}
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="ti-no-ng-animate">
                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                            运行参数
                                                        </td>
                
                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w">
                                                                {{.Parameters}}
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="ti-no-ng-animate">
                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                            训练输出位置
                                                        </td>
                
                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w">
                                                                {{.TrainUrl}}
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="ti-no-ng-animate">
                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                            描述
                                                        </td>
                
                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w">
                                                                <!-- {{.TrainUrl}} -->
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    <div class="ui tab" data-tab="second{{$k}}">
                        <div>
                            <div class="ui message" style="display: none;">
                                <div id="header"></div>
                            </div>
                            <div class="ui top attached segment" style="background: #f0f0f0;">
                                <div class="center aligned">
                                    <label>{{$.i18n.Tr "repo.modelarts.log"}}:</label>
                                        <!-- <span class="fitted file_name">{{.}}</span> -->
                                        <!-- <input type="hidden" name="file_name" value>
                                        <input type="hidden"  name="start_line" value>
                                        <input type="hidden"  name="end_line" value> -->
                                        
                                </div>
                            </div>
                            <div class="ui attached segment log" style="height: 300px !important; overflow: auto;">
                                <input type="hidden" class="version_name" name="version_name" value={{.VersionName}}>
                                <input type="hidden"  name="end_line" value>
                                <input type="hidden"  name="start_line" value>
                                <pre id="log_file{{.VersionName}}"></pre>
                            </div>
                                        
                        </div>
                        
                    </div>
                    <div class="ui tab" data-tab="third{{$k}}">
                        <div class='ui breadcrumb model_file_bread' id='file_breadcrumb'>


                        </div>
                        <div id="dir_list">
                            
                        </div>
                    </div>

                </div>
            </div>
        </div>
        {{end}}
    </div>
    <!-- 确认模态框 -->
    <div id="deletemodel">
        <div class="ui basic modal">
            <div class="ui icon header">
                <i class="trash icon"></i> 删除任务
            </div>
    
            <div class="content">
                <p>你确认删除该任务么？此任务一旦删除不可恢复。</p>
            </div>
            <div class="actions">
                <div class="ui red basic inverted cancel button">
                    <i class="remove icon"></i> 取消操作
                </div>
                <div class="ui green basic inverted ok button">
                    <i class="checkmark icon"></i> 确定操作
                </div>
            </div>
        </div>
    </div>
</div>
{{template "base/footer" .}}

<script>
    console.log({{.version_list_task}})
    
    $('.menu .item').tab()
    // $('.ui.style.accordion').accordion();

    $(document).ready(function(){
    $('.ui.accordion').accordion({selector:{trigger:'.icon'}});
    });
    $(document).ready(function(){
        $('.secondary.menu .item').tab();
    });
    
    var userName
    var repoPath
    var jobID
    $(document).ready(function(){
        var url = window.location.href;
        var urlArr = url.split('/')
        userName = urlArr.slice(-5)[0]
        repoPath = urlArr.slice(-4)[0]
        jobID = urlArr.slice(-1)[0]
    })
    function stopBubbling(e) {
        e = window.event || e;
        if (e.stopPropagation) {
            e.stopPropagation();      //阻止事件 冒泡传播
        } else {
            e.cancelBubble = true;   //ie兼容
        }
    }
    // var timeid = window.setInterval(refreshStatus(version_name), 30000);
    // document.ready(refreshStatus(version_name))
    var timeid = window.setInterval(loadJobStatus, 10000);
    $(document).ready(loadJobStatus);

    function loadJobStatus() {
        $(".ui.accordion.border-according").each((index, job) => {
            
            const jobID = job.dataset.jobid;
            const repoPath = job.dataset.repopath;
            const versionname = job.dataset.version
            if (job.textContent.trim() == 'IMAGE_FAILED' || job.textContent.trim() == 'SUBMIT_FAILED' || job.textContent.trim() == 'DELETE_FAILED'
                || job.textContent.trim() == 'KILLED' || job.textContent.trim() == 'COMPLETED' || job.textContent.trim() == 'FAILED'
                || job.textContent.trim() == 'CANCELED' || job.textContent.trim() == 'LOST') {
                return
            }

            $.get(`/api/v1/repos/${repoPath}/modelarts/train-job/${jobID}?version_name=${versionname}`, (data) => {
                // const jobID = data.JobID
                // const status = data.JobStatus
                // const duration = data.JobDuration
                $(`#${versionname}-duration-span`).text(data.JobDuration)
                $(`#${versionname}-status-span span`).text(data.JobStatus)
                $(`#${versionname}-status-span i`).attr("class",data.JobStatus)
                // detail status and duration
                $('#'+versionname+'-duration').text(data.JobDuration)
                $('#'+versionname+'-status').text(data.JobStatus)
                // $('#duration-'+jobID).text(duration)
                // if (status != job.textContent.trim()) {
                //     $('#' + jobID+'-icon').removeClass().addClass(status)
                //     $('#' + jobID+ '-text').text(status)

                // }
            }).fail(function(err) {
                console.log(err);
            });
        });
    };

    function refreshStatus(version_name){
        $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}?version_name=${version_name}`,(data)=>{
            console.log(data)
            // header status and duration
            $(`#${version_name}-duration-span`).text(data.JobDuration)
            $(`#${version_name}-status-span span`).text(data.JobStatus)
            $(`#${version_name}-status-span i`).attr("class",data.JobStatus)
            // detail status and duration
            $('#'+version_name+'-duration').text(data.JobDuration)
            $('#'+version_name+'-status').text(data.JobStatus)


        }).fail(function(err) {
            console.log(err);
        });
        stopBubbling(arguments.callee.caller.arguments[0])
    }
    function deleteVersion(version_name){
        stopBubbling(arguments.callee.caller.arguments[0])
        let flag = 1;
        $('.ui.basic.modal').modal({
                onDeny: function() {
                    flag = false
                },
                onApprove: function() {
                    $.post(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/del_version`,{version_name:version_name},(data)=>{
                        $('#accordion'+version_name).remove()
                    }).fail(function(err) {
                        console.log(err);
                    });
                    flag = true
                },
                onHidden: function() {
                    if (flag == false) {
                        $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
                    }
                }
            })
        .modal('show')
        
    }
    function stopVersion(version_name){
        stopBubbling(arguments.callee.caller.arguments[0])
        $.post(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/stop_version`,{version_name:version_name},(data)=>{
            if(data.StatusOK===0){
                $('#'+version_name+'-stop').addClass('disabled')
                refreshStatus(version_name)
            }
        }).fail(function(err) {
            console.log(err);	            
        });
    }
    function loadLog(version_name){
        $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&lines=20&order=asc`, (data) => {
            $('input[name=end_line]').val(data.EndLine)
            $('input[name=start_line]').val(data.StartLine)
            $(`#log_file${version_name}`).text(data.Content)
        }).fail(function(err) {
            console.log(err);
        });
    }
    function loadModelFile(version_name,parents,filename){
        console.log("")
        parents = parents || ''
        filename = filename || ''
        $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/model_list?version_name=${version_name}&parentDir=${parents}`, (data) => {
                console.log("=====parents======",data,version_name,parents)
                if(!filename){
                    console.log("bread")
                    $("#dir_list").empty() 
                    renderDir(data,version_name)
                    renderBrend(version_name,parents,filename,false)
                }else{
                    $("#dir_list").empty() 
                    renderDir(data,version_name)
                    renderBrend(version_name,parents,filename,true)
                }
                
            
            }).fail(function(err) {
                console.log(err,version_name);
            });
        // if(!parents){
        //     $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/model_list?version_name=${version_name}`, (data) => {
        //         console.log("===========",data,version_name)
        //         $("#dir_list").empty() 
        //         renderDir(data,version_name)
            
        //     }).fail(function(err) {
        //         console.log(err);
        //     });
        // }else{
        //     console.log("-----else-----",version_name)
            
        // }
        
    }
    let parentsArr=[]
    function renderBrend(version_name,parents,filename,flag){
        if(flag){
            parentsArr.push(parents)
            console.log("parents parentsARR",parents,parentsArr)
            
            let htmlBrend = ""
            if($('#file_breadcrumb .active').length>0){
                let parents1 = parentsArr.shift()
                let sectionName=$('#file_breadcrumb .active.section').html()
                $('#file_breadcrumb .active.section').replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}')">${sectionName}</a>`)
                htmlBrend += `<div class='active section'>${filename}</div>`


            }else{
                
                htmlBrend += `<div class='active section'>${version_name}</div>`
                
            }
            console.log("parentsARR",parentsArr)
            
            htmlBrend += "<div class='divider'> / </div>" 
            $('#file_breadcrumb').append(htmlBrend)

        }else{
            if(!parents){
                $('#file_breadcrumb').empty()
                let htmlBread = ""
                htmlBread += `<div class='active section'>${version_name}</div>`
                htmlBread += "<div class='divider'> / </div>" 
                $('#file_breadcrumb').append(htmlBread)
            }else{
                
                $(`a.section:contains(${parents})`).nextAll().remove()
                $(`a.section:contains(${parents})`).replaceWith(`<div class='active section'>${parents}</div>`)
                $(`a.section:contains(${parents})`).append("<div class='divider'> / </div>")

            }
            
        }
        
    }
    function renderDir(data,version_name){
        let html=""
            html += "<div class='ui grid' style='margin:0;'>"
            html += "<div class='row' style='padding: 0;'>"
            html += "<div class='ui sixteen wide column' style='padding:1rem;'>"
            html += "<div class='dir list'>"
            html += "<table id='repo-files-table' class='ui single line table pad20'>"
            html += '<tbody>'
            // html += "</tbody>"
            for(let i=0;i<data.Dirs.length;i++){
                html += "<tr>"
                html += "<td class='name six wid'>"
                html += "<span class='truncate'>"
                html += "<span class='octicon octicon-file-directory'>"
                html += "</span>"
                if(data.Dirs[i].IsDir){
                    html += `<a  onclick="loadModelFile('${version_name}','${data.Dirs[i].ParenDir}','${data.Dirs[i].FileName}')">`
                    html += "<span class='fitted'><i class='folder icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>"
                }else{
                    html += `<a  href='${location.href}/download_model?parentDir=&fileName=${data.Dirs[i].FileName}&jobName=${data.task.JobName}'>`
                    html += "<span class='fitted'><i class='file icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>"
                }
                html += '</a>'
                html += "</span>"
                html += "</td>"
                html += "<td class='message seven wide'>"
                html += "<span class='truncate has-emoji'>" + data.Dirs[i].Size + "</span>"
                html += "</td>"

                html += "<td class='text right age three wide'>"
                html += "<span class='truncate has-emoji'>" + data.Dirs[i].ModTime + "</span>"
                html += "</td>"
                html += "</tr>"
                
            }
            html += "</tbody>"
            html += "</table>"
            html += "</div>"
            html += "</div>"
            html += "</div>"
            html += "</div>"
            $("#dir_list").append(html)
    }
    $(".log").scroll(function () {
        var scrollTop = $(this)[0].scrollTop;   // 滚动距离
        var scrollHeight = $(this)[0].scrollHeight;  // 文档高度
        var divHeight = $(this).height();   // 可视区高度
        let version_name=$(this).find('input[name=version_name]').val()
        if(parseInt(scrollTop) + divHeight + 18 == scrollHeight){
            var end_line = $('input[name=end_line]').val()
            $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${end_line}&order=desc`, (data) => {
                if (data.Lines == 0){
                    $('#header').text('您已翻阅至日志底部')
                    $('.message').css('display', 'block')
                    setTimeout(function(){
                        $('.message').css('display', 'none')     
                    }, 1000)
                }else{
                    $('input[name=end_line]').val(data.EndLine)
                    $('.log').append('<pre>' + data.Content) 
                }
            }).fail(function(err) {
                console.log(err);
            });
        }
        if(scrollTop == 0){
            var start_line = $('input[name=start_line]').val()
            $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${start_line}&order=asc`, (data) => {
                if (data.Lines == 0){
                    $('#header').text('您已翻阅至日志顶部')
                    $('.message').css('display', 'block')
                    setTimeout(function(){
                        $('.message').css('display', 'none')     
                    }, 1000)
                }else{
                    $('input[name=start_line]').val(data.StartLine)   //如果变动就改变所对应的值
                    $(".log").prepend('<pre>' + data.Content)
                }
            }).fail(function(err) {
                console.log(err);
            });
        }
    })
</script>