<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>英雄高手榜详情</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <link rel="stylesheet" href="css/global.css" />
  <style>
    body { height: 527px; overflow: hidden; }
  </style>
  <!--[if IE 7]>
    <style>
      .heroRankCrumbs .fnMenu{margin-top:-27px;}
      .list-table{margin-top:36px;}
    </style>
  <![endif]-->
  <!--[if gt IE 6]><!-->
    <script type="text/javascript">
    !function(t){t.loadScript(["http://szhuodong.duowan.com/feq/lolbox/yy-f2e-header-lolbox.min"])}(function(){function t(t){var e=n(t);document.write(e)}function n(t){for(var n,r="",c=0;n=t[c];c++)r+=e(n);return r}function e(t){var n=[unescape("%3Cscript%20type%3D%22text/javascript%22%20src%3D%22"),"",unescape("%22%3E%3C/script%3E")],e=new Date;return e.setSeconds(0),e.setMilliseconds(0),e=e.getTime(),t+="?t_="+e,n[1]=t,n.join("")}return{loadScript:function(n){n&&n.length&&n instanceof Array&&t(n)}}}())
    </script>
<!--<![endif]-->
  <script src="js/jquery-1.11.1.min.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script>
  <script src="js/jquery.nicescroll.min.js"></script>
  <script src="js/heroesList.js" type="text/javascript"></script>
</head>
<body scroll="no" style="overflow:hidden;">
  <div class="heroRankCrumbs">
    <a href="playerSearch.html">战绩查询</a> &gt; <a href="heroesRank.html">英雄玩家榜详情</a> &gt; <span id="currentHero"></span>
    <div class="fnMenu">
      <a class="icons back" href="javascript:history.back();"><i></i></a>
      <a class="icons refresh" href="javascript:location.reload();"><i></i></a>
    </div>
  </div>
  <div class="box heroRanksWrap">
    <div class="box-bd heroRanks-tc">
      <div class="mod-tabs clearfix">
        <div class="mod-tabs-bd hero-rank">
          <div class="mod-tabs-content">
            <div class="choose-type">
              <ul class="mod-tabs-trigger">
                <li><a class="stat-sign" stat-sign="master" href="rankScoreRank.html">排位榜</a></li>
                <li><a class="stat-sign" stat-sign="action list" href="zdlRank.html">战斗力榜</a></li>
                <li class="selected stat-sign"><a stat-sign="hero ace" href="heroesRank.html">英雄玩家榜</a></li>
              </ul>
            </div>
            <div id="dataLists" class="hero-detail-list">
              <ul class="thead-simulate">
                <li class="col-60">排名</li>
                <li class="col-100">玩家名称</li>
                <li style="width:110px;">服务器</li>
                <li class="col-110">使用此英雄胜率</li>
                <li class="col-100">最近使用场次</li>
                <li style="width:73px;padding-right:13px;">段位/胜点</li>
                <li style="width:66px;">相关比赛</li>
              </ul>
              <div class="list-table" id="scrollContent">
                <table cellspacing="0" cellpadding="0" border="0" width="100%">
                  <tbody id="heroDetail" class="hero-detail">
                  </tbody>
                </table>
              </div>
            </div>
            <div class="detail" style="margin-top:-12px;"></span>
            </div>
            <div id="pages" class="page-nav"></div>
          </div>
          <div class="mod-tabs-content hide">
          
          </div>
        </div>
      </div>
    </div>
  </div>
  <script id="heroDetailTemplate" type="text/template">
    <%_.each(data, function(item, k) {
      var player = item.player;
      var gameZone = player.game_zone;
      var tierRank = player.tier_rank;
      var href = "historyRecord.html?userId="+player.user_id+"&gameZone="+gameZone.pinyin + "&playerName=" + player.pn + "&serverName=" + gameZone.server_name;
      var tierNameCn = tierRank['tier']['name_cn'];
      var rankName = tierRank['rank'] ? tierRank['rank']['name'] : 0;
    %>
        <tr>
          <td width="50">
            <% if(item.idx == 1){%>
            <i class="rank-type rank-1"></i>
            <%} else if(item.idx == 2){%>
            <i class="rank-type rank-2"></i>
            <%} else if(item.idx == 3) {%>
            <i class="rank-type rank-3"></i>
            <%} else {%>
            <%=item.idx%>
            <%}%>
          </td>
          <td width="110"><%=player.pn%></td>
          <td width="110"><%=gameZone.alias%>&nbsp;<%=gameZone.server_name%></td>
          <td width="90"><%=item.win_rate%>%</td>
          <td width="90"><%=item.used_times%></td>
          <td width="90"><%=tierNameCn%> <%=rankName%>/<%=player.league_points%></td>
          <td width="90"><a href="<%=href%>" style="color:#408bcb;">查看比赛</a></td>
        </tr>
    <%});%>
  </script>
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/jquery-migrate-1.2.1.min.js"></script>
  <script src="js/underscore.js"></script>
  <script src="js/jquery.nicescroll.min.js"></script>
  <script>
    $(function() {
      var HeroDetail = function() {
        this.baseUrl = "http://api.lolbox.duowan.com/api/v2/rank/win_rate/";
        this.$currentHero = $("#currentHero");
        this.heroEnname = getURLParam("hero");
        this.$heroDetail = $("#heroDetail");
        this.$heroDetailTemplate = $("#heroDetailTemplate");
      };

      HeroDetail.prototype = {
        constructor: HeroDetail,
        init: function() {
          var self = this;
          var hero = heroesList[this.heroEnname];
          this.$currentHero.html(hero.title + "(" + hero.displayName + ")");
          this._getData().done(function(data) {
            var list = data.results;
            if(list && list.length > 0) {
              self._render(list);

              $(".detail").html(data.rank_desc);
            }
          }).fail(function() {});
        },
        _getData: function() {
          var url = this.baseUrl + this.heroEnname + '/';

          return $.ajax({
            url: url,
            type: 'GET',
            dataType: 'jsonp'
          });
        },
        _render: function(data) {
          var template = _.template(this.$heroDetailTemplate.html());
          this.$heroDetail.html(template({
            data: data
          }));
        }
      };

      function getURLParam(name) { 
          var value = location.search.match(new RegExp("[?&]" + name + "=([^&]*)(&?)","i")); 
          return value ? decodeURIComponent(value[1]) : value; 
      }

      new HeroDetail().init();
    });
    $("#scrollContent").niceScroll({cursorcolor:"#D9D9D9",cursorwidth:"8",cursoropacitymin:1,cursorborder:'none'});
  </script>
  <!--海度统计-->
  <script type="text/javascript">_hiido_no=0;_hiido_wid=["lbox"];</script>
  <script src="http://www.duowan.com/duowan.js" type="text/javascript"></script>
  <!--百度统计-->
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?72772dda37b1e926733138415981abcf";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>
  <!--[if gt IE 6]><!-->
    <script type="text/javascript">
        window.onerror = function(a,b,c){ return true};!function(t){t.loadScript(["http://szhuodong.duowan.com/feq/lolbox/yy-f2e-lolbox.min"])}(function(){function t(e,a){var n=a[e];if(n){e++;var o=document.createElement("script");o.type="text/javascript",o.setAttribute("async","async"),o.onload=o.onreadystatechange=function(){return o.readyState&&"complete"!==o.readyState&&"loaded"!==o.readyState?!1:(o.onload=o.onreadystatechange=null,void t(e,a))};var c=new Date;c.setSeconds(0),c.setMilliseconds(0),c=c.getTime(),o.async=!0,o.src=n+"?_="+c,document.getElementsByTagName("head")[0].appendChild(o)}}return{loadScript:function(e){e&&e.length&&e instanceof Array&&t(0,e)}}}());
    </script>
<!--<![endif]-->
</body>
</html>