{$layout}
{$template "menu"}

<second-menu>
  <menu-item href="/servers/packages" :class="{active: type == ''}"
    >可用流量包</menu-item
  >
  <menu-item href="/servers/packages?type=all" :class="{active: type == 'all'}"
    >所有流量包</menu-item
  >
</second-menu>

<!-- <p class="comment" v-if="userPackages.length == 0">
  <span v-if="type == ''">暂时还没有可用的流量包。</span>
  <span v-if="type == 'all'">暂时还没有流量包。</span>
</p> -->
<b-empty v-if="userPackages.length == 0">
  <span v-if="type == ''">暂时还没有可用的流量包。</span>
  <span v-if="type == 'all'">暂时还没有流量包。</span>
</b-empty>

<div v-if="userPackages.length > 0">
  <div class="margin"></div>
  <table class="ui table selectable celled">
    <thead>
      <tr>
        <th>流量包</th>
        <th style="width: 7em">区域</th>
        <th style="width: 7em">有效期</th>
        <th style="width: 7em">开始日期</th>
        <th style="width: 7em">结束日期</th>
        <th style="width: 7em">已用流量</th>
        <th style="width: 7em">剩余流量</th>
        <th style="width: 12em">购买时间</th>
      </tr>
    </thead>
    <tr v-for="up in userPackages">
      <td>
        <span v-if="up.package != null"
          >{{up.package.size}}{{up.package.unit.toUpperCase().replace(/(.)B/,
          "$1iB")}}</span
        >
        <span v-else class="disabled">[已删除]</span>

        <div v-if="up.isUsedAll || up.isExpired">
          <span v-if="up.isUsedAll" class="small red">已用尽</span>
          <span v-else-if="up.isExpired" class="small red">已过期</span>
        </div>
      </td>
      <td>
        <span v-if="up.region != null">{{up.region.name}}</span>
        <span v-else="" class="disabled">[已删除]</span>
      </td>
      <td>{{up.periodCount}}{{up.periodUnitName}}</td>
      <td>{{up.dayFrom}}</td>
      <td>{{up.dayTo}}</td>
      <td>
        <span :class="{disabled: up.usedSize == '0B'}">{{up.usedSize}}</span>
      </td>
      <td>
        <span :class="{disabled: up.availableSize == '0B'}"
          >{{up.availableSize}}</span
        >
      </td>
      <td>{{up.createdTime}}</td>
    </tr>
  </table>

  <page-box></page-box>
</div>
