<%@ 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}/answer-check/css/style.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>
</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="progress"></span><span class="pipe">|</span>
            <span class="b">姓名：</span><span class="i" id="name"></span><span class="pipe">|</span>
            <span class="b">准考证：</span><span class="i" id="examNumber"></span><span class="pipe">|</span>
            <span class="b">学号：</span><span class="i" id="studentCode"></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="campusName"></span><span class="pipe">|</span>
            <span class="b">客观总分：</span><span class="i r" id="objectiveScore"></span><span class="pipe">|</span>
            <span class="b">主观总分：</span><span class="i r" id="subjectiveScore"></span>
        </div></div>
        <div class="y 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>
    <div class="middle">
        <div class="middle-bg"></div>
        <div class="box">
            <div class="cont cl">
                <div id="left" class="left">
                        <div class="form-m">
                            <div class="form-t">
                                <span class="b">是否缺考：</span>
                                <label>
                                <span class="radio"><input type="button" class="absent-select" data-absent="true"></span><span>是</span>
                                </label>
                                <label>
                                <span class="radio"><input type="button" class="absent-select" data-absent="false"></span><span>否</span>
                                </label>
                            </div>
                            <div id="answer-content">
                            </div>
                        </div>
                        <div class="form-b cl">
                            <input type="button" id="save-button" value="保存"/>
                            <input type="button" id="previous-button" class="next" value="上一张"/>
                            <input type="button" id="next-button" class="next" value="下一张"/>
                        </div>
                </div>
                <div class="right">
                    <div style="position:relative;" class="image-content" id="image-holder">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
var ids = [${ids}];
var current;
var student;
var iviewer;
var regex = /^[a-z]+$/ig;
$(document).ready(function() {
    $('#next-button').click(function(){
        process(current+1);
    });
    $('#previous-button').click(function(){
        process(current-1);
    });
    $('#save-button').click(save);
    $('.absent-select').click(function(){
        if(!$(this).hasClass('on')) {
            $('.absent-select').removeClass('on');
            $(this).addClass('on');
        }
        if(student!=undefined) {
            student.absent = $(this).attr('data-absent')=='true';
        }
    });
    $('#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){
        alert('没有需要处理的考生，请返回重新搜索');
        return;
    }
    process(1);
});

function process(index){
    if(index<1){
        return;
    }
    if(index > ids.length){
        alert('所有考生已处理完毕，请返回重新搜索');
        return;
    }
    current = index;
    $('#answer-content').empty();
    $('#image-holder').hide();
    $('#save-button').attr("disabled", true);
    $('#previous-button').attr("disabled", true);
    $('#next-button').attr("disabled", true);
    $.post('${ctx}/admin/exam/check/answer/info', {
        studentId: ids[index-1]
    }, function(result){
        student = result;
        render();
    }).error(function() {
        alert('获取考生信息出错');
        onProcessFinish(true)
    });
}

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

function render(){
    $('#progress').html(current+'/'+ids.length);
    $('#name').html(student.name);
    $('#examNumber').html(student.examNumber);
    $('#studentCode').html(student.studentCode);
    $('#subject').html(student.subjectCode+'_'+student.subjectName);
    $('#campusName').html(student.campusName);
    $('#objectiveScore').html(student.objectiveScore);
    $('#subjectiveScore').html(student.subjectiveScore);
    
    $('.absent-select').removeClass('on');
    if(student.absent==true){
        $('.absent-select[data-absent="true"]').addClass('on');
    }else{
        $('.absent-select[data-absent="false"]').addClass('on');
    }
    
    var count = {};
    for(var i=0;i<student.answers.length;i++){
        var q = student.answers[i];
        if(q.exist==true){
            var title = student.titles[q.mainNumber];
            var dom = $('#answer-content dl[number="'+q.mainNumber+'"]');
            if(dom.length<1){
                dom = $('<dl number="'+q.mainNumber+'"><dt><span class="icon"></span><span class="b"></span><span class="num"></span></dt><dd></dd></dl>').appendTo($('#answer-content'));
                dom.find('span.b').html(student.titles[q.mainNumber]);
            }
            if(count[q.mainNumber]==undefined){
                count[q.mainNumber] = 0;
            }
            count[q.mainNumber]++;
            dom.find('span.num').html('('+count[q.mainNumber]+')');
            
            q.dom = $('<span class="input"><em>'+q.subNumber+'</em><input type="text" value="'+q.answer+'" number="'+i+'"/></span>').appendTo(dom.find('dd'));
            if(title.indexOf('多项选择')>=0 || title.indexOf('多选')>=0){
                q.dom.find('input').addClass('large');
            }
            q.dom.find('input').on('input', onAnswerInput);
            q.dom.find('input').on('focus', onAnswerFocus);
        }
    }

    if(iviewer==undefined){
        iviewer = $('#image-holder').iviewer({
            src: '${sheetServer}' + 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').show();
                onProcessFinish(false);
            },
            onErrorLoad: function(ev, url) {
                onProcessFinish(true);
            }
        });
    }else{
        iviewer.iviewer('loadImage', '${sheetServer}' + student.sheetUrls[0]);
    }
}

function save(){
    if(student==undefined){
        return;
    }
    var array = [];
    for(var i=0;i<student.answers.length;i++){
        var q = student.answers[i];
        if(q.exist==true){
            var value = q.dom.find('input').val();
            if(value.length==0){
                value='#';
            }
            array.push(value);
        }else{
            array.push(q.answer);
        }
    }
    $.post('${ctx}/admin/exam/check/answer/save', {
        studentId: student.id,
        absent: student.absent,
        answers: array.join(',')
    }, function(result){
        if(result==true){
            process(current+1);
        }else{
            alert('保存失败，请稍后重试');
        }
    });
}

function onAnswerFocus(){
    $(this)[0].select();
}

function onAnswerInput(){
    var value = $(this).val();
    var q = student.answers[parseInt($(this).attr('number'))];
    if(value.length>1 && q.multi==false){
        value = value.substring(value.length-1);
    }
    regex.lastIndex = 0;
    if(value.length==0 || regex.test(value)==false){
        value='';
    }else{
        value = value.toUpperCase();
    }
    $(this).val(value);
}
</script>
</html>