{{extend defaultLayout}}

{{block 'css'}}
<link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/common.css?v=1.0"/>
<link rel="stylesheet" type="text/css" href="{{_res_path}}/stat/abyss-pct.css?v=1.0"/>
{{/block}}

{{block 'main'}}
<div class="info_box">
  <div class="head-box type{{bgType}}">
    {{if chooseFloor == -1}}
    <div class="title">深渊出场率统计</div>
    <div class="label">全角色出场率统计（出场记录/总记录）</div>
    {{else}}
    <div class="title">深渊第{{floorName[chooseFloor]}}出场率</div>
    <div class="label">全角色出场率统计（出场记录/总记录）</div>
    {{/if}}
    <img class="genshin_logo" src="{{_sys_res_path}}/genshin/roleAll/原神.png"/>
  </div>
  <div class="cont msg-cont">
    <div class="cont-title">深渊出场率统计</div>
    <div class="cont-body">
      <ul class="cont-msg">
        <li>数据来自SG团队<strong>胡桃API</strong>，为Snap Genshin / Miao-Plugin 用户自主上传的角色池信息</li>
        <li>您可以通过<strong>#上传深渊数据</strong>命令来上传挑战记录，来帮助我们统计的更加及时准确</li>
        <li>上传命令<strong>仅会上传您的角色列表及当期深渊挑战数据</strong>，不会上传其他额外信息</li>
        <li>由于是用户自主上传，数据可能有一定滞后。出场率会在深渊开启后一段时间逐步稳定</li>
        <li>数据最后更新时间：{{lastUpdate}}</li>
      </ul>
    </div>
  </div>
  <% let pct = function (num) {
  return (num * 100).toFixed(2);
  } %>
  {{each abyss ds}}
  {{if chooseFloor == -1 || chooseFloor == ds.floor}}
  <div class="info_box_border">
    <div class="line_box">
      <span class="line"></span>
      <span class="text">第{{floorName[ds.floor]}}</span>
      <span class="line"></span>
    </div>
    <div class="card-list">
      {{each ds.avatars char}}
      <div class="item star{{char.star == 4? 4:5}}">
        <img class="role"
             src="{{_sys_res_path}}/genshin/logo/role/{{char.name}}.png"
        />
        <div class="num_name">{{pct(char.value)}}%</div>
      </div>
      {{/each}}
    </div>
  </div>
  {{/if}}
  {{/each}}
</div>
{{/block}}