<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>首页-灰绿色主题</title>
        <link href="../css/style.css" rel="stylesheet" type="text/css">
        <script src="../js/jQuery.js" type="text/javascript"></script>
        <script src="../js/common.js" type="text/javascript"></script>
        <script src="../js/model/WdatePicker/WdatePicker.js" type="text/javascript"></script>
        <script src="../js/utils.js" type="text/javascript"></script>
        <script src="../js/model/highcharts/highcharts.js"></script>
    </head>
    <body>
        <div class="layout_header">
            <div class="header">
                <div class="h_logo"><a href="#" title="101网校课程管理系统"><img src="../images/qaup_logo.png" width="130" height="40"  alt=""/></a></div>
                <div class="h_nav"> <span class="hi"><img src="../images/head_default.jpg" alt="id"/> 欢迎你，管理员！</span><span class="link"><a href="#"><i class="icon16 icon16-setting"></i> 设置</a><a href="#"><i class="icon16 icon16-power"></i> 注销</a></span> </div>
                <div class="clear"></div>
            </div>
        </div>
        <div class="layout_leftnav">
            <div class="inner">
                <div class="nav-vertical">
                    <ul class="accordion">
                        <li><a href="#"><i class="icon20 icon20_index"></i>信息管理<span></span></a>
                            <ul class="sub-menu">
                                <li><a href="/mySchool/web/courseList.html">课程管理</a></li>
                                <li><a href="/mySchool/web/teacherList.html">教师管理</a></li>
                                <li><a href="/mySchool/web/studentList.html">学生管理</a></li>
                                <li><a href="/mySchool/web/financeList.html" class="active">财务管理</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="layout_rightmain">
            <div class="inner">
                <div class="pd10x20">
                    <div class="page-title mb20">
                        <i class="i_icon"></i><label id="teacher_name">Male</label>
                    </div>
                    <div class="panel">
                        <div class="panel-tab pd10">
                            <ul>
                                <li class="active" id="a1" onclick="setTab('a', 1, 3)">课程表</li>
                                <li id="a2" onclick="setTab('a', 2, 3)">年级分布</li>
                                <li id="a3" onclick="setTab('a', 3, 3)">课时费</li>
                                <div class="clear"></div>
                            </ul>
                        </div>
                        <div class="panel-main pd10">
                            <div id="con_a_1" style="width: 1000px;" class="hover" >
                                <div class="panel-header">
                                    <div><a href="#" class="btn btn-primary" onclick="downloadCourse()">下载</a></div>
                                </div>
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th >学生</th>
                                            <th >年级</th>
                                            <th >科目</th>
                                            <th >课时长</th>
                                            <th >上课时间</th>
                                            <th >教室</th>
                                        </tr>
                                    </thead>
                                    <tbody  id = "couse_list_tbody">
                                    </tbody>
                                </table>
                            </div>
                            <div id="con_a_2" style="display:none; width: 1000px;" ></div>
                            <div id="con_a_3" style="display:none; width: 1000px;" >
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th >年级</th>
                                            <th >课时费/时</th>
                                        </tr>
                                    </thead>
                                    <tbody  id = "cost_list_tbody">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    
<script type="text/javascript">
	var teacherId = '';
	var startTimeStr = '';
	var endTimeStr = '';
	var gradeSet = new Array(); 
	var gradeNameArray = new Array(); 
	var gradeIdNum = new Array(); 
	
	window.onload = function() {
	    teacherId = getQuery("teacherId");
	    startTimeStr = getQuery("startTimeStr");
	    endTimeStr = getQuery("endTimeStr");
	
	    initGradeSet();
	    
	    var teacherUrl = "/mySchool/office/getTeacherById.action";
	    var params = "teacherId=" + teacherId;
	    var teacherJson = ajaxQuery(teacherUrl, params);
	    this.document.getElementById("teacher_name").innerHTML = teacherJson.data.teacherList[0].name;
	    
	    fillCourseTable(teacherId, startTimeStr, endTimeStr);
	    drawGradeImg();
	    initFinanceList();
	}
	
	function initGradeSet() {
		var gradeUrl = "/mySchool/office/getGradeList.action";
		var gradeListJson = ajaxQuery(gradeUrl, null);

	    var row_length = gradeListJson.data.size;
	        
	    for (var i = 0; i < row_length; i++) {
	    	gradeSet[gradeListJson.data.gradeList[i].gradeId] = gradeListJson.data.gradeList[i].gradeName;
	    	gradeNameArray[i] = gradeListJson.data.gradeList[i].gradeName;
	    	gradeIdNum[i] = 0;
	    }
	    gradeIdNum[row_length] = 0;
	}
		
	function fillCourseTable(teacherId, startTimeStr, endTimeStr){
        var courseUrl = "/mySchool/office/getCourseList.action";
        var params =  "startTimeStr=" + startTimeStr + "&" + "endTimeStr=" + endTimeStr + "&" + "teacherId=" + teacherId + "&courseStatus=1";
        var courseListJson = ajaxQuery(courseUrl, params);
        
         if(courseListJson.data.size == 0){
             return;
         }
         
         var data = courseListJson.data; 
         var row_length = data.size;
         var task_tbody = document.getElementById("couse_list_tbody");
         
         for(var i = 0; i < row_length; i++){
                var tr = document.createElement("tr");
                
                var studentName = document.createElement("td");
                studentName.innerHTML = data.course_list[i].studentName;
                tr.appendChild(studentName);
                
                var grade = document.createElement("td");
                grade.innerHTML = gradeSet[data.course_list[i].gradeId];
                tr.appendChild(grade);
                
                var subjectName = document.createElement("td");
                subjectName.innerHTML = data.course_list[i].subjectName;
                tr.appendChild(subjectName);
                
                var courseTime = document.createElement("td");
                courseTime.innerHTML = data.course_list[i].courseTime;
                tr.appendChild(courseTime);
                
                var time = document.createElement("td");
                time.innerHTML = (new Date(data.course_list[i].time)).Format("yyyy-MM-dd hh:mm:ss");
                tr.appendChild(time);
                
                var classroom = document.createElement("td");
                classroom.innerHTML = data.course_list[i].classroom;
                tr.appendChild(classroom);
                
                gradeIdNum[data.course_list[i].gradeId] += 1;
                
                task_tbody.appendChild(tr);
            }
    }
	
	function drawGradeImg() {
		$(function() {
            $('#con_a_2').highcharts({
                title: {
                    text: '课程年级分布图',
                    x: -20 //center
                },
                
                xAxis: {
                    categories: gradeNameArray
                },
                yAxis: {
                    title: {
                        text: '课程年级学生数'
                    },
                    plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                },
                tooltip: {
                    valueSuffix: '个'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [{
                        name: '学生数',
                        data: gradeIdNum.slice(1)
                    }]
            });

        });
	}
	
	   function initFinanceList() {
	        var teacherGradeCostUrl = "/mySchool/finance/getTeacherGradeCostList.action";
	        var params = "teacherId=" + teacherId;
	        var teacherJson = ajaxQuery(teacherGradeCostUrl, params);

	        var task_tbody = document.getElementById("cost_list_tbody");

	        var data = teacherJson.data;
	        var row_length = data.size;

	        for (var i = 0; i < row_length; i++) {
	        	var tr = document.createElement("tr");
	        	
                var grade = document.createElement("td");
                grade.innerHTML = gradeSet[data.teacherList[i].gradeId];
                tr.appendChild(grade);
                
                var cost = document.createElement("td");
                cost.innerHTML = data.teacherList[i].cost;
                tr.appendChild(cost);
                task_tbody.appendChild(tr);
	        }
	    }
	   
       function downloadCourse(){
           var params = "";
           params += "startTimeStr=" + startTimeStr + "&";
           params += "endTimeStr=" + endTimeStr + "&";
           params += "teacherId=" + teacherId;

           window.location.href = "/mySchool/office/downloadCourse.action?"+params;
       }
</script>
</html>