$(function () {
  function classscorePartEcharts (s_index, obj) {
    var legend_data = [];
    legend_data.push(obj.subjectname);
    var xAxis_data = [];
    var dataArr = [];
    var list = $.grep(obj.ranks, function (val) {
      return val.classid == 0;
    });
    $.each(list, function (index, item) {
      xAxis_data.push(item.rankname);
      dataArr.push(item.stunum);
    });
    var series_data = [
      {
        name: obj.subjectname,
        type: "line",
        symbol: "circle",
        stack: obj.subjectname,
        label: {
          normal: {
            show: true,
            align: "center",
            verticalAlign: "bottom",
            position: "top",
            distance: 0,
            formatter: `{c}`
          }
        },
        data: dataArr
      }
    ];
    var option = {
      animation: false,
      title: {
        text: "人",
        x: "left",
        y: "top",
        textStyle: {
          color: "#5F6E82",
          fontSize: $.UnitUtil.mm2px(3),
          fontWeight: 500
        }
      },
      color: ["#5C99FF", "#ff5f56", "#5EC5C8", "#f1982b", "#6e5eff"],
      legend: {
        icon: "roundRect",
        itemWidth: $.UnitUtil.mm2px(2),
        itemHeight: $.UnitUtil.mm2px(2),
        top: "bottom",
        data: legend_data
      },
      grid: {
        top: $.UnitUtil.mm2px(10),
        left: 0,
        right: 0,
        bottom: $.UnitUtil.mm2px(8),
        containLabel: true
      },
      xAxis: {
        type: "category",
        axisLabel: {
          textStyle: {
            color: "#5F6E82"
          },
          interval: 2,
          rotate: 0
        },
        axisTick: {
          show: false
        },
        data: xAxis_data
      },
      yAxis: {
        axisLabel: {
          textStyle: {
            color: "#9B9B9BFF"
          },
          interval: 0
        },
        minInterval: 1,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          //网格线
          lineStyle: {
            type: "dotted", //设置网格线类型 dotted：虚线   solid:实线
            color: "#DADADA"
          },
          show: true //隐藏或显示
        },
        type: "value"
      },
      series: series_data
    };
    var myEcharts = echarts.init(
      document.querySelector(".part_" + s_index + " #classPartEcharts")
    );
    myEcharts.clear();
    myEcharts.setOption(option);
    showgraphicaldata(obj, xAxis_data, s_index);
  }
  function showgraphicaldata (obj, xAxis_data, s_index) {
    //图表数据
    var data = JSON.parse(JSON.stringify(obj));
    var calsslist = [];
    var goodTableHeadTr1Html = '<th rowspan="2">班级</th>';
    var goodTableHeadTr2Html = "";
    var goodTableTbodyHtml = "";
    $.each(xAxis_data, function (idx, item) {
      goodTableHeadTr1Html += '<th colspan="2">' + item + "</th>";
      goodTableHeadTr2Html += "<th>人数</th><th>比例</th>";
    });
    $.each(data.ranks, function (idx, item) {
      if ($.inArray(item.classname, calsslist) == -1) {
        calsslist.push(item.classname);
      }
    })
    $.each(calsslist, function (idx, item) {
      var trHtml = '<td><div class="my_cell">' + item + "</div></td>";
      var classs = $.grep(data.ranks, function (val) {
        return val.classname == item;
      });
      $.each(xAxis_data, function (idx, item) {
        var rank = $.grep(classs, function (val) {
          return val.rankname == item;
        })[0];
        trHtml +=
          '<td><div class="my_cell">' +
          rank.stunum +
          '</div></td><td><div class="my_cell">' +
          rank.sturate +
          "%</div></td>";
      });
      goodTableTbodyHtml += "<tr>" + trHtml + "</tr>";
       
    })
    var table = '  <table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
      goodTableHeadTr1Html + '</tr><tr class="goodTableHeadTr2">' +
      goodTableHeadTr2Html + '</tr></thead><tbody class="goodTableTbody">' +
      goodTableTbodyHtml+'</tbody></table>'
    $(".part_"+ s_index + " .table_"+s_index+" ").html(table);
  }
  var parameter = $(".section_2_html_root .section_2_part_html_root").data(
    "page-params"
  );
  parameter = JSON.parse(parameter);
  console.log(parameter);
  var subjectInfo = [];
  for (var sid in parameter) {
    if (sid === "zf") {
      subjectInfo.unshift({
        subjectid: sid,
        subjectname: "全部年级",
        ranks: parameter[sid].ranks,
        maxscore: parameter[sid].maxscore
      });
    } else {
      subjectInfo.push({
        subjectid: sid,
        subjectname: parameter[sid].subjectname,
        ranks: parameter[sid].ranks,
        maxscore: parameter[sid].maxscore
      });
    }
  }
  var singleRootHtml = "";
  $.each(subjectInfo, function (s_index, s_item) {
    singleRootHtml +=
      '<div class="page_root section_2_part part_' +
      s_index +
      '">' +
      (s_index === 0 ? '<h2 class="section_title_2">3.分数分段对比</h2>' : "") +
      '<h3 class="section_title_3">3.' +
      (s_index + 1) +
      " " +
      s_item.subjectname +
      '分数段统计</h3><h4 class="section_title_4">3.' +
      (s_index + 1) +
      '.1 各分数段分析</h4><div>当前设置分数段：<span class="curscorepart">10</span>分/段</div><div id="classPartEcharts" style="margin: 0 4mm 4mm; height: 80mm"></div><h4 class="section_title_4">3.' +
      (s_index + 1) +
      '.2 各班等级比例分布</h4><div class="table_'+s_index+'"></div></div > ';
    
  });
  $(".section_2_part_root").html(singleRootHtml);
  $.each(subjectInfo, function (s_index, s_item) { 
    $(".part_ " + s_index + " .curscorepart").text(s_item.maxscore);
    classscorePartEcharts(s_index,s_item);
  })
});