{{template "base/head" .}}
<div class="repository">
{{template "repo/header" .}}
    <div class="repository new repo ui middle very relaxed page grid">
        <div class="column">
            {{template "base/alert" .}}
            <h4 class="ui top attached header">
                <div class="ui two column grid">
                    <div class="column">
                        {{$.i18n.Tr "repo.modelarts.version_manage"}}
                    </div>
                    <div class="column right aligned">
                        <a href="javascript:window.history.back();">{{svg "octicon-reply" 16}}{{$.i18n.Tr "repo.modelarts.back"}}</a>
                    </div>
                </div>     
            </h4>

            <div class="ui attached segment">
                
                <div class="ui style accordion">
                    <div class="title active">
                        <i class="dropdown icon"></i>
                        {{$.i18n.Tr "repo.modelarts.train_job.version"}}
                    </div>
                    <div class="content active">
                        <div class="ui container">
                            <div class="ui top attached tabular menu">
                                    <a class="item active" data-tab="configs">{{$.i18n.Tr "repo.modelarts.train_job.config"}}</a>
                                    <a class="item logs" data-tab="logs">{{$.i18n.Tr "repo.modelarts.train_job.config"}}</a>
                                    <!-- <a class="item" data-tab="resources">资源占用情况</a> -->
                                </div>
                                <div class="ui bottom attached tab segment active" data-tab="configs">
                                    <div>
                                        <div class="ui yellow segment">
                                            <table class="ui celled striped table">
                                                <thead>
                                                <tr> <th colspan="2"> {{.i18n.Tr "repo.modelarts.train_job.basic_info"}} </th> </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.job_name"}} </td>
                                                        <td>{{.result.JobName}}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.job_status"}} </td>
                                                        <td>{{.result.Status}}</td>
                                                    </tr>
                                                    <tr>
                                                        <td  class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.version"}} </td>
                                                        <td>{{.result.VersionName}}</td>
                                                    </tr>
                                                    <tr>
                                                        <td  class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.start_time"}} </td>
                                                        <td>{{.result.CreateTime}}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.dura_time"}} </td>
                                                        <td>{{.result.TrainJobDuration}}</td>
                                                    </tr>
                                                    <tr>
                                                        <td  class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.description"}} </td>
                                                        <td>{{.result.Description}}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="ui green segment">
                                            <table class="ui celled striped table">
                                                <thead>
                                                <tr> <th colspan="2"> {{.i18n.Tr "repo.modelarts.train_job.parameter_setting_info"}} </th> </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.AI_driver"}} </td>
                                                        <td>{{.result.EngineName}} | {{.result.EngineVersion}}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.start_file"}}</td>
                                                        <td>{{.result.BootFileUrl}}</td>
                                                    </tr>
                                                    <tr>
                                                        <td  class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.dataset"}} </td>
                                                        <td>{{.result.DatasetName}}</td>
                                                    </tr>
                                                    <tr>
                                                        <td  class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.run_parameter"}} </td>
                                                        <td>{{.result.Parameter}}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="ui blue segment">
                                            <table class="ui celled striped table">
                                                <thead>
                                                <tr> <th colspan="2"> {{.i18n.Tr "repo.modelarts.train_job.resource_setting_info"}} </th> </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.resource_pool"}} </td>
                                                        <td>{{.result.PoolName}}</td>
                                                    </tr>
                                                    <tr>
                                                        <td class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.amount_of_compute_node"}}</td>
                                                        <td>{{.result.WorkServerNum}}</td>
                                                    </tr>
                                                    <tr>
                                                        <td  class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.NAS_mount_path"}} </td>
                                                        <td>{{.result.NasMountPath}}</td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="ui bottom attached tab segment" data-tab="logs">
                                    <div class="ui message" style="display: none;">
                                        <div class="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">{{.log_file_name}}</span>
                                                <input type="hidden" name="file_name" value={{.log_file_name}}>
                                                <input type="hidden"  name="start_line" value={{.log.StartLine}}>
                                                <input type="hidden"  name="end_line" value={{.log.EndLine}}>
                                            </div>
                                        </div>
                                        <div class="ui attached segment log" style="height: 300px !important; overflow: auto;">
                                            <pre>{{.log.Content}}</pre>
                                        </div>
                                        
                                   </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{template "base/footer" .}}

<script>
    $('.menu .item').tab()
    $('.ui.style.accordion').accordion();

    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]
    })
    
    $(".log").scroll(function () {
        var scrollTop = $(this)[0].scrollTop;   // 滚动距离
        var scrollHeight = $(this)[0].scrollHeight;  // 文档高度
        var divHeight = $(this).height();   // 可视区高度
        var file_name = $('input[name=file_name]').val()

        if(parseInt(scrollTop) + divHeight + 29 == scrollHeight){
            var end_line = $('input[name=end_line]').val()
            $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?file_name=${file_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?file_name=${file_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>