<%@ page language="java" pageEncoding="utf-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阅卷平台</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="${ctxStatic}/inspected/css/inspectedLibrary.css"/>
    <script type="text/javascript" src="${ctxStatic}/mark-new/js/jquery.min.js"></script>
    <script type="text/javascript" src="${ctxStatic}/mark-new/js/jquery-ui.min.js "></script>
    <script type="text/javascript" src="${ctxStatic}/mark-new/js/jquery.mousewheel.min.js"></script>
    
    <script type="text/javascript" src="${ctxStatic}/answer-check/js/common.js"></script>
    
    <link rel="stylesheet" href="${ctxStatic}/iviewer/jquery.iviewer.css"/>
    <script type="text/javascript" src="${ctxStatic}/iviewer/jquery.iviewer.js"></script>
    
    <script type="text/javascript" src="${ctxStatic}/mark-new/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="${ctxStatic}/mark-new/js/jquery.mousewheel.min.js"></script>
    
    <script type="text/javascript" src="${ctxStatic}/utils/image-utils.js"></script>

</head>
<body id="index">
<div class="wp">
    <div id="top" class="top cl">
        <div class="z">
            <div>
                <span class="b">编号：</span><span class="i" id="studentId"></span><span class="pipe">|</span>
                <span class="b">科目：</span><span class="i" id="subject"></span><span class="pipe">|</span>
                <span class="b">评卷员：</span><span class="i" id="markerName"></span><span class="pipe">|</span>
                <span class="b">未复核：</span><span class="i" id="progress"></span><span class="pipe">|</span>
            </div>
        </div>
        <div class="y">
            <div><span class="user">${web_user.name}</span>
                <span><a class="close" href="javascript:window.close()">关闭</a></span>
            </div>
        </div>
    </div>
</div>
<div class="middle">
    <div class="middle-bg"></div>
    <div class="box">
        <div class="cont cl">
            <div class="left">
                <!-- 	          <div class="iviewer_zoom cl"> -->
                <!-- 	            <div class="iviewer_zoom_in" id="zoom-in-button"></div> -->
                <!--             	<div class="iviewer_zoom_out" id="zoom-out-button"></div> -->
                <!--             	<div class="iviewer_zoom_zero" id="zoom-origin-button"></div> -->
                <!--             	<div class="iviewer_zoom_fit" id="zoom-fit-button"></div> -->
                <!-- 	          </div> -->
                <div id="image-holder-track" class="image-content" style="position: relative; "></div>
            </div>
            <div class="right">
                <div class="formbox">
                    <div class="form-t">
                        <h1><span>评分：</span><span class="i" id="markerScore"></span></h1>
                    </div>
                    <div class="form-m">
                        <table class="c-table" cellpadding="0" cellspacing="0" width="100%">
                            <thead>
                            <tr>
                                <th>小题</th>
                                <td>给分</td>
                            </tr>
                            </thead>
                            <tbody id="question-content">
                            <!-- 	                  <tr> -->
                            <!-- 	                    <th>网络教育电厂2015年下半年本科学士学位主干课程考试01</th> -->
                            <!-- 	                    <td>3.5</td> -->
                            <!-- 	                  </tr> -->
                            </tbody>
                        </table>
                    </div>
                    <div class="form-b cl">
                        <input type="button" id="save-button" value="确认"/>
                        <input type="button" class="grey" id="back-button" value="打回"/>
                    </div>
                </div>
            </div>
            <div class="tipsbox">
                <p><span class="icon error"></span><br>当前没有可复核的试卷</p>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var message = '${message}';
    var ids = [${ids}];
    var current;
    var student;
    var iviewer;
    var regex = /^[a-z]+$/ig;
    $(document).ready(function () {
        if (message != undefined && message != '') {
            alert(message);
        }

        $('#save-button').click(save);
        $('#back-button').click(back);

        $('#zoom-in-button').click(function () {
            if (iviewer != undefined) {
                iviewer.iviewer('zoom_by', 1);
            }
        });
        $('#zoom-out-button').click(function () {
            if (iviewer != undefined) {
                iviewer.iviewer('zoom_by', -1);
            }
        });
        $('#zoom-origin-button').click(function () {
            if (iviewer != undefined) {
                iviewer.iviewer('set_zoom', 100);
            }
        });
        $('#zoom-fit-button').click(function () {
            if (iviewer != undefined) {
                iviewer.iviewer('fit');
            }
        });
        if (ids.length == 0) {
            $(".cont cl").css("display", "none");
            return;
        }
        $(".tipsbox").css("display", "none");

        window.onbeforeunload = function () {
            $.post('${ctx}/admin/exam/library/inspected/clear', {
                libraryId: student.id
            }, function (result) {

            });
        }

        $('#progress').html(ids.length);
        process(1);
    });

    function process(index) {

        if (index < 1) {
            return;
        }
        if (index > ids.length) {
            alert('所有考生已处理完毕，请返回重新搜索');
            window.location.reload();
            return;
        }
        current = index;
        $('#answer-content').empty();
        $('#image-holder-track').hide();
        $.post('${ctx}/admin/exam/library/inspected/info', {
            libraryId: ids[index - 1]
        }, function (result) {
            if (result.success == true) {
                student = result;
                render();
            } else {
                //$('#progress').html(ids.length-current);
                process(current + 1);
            }
        }).error(function () {
            alert('获取考生信息出错');
            onProcessFinish(true);
        });
    }

    function onProcessFinish(error) {
        if (!error) {
            $('#save-button').removeAttr("disabled");
        }
    }

    function render() {

        $('#studentId').html(student.studentId);
        $('#subject').html(student.subjectCode + '_' + student.subjectName);
        $('#markerName').html(student.markerName);
        $('#markerScore').html(student.markerScore);
        $("#question-content").empty();
        for (var i = 0; i < student.questions.length; i++) {
            var q = student.questions[i];
            var dom = '<tr><th>' + q.questionNumber + '</th><td>' + q.score + '</td></tr>';
            $("#question-content").append(dom);
        }

        /*     if(iviewer==undefined){
                  iviewer = $('#image-holder-track').iviewer({
                      src: '
        
        
        
        
        
        
        
        
        
        
        
        
        ${fileServer}' + student.sheetUrls[0],
              zoom_delta: 1.2,
              zoom: 'fit',
              zoom_min: 10,
              mousewheel: false,
              zoom_animation: false,
              update_on_resize: true,
              ui_disabled: true,
              onFinishLoad: function(ev, url) {
                  $('#image-holder-track').show();
                  onProcessFinish(false);
              },
              onErrorLoad: function(ev, url) {
                  onProcessFinish(true);
              }
          });
    }else{
        iviewer.iviewer('loadImage', '
        
        
        
        
        
        
        
        
        
        
        
        
        ${fileServer}' + student.sheetUrls[0]);
    } */
        var pane = $('<canvas id="track-builder-canvas"></canvas>').appendTo($('#image-holder-track'));
        var canvas = document.getElementById('track-builder-canvas');
        var ctx = canvas.getContext('2d');
        buildImages('${fileServer}', student.picUrls, student.pictureConfig, canvas, ctx, student.markTracks, student.markSpecialTagList);
        $('#image-holder-track').show();
        onProcessFinish(false);
    }

    function save() {
        if (student == undefined) {
            return;
        }
        $.post('${ctx}/admin/exam/library/inspected/save', {
            libraryId: student.id
        }, function (result) {
            if (result == true) {
                $('#progress').html(ids.length - current);
                process(current + 1);
            } else {
                alert('提交失败，请稍后重试');
                window.location.reload();
            }
        });
    }

    function back() {
        if (student == undefined) {
            return;
        }
        if (!confirm('确定要打回该评卷任务吗?')) {
            return;
        }
        $.post('${ctx}/admin/exam/library/back', {
            id: student.id
        }, function (result) {
            if (result.success == true) {
                $('#progress').html(ids.length - current);
                process(current + 1);
            } else {
                alert(result.message);
            }
        });

    }

    function buildImages(imageServer, picUrls, config, canvas, ctx, markTracks, markSpecialTagList) {
        new ImageLoader({
            server: imageServer,
            flush: true,
            strict: false,
            split: [${properties['slice.split.config']}]
        }).combine(picUrls, canvas, config, function () {
            //阅卷轨迹
            if (markTracks != undefined && markTracks.length > 0) {
                ctx.font = "30px Arial";
                ctx.fillStyle = 'red';
                for (var j = 0; j < markTracks.length; j++) {
                    if (markTracks[j].positionX > 0 && markTracks[j].positionY > 0) {
                        ctx.fillText(
                            markTracks[j].score,
                            markTracks[j].positionX * canvas.width,
                            markTracks[j].positionY * canvas.height);
                    }
                }
            }
            if (markSpecialTagList != undefined && markSpecialTagList.length > 0) {
                ctx.font = "30px Arial";
                ctx.fillStyle = 'red';
                for (var i = 0; i < markSpecialTagList.length; i++) {
                    if (markSpecialTagList[i].positionX > 0 && markSpecialTagList[i].positionY > 0) {
                        ctx.fillText(markSpecialTagList[i].tagName,
                            markSpecialTagList[i].positionX * canvas.width,
                            markSpecialTagList[i].positionY * canvas.height);
                    }
                }
            }
        })
    }

</script>
</html>