<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <title>成绩分析</title>
    <meta name="decorator" content="default"/>
    <%@include file="/WEB-INF/views/include/head.jsp" %>
    <%@include file="/WEB-INF/views/include/dialog.jsp" %>
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/jBox/Source/jBox.css">
    <script type="text/javascript" src="${ctxStatic}/jBox/Source/jBox.min.js"></script>
    <script type="text/javascript" src="${ctxStatic}/echarts/echarts.min.js"></script>
    <style type="text/css">.sort {
        color: #0663A2;
        cursor: pointer;
    }</style>
</head>
<body>
<ul class="nav nav-tabs">
	<li><a href="${ctx}/admin/exam/reportSubjectRange">分段统计</a></li>
    <li><a href="${ctx}/admin/exam/reportSubjectCollege?subjectCode=${query.subjectCode}" data-i18n-text="report.college">电厂分析</a></li>
    <li><a href="${ctx}/admin/exam/reportSubjectTeacher?subjectCode=${query.subjectCode}" data-i18n-text="report.teacher">总评分析</a></li>
    <li><a href="${ctx}/admin/exam/reportSubjectClass?subjectCode=${query.subjectCode}" data-i18n-text="report.class">机组分析</a></li>
    <li id="objectiveLi"><a
            href="${ctx}/admin/exam/reportSubjectQuestion?subjectCode=${query.subjectCode}&objective=true" data-i18n-text="report.question.objective">客观题分析</a>
    </li>
    <li id="subjectiveLi"><a
            href="${ctx}/admin/exam/reportSubjectQuestion?subjectCode=${query.subjectCode}&objective=false" data-i18n-text="report.question.subjective">主观题分析</a>
    </li>
    <li><a href="${ctx}/admin/exam/reportSubjectGroup?subjectCode=${query.subjectCode}" data-i18n-text="report.group">分组统计分析</a></li>
</ul>
<form id="searchForm" action="${ctx}/admin/exam/reportSubjectQuestion" method="post" class="breadcrumb form-search">
    <input id="objective" name="objective" value="${query.objective}" type="hidden"/>
    <div>
        <label data-i18n-text="report.question.subject">科目：</label>
        <select class="input-large" id="subjectCode" name="subjectCode">
            <c:forEach items="${subjectList }" var="subject">
                <option value="${subject.code }"
                        <c:if test="${query.subjectCode eq subject.code }">selected</c:if>>${subject.code}-${subject.name}</option>
            </c:forEach>
        </select>
        <c:if test="${query.objective}">
        <label data-i18n-text="report.question.paperType">卷型：</label>
        <select class="input-large" id="type-select" name="paperType">
            <option value=""  data-i18n-text="report.question.select">请选择</option>
            <c:forEach items="${typeList }" var="paperType">
                <option value="${paperType}"
                        <c:if test="${query.paperType eq paperType }">selected</c:if>>${paperType}</option>
            </c:forEach>
        </select>
        </c:if>
        &nbsp;
        <input id="btnSubmit" class="btn btn-primary" type="button" value="查询" onclick="goSearch()"  data-i18n-value="report.question.search"/>		
        &nbsp;
		<!-- <input id="export-button" class="btn" type="button" value="导出"  data-i18n-value="report.question.export"/>
		 &nbsp; -->
        <input class="btn btn-primary" type="button" value="查看统计图" onclick="viewQuestionEcharts()" data-i18n-value="report.question.chart"/>

    </div>
</form>
	<form id="exportForm" action="${ctx}/admin/exam/reportSubjectQuestion/export" method="post" class="breadcrumb form-search hide">
        <input type="text" name="subjectCode" value="${query.subjectCode}"  class="input-small"/>
        <input type="text" name="paperType" value="${query.paperType}"  class="input-small"/>
        <input type="text" name="objective" value="${query.objective}"  class="input-small"/>
	</form>
<tags:message content="${message}"/>
<table id="contentTable" class="table table-striped table-bordered table-condensed">
    <thead>
    <tr>
        <th data-i18n-text="report.question.name">题目名称</th>
        <th data-i18n-text="report.question.mainNumber">大题号</th>
        <th data-i18n-text="report.question.subNumber">小题号</th>
        <th data-i18n-text="report.question.score">单题分数</th>
        <th data-i18n-text="report.question.avgScore">单题平均分</th>
        <th data-i18n-text="report.question.stdev">单题标准差</th>
        <th data-i18n-text="report.question.scoreRate">得分率</th>
        <th data-i18n-text="report.question.fullScoreRate">满分率</th>
		<c:if test="${query.objective}">
        <th data-i18n-text="report.question.paperType">试卷类型</th>
        </c:if>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${list}" var="question">
        <tr>
            <td>${question.questionName}</td>
            <td>${question.mainNumber}</td>
            <td>${question.subNumber}</td>
            <td>${question.totalScore}</td>
            <td><fmt:formatNumber type="number" value="${question.avgScore}" pattern="0.00" maxFractionDigits="2"/></td>
            <td><fmt:formatNumber type="number" value="${question.stdev}" pattern="0.00" maxFractionDigits="2"/></td>
            <td><fmt:formatNumber type="number" value="${question.scoreRate}" pattern="0.00" maxFractionDigits="2"/></td>
            <td><fmt:formatNumber type="number" value="${question.fullScoreRate}" pattern="0.00" maxFractionDigits="2"/></td>
			<c:if test="${query.objective}">
            <td>${question.paperType}</td>
            </c:if>
        </tr>
    </c:forEach>
    </tbody>
</table>
<script type="text/javascript">
var objective = '${query.objective}';

$('#subjectCode').change(function(){
    var code = $(this).val();
    $('#type-select').empty();
    $('#type-select').append('<option value="">请选择</option>');
    if(code==''){
        $('#type-select').val('0').trigger('change');
        return;
    }
    $.post('${ctx}/admin/exam/paper/getPaperType', {subjectCode: code}, function(result){
        var parent = $('#type-select');
        for(var i=0;i<result.length;i++){
            var json = result[i];
            var dom = $('<option value="'+json.paperType+'">'+json.paperType+'</option>').appendTo(parent);
        }
        parent.trigger('change');
    });
});

$("#export-button").click(function(){
    if ($("#subjectCode").val() == null || $("#subjectCode").val() == '') {
        alert('请选择科目');
        return;
    }
	$("#exportForm").attr("action","${ctx}/admin/exam/reportSubjectQuestion/export");
	$("#exportForm").submit();
});

    $(document).ready(function () {
        if (objective == 'true') {
            $('#objectiveLi').addClass('active');
        } else {
            $('#subjectiveLi').addClass('active');
        }
    });

    function viewQuestionEcharts() {
        var objective = '${query.objective}';
        var questions = new Array();
        var avgScores = new Array();
        var scoreRates = new Array();
        var fullScoreRates = new Array();

        $('tbody tr').each(function (i) {
            $(this).children('td').each(function (j) {
                if(j == 0){
                    questions.push($(this).text()+"_"+$(this).next().text()+"_"+$(this).next().next().text());
                } else if(j == 4){
                    avgScores.push($(this).text());
                } else if(j == 6){
                    scoreRates.push($(this).text()*100);
                } else if(j == 7){
                    fullScoreRates.push($(this).text()*100);
                }
            });
            var width = 800;
            if(i>40){
            	width = 15*i;
            }
            if(i = $('tbody tr').length-1){
            	$("#echart-content").width(width+"px") ;
            }
            
        });

        var title = '';

        var imageModal = new jBox('Modal');
        imageModal.setWidth($(window).width() * 0.9);
        imageModal.setHeight($(window).height() * 0.85);
        imageModal.setTitle(objective == 'true'?getMessage("report.question.objective"):getMessage("report.question.subjective"));
        imageModal.setContent($('#echart-view-content'));
        imageModal.open();

        var myChart = echarts.init(document.getElementById('echart-content'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: objective == 'true'?getMessage("report.question.objective"):getMessage("report.question.subjective")
                // textAlign:'center'
            },
            tooltip: {},
            legend: {
                data: [getMessage("report.question.avgScore"),
                       getMessage("report.question.scoreRate"),
                       getMessage("report.question.fullScoreRate")]
            },
            toolbox: {
                feature : {
                    saveAsImage : {show: true}
                }
            },
         /*    dataZoom: [{
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                left: '9%',
                bottom: -5,
                start: 10,
                end: 90 //初始化滚动条
            }], */
            xAxis: {
                axisLabel: {
                    interval:0,
                    rotate:60
                },
                data: questions
            },
            yAxis: [
                {
                    type: 'value'
                },
                {
                    type: 'value'
                }
            ],
            series: [{
                name: getMessage("report.question.avgScore"),
                type: 'bar',
                data: avgScores
            },{
                name: getMessage("report.question.scoreRate"),
                type: 'line',
                yAxisIndex : 1,
                data: scoreRates
            },{
                name: getMessage("report.question.fullScoreRate"),
                type: 'line',
                yAxisIndex : 1,
                data: fullScoreRates
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }


    function goSearch() {
        if ($("#subjectCode").val() == null || $("#subjectCode").val() == '') {
            alert('请选择科目');
            return;
        }
    	$("#searchForm").attr("action","${ctx}/admin/exam/reportSubjectQuestion");
        $("#searchForm").submit();
        return false;
    }

    $(document).keydown(function (event) {
        if (event.keyCode == 13 || event.keyCode == 108) {
            goSearch();
            return false;
        }
    });
</script>
<div id="echart-view-content" class="container-fluid" style="display:none" align="center">
    <div id="echart-content" style="width: 800;height:700px;"/>
</div>
</body>
</html>