{{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/character.css?v=1.0"/>
{{/block}}

<% let pct = function (num) {
return (num * 100).toFixed(2);
} %>

{{block 'main'}}


<div class="info_box">
  <div class="head-box type{{bgType}}">
    {{if mode === "char"}}
    <div class="title">角色持有率统计</div>
    <div class="label">全角色综合持有率统计</div>
    {{else}}
    <div class="title">角色{{conNum == -1 ? "命座" : "零一二三四五满"[conNum]+"命"}}分布统计</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>数据来自<strong>胡桃API</strong>，为SnapGenshin用户自主上传的角色池信息，感谢SG团队</li>
        <li>百分比基于全部上传用户的数据进行统计，能够一定程度上反映角色持有情况，结果供参考</li>
        <li>由于是用户自主上传，数据可能有一定滞后。新角色的持有率会在卡池结束后的一段时间逐步稳定</li>
        <li>数据最后更新时间：{{lastUpdate}}</li>
      </ul>
    </div>
  </div>

  <div class="data-box">
    <div class="char-list">
      <div class="avatar th">
        <div class="index">#</div>
        <div class="name">
          角色
        </div>
        <div class="lvl">持有率</div>
        <div class="char-cons">
          <div class="cons-pct">
            <div class="cons-n0">0命</div>
            <div class="cons-1">1命</div>
            <div class="cons-2">2命</div>
            <div class="cons-3">3命</div>
            <div class="cons-4">4命</div>
            <div class="cons-5">5命</div>
            <div class="cons-6">6命</div>
            {{if mode === "char"}}
            <div class="life_bg">无</div>
            {{/if}}
          </div>

        </div>
      </div>
      {{each chars char idx}}
      <div class="avatar">
        <div class="index star{{char.star}}">{{idx+1}}</div>
        <div class="name_cont star{{char.star}}">
          <div class="name">
            <div class="avatar_img">
              <img src="{{_sys_res_path}}genshin/logo/side/{{char.name}}.png" onerror="whenError(this)"/>
            </div>
            <div class="avatar_name">
              {{abbr[char.name] || char.name}}
            </div>
          </div>
        </div>
        <div class="pct">{{pct(char.hold)}}</div>
        <div class="char-cons">
          <div class="cons-pct">
            {{each char.cons con idx}}
            <div>{{pct(con.value)}}</div>
            {{/each}}
            {{if mode ==="char"}}
            <div>{{pct(1-char.hold)}}</div>
            {{/if}}
          </div>
          <div class="cons-bg">
            {{each char.cons con idx}}
            <div class="cons-{{con.id ===0?'n0':con.id}}" style='{{"width:"+pct(con.value)+"%"}}'></div>
            {{/each}}
          </div>
        </div>
      </div>
      {{/each}}
    </div>
  </div>
</div>
{{/block}}