<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
      .CodeMirror{line-height: 1.2; font-size: 14px;height: auto;}
      .cm-s-railscasts span.cm-error{background:none;color: #d4cfc9;}
    </style>
  </head>
  <body>
    <div class="edu-position" style="width: 1000px">
      <p class="mb10">
        <a class="color-grey-9"><%= @course.name %></a> &gt;
        <a class="color-grey-9"><%= @homework.course_second_category&.name || '实训作业'%></a> &gt;
        <% homework_ids = @homework.course.homework_commons.where(homework_type: 4, course_homework_category_id: @homework.course_homework_category_id)
            .order(Arel.sql('IF(ISNULL(publish_time),0,1),publish_time DESC, created_at DESC')).pluck(:id) %>
        <a>#<%= homework_ids.index(@homework.id) + 1  %></a>&gt;
        <%= @user.real_name %>
      </p>
      <div class="edu-con-top user_bg_shadow bor-grey-e clearfix">
        <p class="ml15 fl color-grey3">
          <i class="fa fa-lock mr5 color-grey-c"></i>
          <%= @shixun.name %>
        </p>
      </div>
      <div class="bor-grey-e mt20">
        <p class="pt10 pb10 pl15 pr15 clearfix bor-bottom-greyE">
          <span class="fl font-bd">总体评价</span>
          <!--  <span class="fr edu-filter-cir-grey active mt2">优秀</span>-->
        </p>
        <table class="edu-pop-table head-color edu-txt-center" cellpadding="0" cellspacing="0">
          <thead>
          <th width="24%">总评</th>
          <th width="16%">总经验值</th>
          <th width="24%">作业成绩</th>
          <th>耗时</th>
          <th width="16%">评测次数</th>
          </thead>
          <tbody>
          <tr>
            <td><span class="color-orange font-bd"><%= @work.overall_appraisal %></span></td>
            <td><span class="color-orange font-bd"><%= @work.myshixun&.total_score %></span> / <%= @shixun.all_score %></td>
            <td><span class="color-orange font-bd"><%= ApplicationController.helpers.number_with_precision(@work.work_score, precision: 1) %></span> / 100</td>
            <td><span class="color-orange font-bd"><%= @work.myshixun_consume %></span></td>
            <td><span class="color-grey3"><%= @user_evaluate_count.to_i %></span></td>
          </tr>
          </tbody>
        </table>
      </div>

      <% if @work.description.present? %>
        <div class="bor-grey-e mt20">
          <p class="pt10 pb10 pl15 pr15 clearfix bor-bottom-greyE">
            <span class="fl font-bd">个人总结</span>
          </p>
          <div class="break_word upload_img table_maxWidth pl30 pr30 a_default_show edu-back-white">
            <%= @work.description.html_safe %>
          </div>
        </div>
      <% end %>

      <div class="bor-grey-e mt20">
        <p class="pt10 pb10 pl15 pr15 clearfix bor-bottom-greyE">
          <span class="fl font-bd">阶段成绩</span>
        </p>
        <table class="edu-pop-table head-color edu-txt-center" cellpadding="0" cellspacing="0">
          <thead>
          <th width="6%">关卡</th>
          <th width="27%" style="text-align: left;">任务名称</th>
          <th width="13%">开启时间</th>
          <th>评测次数</th>
          <th width="13%">完成时间</th>
          <th width="15%">耗时</th>
          <th>经验值</th>
          </thead>
          <tbody>
          <% @games.each_with_index do |game, index| %>
            <tr>
              <td><%= index + 1 %></td>
              <td style="text-align: left;">
                <span class="task-hide edu-info-dark fl"><%= game.challenge.subject %></span>
                <% if ((Time.now > @homework.end_time) && game.end_time.blank?) || (game.end_time.present? && game.end_time > @homework.end_time) %>
                  <span class="delay ml10">延时</span>
                <% end %>
              </td>
              <td><%= myshixun_open_time(game) %></td>
              <td><%= game.evaluate_count %></td>
              <td><%= finished_time game.end_time %></td>
              <td><%= ApplicationController.helpers.time_consuming game %></td>
              <td><%= game.final_score %> / <%= game.challenge.all_score %></td>
            </tr>
          <% end %>
          </tbody>
        </table>
      </div>

      <div class="bor-grey-e mt20">
        <p class="pt10 pb10 pl15 pr15 clearfix bor-bottom-greyE">
          <span class="fl font-bd">图形统计</span>
        </p>
        <div class="clearfix padding15 edu-back-white">

          <div class="fl with65">
            <!--echarts_dev:开发板包含了常见的警告和错误提示，上线版：echarts.min.js -->
            <div class="fl" style="width: 750px;height: 580px" id="shixun_skill_chart">
            </div>
            <div class="fl" style="width: 750px;height: 580px" id="shixun_overall_ablility_chart">
            </div>
          </div>

          <div class="fr with25">
            <div class="bor-grey-e bor-radius4 clearfix mt100">
              <div class="fl with25 back-f6-grey" style="text-align: right;padding-right: 5%;">
                <li class="mt5 mb5">姓名</li>
                <li class="mt5 mb5">学号</li>
                <li class="mt5 mb5">工作效率</li>
              </div>
              <div class="fr with65" style="padding-left: 5%;">
                <li class="color-orange03 mt5 mb5"><%=  @user.real_name %></li>
                <li class="color-orange03 mt5 mb5"><%= @user.student_id %></li>
                <li class="mt5 mb5"><span class="color-orange03"><%= @myself_eff[1] %></li>
              </div>
            </div>
            <div class="pr mt20 with100">
              <div class="popup_tip_box fontGrey2 with100 disc" style="position: relative;box-sizing: border-box;right: 0px;">
                <em></em>
                <span></span>
                <ol>
                  <li>1个小圆点代表1个学生</li>
                  <li>红色水滴表示当前学生的计算结果值</li>
                  <li>中位值是整个课堂学生表现的平均值</li>
                  <li>小圆点越高，工作效率越大</li>
                  <li>横坐标：学生序号</li>
                  <li>纵坐标：工作效率</li>
                  <li>红色横向箭头：中位值</li>
                </ol>
              </div>
              <div style="height: 350px"></div>
              <div class="bor-grey-e bor-radius4 clearfix">
                <div class="fl with25 back-f6-grey" style="text-align: right;padding-right: 5%;">
                  <li class="mt5 mb5">姓名</li>
                  <li class="mt5 mb5">学号</li>
                  <li class="mt5 mb5">能力</li>
                </div>
                <div class="fr with65" style="padding-left: 5%;">
                  <li class="color-orange03 mt5 mb5"><%= @user.real_name %></li>
                  <li class="color-orange03 mt5 mb5"><%= @user.student_id %></li>
                  <li class="mt5 mb5"><span class="color-orange03"><%= @myself_consume[1] %></li>
                </div>
              </div>
              <div class="popup_tip_box fontGrey2 with100 disc mt20" style="position: relative;box-sizing: border-box;right: 0px;">
                <em></em>
                <span></span>
                <ol>
                  <li>1个小圆点代表1个学生</li>
                  <li>红色水滴表示当前学生的计算结果值</li>
                  <li>小圆圈越大,评测次数越少</li>
                  <li>横坐标：对完成实训的总时间取log</li>
                  <li>纵坐标：实训总分数/评测次数</li>
                </ol>
              </div>
            </div>

          </div>
        </div>
      </div>

      <div class="bor-grey-e mt20">
        <p class="pt10 pb10 pl15 pr15 clearfix">
          <span class="fl font-bd">实训详情</span>
        </p>
        <%#= ApplicationController.helpers.javascript_include_tag "/codemirror/lib/codemirror", "/codemirror/mode/javascript/javascript", "/codemirror/addon/hint/show-hint", "/codemirror/addon/hint/javascript-hint", "/codemirror/addon/selection/active-line", "/codemirror/addon/lint/javascript-lint", "/codemirror/addon/lint/css-lint", "/codemirror/addon/lint/lint", "/codemirror/addon/lint/json-lint", "/editormd/lib/codemirror/addon/lint/css-lint" %>
        <% @games.each_with_index do |game, index| %>
          <div class="shixun_detail_con padding15 bor-top-greyE">
            <p class="clearfix">
          <span class="panel-inner-icon mr15 fl mt5">
            <% if game.challenge.st == 1 %>
              <i class="fa fa-th-list font-16 color_white" data-tip-down="选择题任务"></i>
            <% else %>
              <i class="fa fa-code font-16 color_white"  data-tip-down="编程题任务"></i>
            <% end %>
          </span>
              <span class="fl mt3"><span class="font-bd mr15">第<%= index+1 %>关</span><%= game.challenge.subject %></span>
            </p>
            <div style="margin-left: 32px;" class="mt15">
              <% if game.outputs.present? %>
                <table class="edu-pop-table edu-txt-center table-line thback"  cellpadding="0" cellspacing="0">
                  <thead>
                  <th width="10%">评测次数</th>
                  <th>评测信息</th>
                  </thead>
                  <tbody>
                  <% outputs = game.outputs.group("query_index") %>
                  <% max_query = outputs.map(&:query_index).max %>
                  <% outputs.reverse.try(:each) do |output| %>
                    <tr>
                      <td><%= max_query == output.query_index ? "最后一次" : "第#{output.query_index}次" %></td>
                      <td align="left" style="padding-left: 5px"><%= output_detail(game, output) %></td>
                    </tr>
                  <% end %>
                  </tbody>
                </table>
              <% end %>
              <% if game.try(:lastest_code).present? && game.challenge.st == 0 %>
                <div class="bor-grey-e mt15">
                  <p class="clearfix pt5 pb5 pl15 pr15 back-f6-grey">
                    <span class="fl">最近通过的代码</span>
                  </p>
                  <div class="test-code bor-top-greyE">
                    <li class="clearfix" xmlns="http://www.w3.org/1999/html">
                      <textarea class="" id="content_show_<%= game.id %>" name="content" style="display: none"><%= game&.lastest_code %></textarea>
                    </li>
                  </div>
                </div>
              <% end %>
            </div>
          </div>
        <% end %>
      </div>

    </div>
  </body>

  <%= ApplicationController.helpers.pdf_load_sources(*%w(editormd/lib/codemirror/lib/codemirror.js editormd/lib/codemirror/mode/javascript/javascript.js
        editormd/lib/codemirror/addon/hint/show-hint.js editormd/lib/codemirror/addon/hint/javascript-hint.js
        editormd/lib/codemirror/addon/selection/active-line.js editormd/lib/codemirror/addon/lint/javascript-lint.js
        editormd/lib/codemirror/addon/lint/css-lint.js editormd/lib/codemirror/addon/lint/lint.js
        editormd/lib/codemirror/addon/lint/json-lint.js editormd/lib/codemirror/addon/lint/css-lint.js
        echart/echarts.min.js))%>
  <script>
    window.onload = function() {
      console.debug("window.onload");

      <% @games.map(&:id).each do |game_id| %>
        var ele = document.getElementById("content_show_<%= game_id %>");
        if (ele) {
          var ide = CodeMirror.fromTextArea(ele, {
            lineNumbers: true,
            theme: "default",
            // extraKeys: {"Ctrl-Q": "autocomplete"}, // 快捷键
            indentUnit: 4, //代码缩进为一个tab的距离
            matchBrackets: true,
            autoRefresh: true,
            smartIndent: true,//智能换行
            styleActiveLine: true,
            lint: true,
            readOnly: "nocursor"
          });

          ide.setSize("auto", ide.lineCount() * 18);
        }
      <% end %>


      // 基于准备好的dom，初始化echarts实例
      var effChart = echarts.init(document.getElementById('shixun_skill_chart'));
      // 指定图表的配置项和数据
      var option = {
        grid: {
          left: '3%',
          right: '9%',
          bottom: '3%',
          containLabel: true
        },
        tooltip : {},
        xAxis : [
          {
            type : 'value',
            name: '学生序号',
            scale:true,
            axisLabel : {
              formatter: ' '
            },
            axisTick:{
              show:false
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis : [
          {
            type : 'value',
            name : '工作效率',
            scale:true,
            axisLabel : {
              formatter: '{value} '
            },
            splitLine: {
              show: false
            }
          }
        ],
        series : [
          {
            name:'',
            type:'scatter',
            data: <%= @echart_data[:efficiency_list] %>,
            itemStyle:{
              normal:{color:'#2e65ad'}
            },
            markArea: {
              silent: true,
              itemStyle: {
                normal: {
                  color: 'transparent',
                  borderWidth: 1,
                  borderType: 'dashed'
                }
              }
            },
            markPoint : {
              data : [
                {
                  name: 'daiao',
                  xAxis:<%= @myself_eff[0] %>,
                  yAxis:<%= @myself_eff[1] %>
                }
              ],
              itemStyle: {
                normal:{
                  color:'#c23531'
                }
              }
            },
            markLine : {
              lineStyle: {
                normal: {
                  type: 'solid',
                  color:'#c23531'
                }
              },
              data : [
                {type : 'average', name: '中位值'}
              ]
            }
          },
          {
            name:'二班',
            type:'scatter',
            data: [<%= @myself_eff %>],
            itemStyle:{
              color:'#c23531'
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表
      effChart.setOption(option);
      console.debug(<%= @myself_consume %>);
      var ablChart = echarts.init(document.getElementById('shixun_overall_ablility_chart'));
      var dataBJ = <%= @echart_data[:consume_list] %>;
      var schema = [
        {name: 'date', index: 0, text: '日'},
        {name: 'AQIindex', index: 1, text: 'AQI指数'},
        {name: 'PM25', index: 2, text: 'PM2.5'}
      ];

      var itemStyle = {
        normal: {
          opacity: 0.8,
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowColor: 'rgba(0, 0, 0, 0)',
          color:'#2e65ad'
        }
      };
      var itemStyle1 = {
        normal: {
          opacity: 0.8,
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowColor: 'rgba(0, 0, 0, 0)',
          color:'#c23531'
        }
      };

      var option1 = {
        backgroundColor: '#fff',
        color: [
          '#dd4444', '#fec42c', '#80F1BE'
        ],
        grid: {
          x: '10%',
          x2: 150,
          y: '18%',
          y2: '10%'
        },
        tooltip: {},
        xAxis: {
          type: 'value',
          name: 'log(实训的总时间)',
          nameGap: 16,
          nameTextStyle: {
            color: '#000',
            fontSize: 14
          },
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#000'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '总分数/评测次数',
          nameLocation: 'end',
          nameGap: 20,
          nameTextStyle: {
            color: '#000',
            fontSize: 16
          },
          axisLine: {
            lineStyle: {
              color: '#000'
            }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '能力',
            type: 'scatter',
            itemStyle: itemStyle,
            data: dataBJ,
            symbolSize: function (value){
              return Math.round(value[2]);
            },
            markPoint : {
              data : [
                {
                  name: 'daiao',
                  xAxis:<%= @myself_consume[0] %>,
                  yAxis:<%= @myself_consume[1] %>
                }
              ],
              itemStyle: {
                normal:{
                  color:'#c23531'
                }
              }
            }
          },
          {
            name: '能力1',
            type: 'scatter',
            data:[<%= @myself_consume %>],
            itemStyle:itemStyle1,
            symbolSize: function (val){
              return Math.round(val[2]);
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      ablChart.setOption(option1);
    }
  </script>
</html>
