<style>body{background-color: #fff!important;}</style>

<script src="/javascripts/educoder/echarts.js"></script>

<div class="statistics_top">
  <p class="color-blue font-32 edu-txt-center pt50"><%= @school.try(:name) %><%#= @department.try(:name) %></p>
  <div class="statistics_position">
    <ul class="educontent edu-txt-center clearfix count_ul">
      <li>
        <span>教师</span>
        <span><%= @teachers_count %></span>
      </li>
      <li>
        <span>学生</span>
        <span><%= @students_count %></span>
      </li>
      <li>
        <span>课堂</span>
        <span><%= @courses_count %></span>
      </li>
      <li>
        <span>发布实训</span>
        <span><%= @shixuns_count %></span>
      </li>
    </ul>
  </div>
</div>
<div class="educontent mt30 mb40">
  <div class="base_situation edu-back-white mb30 static_shadow">
    <p class="font-24 padding30-20">基本情况</p>
    <div class="base_status_name">
      <li>教师</li>
      <li>学生</li>
      <li>课堂</li>
      <li>实训</li>
      <li>实训报告</li>
      <li>学员实战时间</li>
<!--      <li>云主机</li>-->
    </div>
    <div class="base_status_value">
      <li><span><%= @teachers_count %></span>人</li>
      <li><span><%= @students_count %></span>人</li>
      <li><span><%= @courses_count %></span>个</li>
      <li><span><%= @shixuns_count %></span>个</li>
      <li><span><%= @shixun_report_count %></span>个</li>
      <li><span data-tip-down="所有学员的实训耗时之和"><span><%= @shixun_time_sum %></span>天</span></li>
<!--      <li><span><%#= @department.present? ? @department.host_count.to_i : @school.departments.first.try(:host_count).to_i %></span>台</li>-->
    </div>
  </div>

  <div class="white-panel mb20 pl0 clearfix">
    <li class="active" index="1"><a href="javascript:void(0);">课堂</a></li>
    <li index="2"><a href="<%= student_shixun_college_path(@school) %>" data-remote="true">学生实训</a></li>
    <!--<li><a href="<%#= engineering_capability_college_path(@department) %>" data-remote="true">工程能力</a></li>-->
    <li index="4"><a href="<%= student_eval_college_path(@school) %>" data-remote="true">学生测评</a></li>
    <li index="5"><a href="javascript:void(0)" data-remote="true">权限管理</a></li>
  </div>

  <div class="panelContent panelContent-1">
    <div class="onLine_lesson edu-back-white mb30 static_shadow" id="course_statistics">
      <%#= render :partial => "course_statistics" %>
    </div>

    <div class="clearfix edu-back-white mb30">
      <div class="fl with60 pr40">
        <div class="teacher_ranking static_shadow">
          <p class="font-24 padding30-20">教师排名</p>
          <table class="edu-pop-table head-color edu-txt-center bor-top-greyE" cellspacing="0" cellpadding="0">
            <thead>
            <th class="pl20 pr20">排名</th>
            <th width="10%">姓名</th>
            <th>管理课堂</th>
            <th>已发布实训作业</th>
            <th>未发布实训作业</th>
            <th>学生数</th>
            <th>完成率</th>
            <th>发布实训</th>
            </thead>
            <tbody>
            <% @teachers.each_with_index do |teacher, index| %>
                <tr>
                  <td class="pl20 pr20">
                    <% if index < 3 %>
                        <img src="/images/educoder/competition/<%= index + 1 %>.png" width="18px" height="22px" class="mt8"/></td>
                    <% else %>
                        <%= index + 1 %>
                    <% end %>
                  <td class="color-dark"><a href="<%= user_path(teacher['login']) %>" target="_blank" class="task-hide" style="max-width: 84px;"><%= teacher['real_name'] %></a></td>
                  <td><%= teacher['course_count'] %></td>
                  <td><%= teacher['shixun_work_count'] %></td>
                  <td><%= teacher['un_shixun_work_count'] %></td>
                  <td><%= teacher['student_count'] %></td>
                  <td><%= teacher['complete_rate'] %>%</td>
                  <td class="color-blue"><%= teacher['publish_shixun_count'].to_i %></td>
                </tr>
              <% end %>
              </tbody>
            </table>
        </div>
      </div>
      <div class="fl width40">
        <div class="online_status static_shadow">
          <p class="font-24 padding30-20">在线实训情况</p>
          <div id="pieChart" style="height: 440px;width: 480px;"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="panelContent panelContent-2 none">
    <div class="clearfix edu-back-white mb30">
      <div class="fl with60 pr40">
        <div class="student_ranking static_shadow">
          <p class="font-24 padding30-20">学生排名</p>
          <table class="edu-pop-table head-color edu-txt-center bor-top-greyE" cellspacing="0" cellpadding="0" id="student_shixun_table">
          </table>
        </div>
      </div>
      <div class="fl width40">
        <div class="static_shadow">
          <p class="font-24 pt30 pl20 pr20">最热评测</p>
          <div id="hotEvaluating" style="width: 480px;height: 440px;"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="panelContent panelContent-3 none">
    <div class="padding30-20 static_shadow mb30">
      <p class="font-24 mb15">工程能力趋势</p>
      <p class="edu-txt-right pr15">次/人</p>
      <div id="abilityGraph" style="height: 400px;width: 100%;"></div>
    </div>
  </div>

  <div class="panelContent panelContent-4 none">
    <div class="padding30-20 static_shadow">
      <p class="font-24 mb10">学生测评统计</p>
      <div id="student_eval_statistics">
      </div>
    </div>
  </div>
</div>
<div class="panelContent panelContent-5 none">
  <div class="static_shadow mb30 educontent">
    <div class="clearfix padding20">
      <span class="fl font-16 mr20">权限管理</span>
      <span class="fl mt3"><span class="color-orange">14</span>个检索结果（150个学院/部门）</span>
      <div class="fr" id="pollingPanel">
        <input type="text" name="search" placeholder="请输入学院/部门名称搜索">
        <a href="javascript:void(0)" onclick=""><i class="iconfont icon-sousuo font-16 color-grey-9"></i></a>
      </div>
    </div>
    <div class="controlForm">
      <p class="controlFormHead">
        <span>序号</span>
        <span>学院/部门名称</span>
        <span>管理者</span>
      </p>
      <ul>
        <li>1</li>
        <li>计算机学院</li>
        <li>
          <div class="userTeam">
            <ul class="ul_userTeam clearfix">
              <a href="javascript:void(0)" class="add_C">+&nbsp;添加</a>
              <span class="user_manage">
                胡莎莎
                <a href="javascript:void(0)" class="removeUser" onclick="notice_operation_box('','是否确认删除?','确定')"><i class="iconfont icon-guanbi font-12 color-blue"></i></a>
              </span>
              <span class="user_manage">
                胡莎莎
                <a href="javascript:void(0)" class="removeUser" onclick="notice_operation_box('','是否确认删除?','确定')"><i class="iconfont icon-guanbi font-12 color-blue"></i></a>
              </span>
            </ul>
            <p class="edu-txt-center">
              <a href="javascript:void(0)" class="color-grey-9" onclick="pullUp(this)" value="0"><i class="iconfont icon-xiajiantou color-grey-9 font-12 mr5"></i>展开全部</a>
            </p>
          </div>
        </li>
      </ul>
      <ul>
        <li>2</li>
        <li>计算机学院</li>
        <li>
          <div class="userTeam">
            <ul class="ul_userTeam clearfix">
              <a href="javascript:void(0)" class="add_C">+&nbsp;添加</a>
              <span class="user_manage">
                胡莎莎
                <a href="javascript:void(0)" class="removeUser" onclick="notice_operation_box('','是否确认删除?','确定')"><i class="iconfont icon-guanbi font-12 color-blue"></i></a>
              </span>
              <span class="user_manage">
                胡莎莎
                <a href="javascript:void(0)" class="removeUser" onclick="notice_operation_box('','是否确认删除?','确定')"><i class="iconfont icon-guanbi font-12 color-blue"></i></a>
              </span>
            </ul>
            <p class="edu-txt-center">
              <a href="javascript:void(0)" class="color-grey-9" onclick="pullUp(this)" value="0"><i class="iconfont icon-xiajiantou color-grey-9 font-12 mr5"></i>展开全部</a>
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

<script>
    function pullUp(item){
        var ulEle=$(item).parents(".userTeam").find(".ul_userTeam");
        var value=$(item).attr("value");
        if(value=="0"){
            $(ulEle).css({"height":"auto"});
            $(item).attr("value","1")
            $(item).html('<i class="iconfont icon-shangjiantou color-grey-9 font-12 mr5"></i>收起')
        }else{
            $(ulEle).css({"height":"74px"});
            $(item).attr("value","0");
            $(item).html('<i class="iconfont icon-xiajiantou color-grey-9 font-12 mr5"></i>展开全部')
        }
    }
    $(function(){

        $(function(){
            $(".white-panel li").click(function(){
                $(".white-panel li").removeClass("active");
                $(this).addClass("active");
                var index=$(this).attr("index");
                $(".panelContent").addClass("none");
                $(".panelContent-"+index).removeClass("none");
            })
        });

        $.get('<%= course_statistics_college_path(@school) %>');

        $(".count_student_test a").click(function(){
            $(".count_student_test a").removeClass("active");
            $(this).addClass("active");
        });

        //初始化饼状图
        InitPieChart();
    });
    function InitPieChart(){
        var Color = ['#49A9EE', '#FFD86E', '#98D87D', '#8996E6', '#F3857B', '#B97BF3','#4DE8B4','#F37BDB','#566EFF','#FF961A'];

        option = {
            title: {
                show:false
            },
            tooltip : {
                trigger: 'item',
                formatter: "{d}%"
            },
            legend: {
                //orient: 'vertical',
                // top: 'middle',
                bottom: 20,
                left: 20,
                right:20,
                data: <%= raw @shixun_tags_name %>
            },
            series : [
                {
                    type: 'pie',
                    radius : '50%',
                    center: ['50%', '35%'],
                    selectedMode: 'single',
                    data:<%= raw @shixun_tags_data.to_json %>,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        normal:{
                            show: true,
                            color: function(params) {
                                return Color[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };

        var myChart = echarts.init(document.getElementById('pieChart'));
        myChart.setOption(option);
    }

</script>