{$layout}
{$template "menu"}

<div v-if="!canUsePlans">
    <div class="ui message warning">{{t('尚未在')}} <a href="/finance/fee">[{{t('计费设置')}}]</a> {{t('里开启"使用套餐计费"选项，用户将无法使用套餐。')}}</div>
</div>

<b-empty v-if="plans.length == 0">{{t('暂时还没有套餐。')}}</b-empty>

<table class="ui table selectable celled" v-if="plans.length > 0" id="sortable-table">
    <thead>
        <tr>
            <th style="width:3em"></th>
            <th>{{t('名称')}}</th>
            <th>{{t('集群')}}</th>
            <th>{{t('用户')}}</th>
            <th>{{t('网站数')}}</th>
            <th class="four wide">{{t('价格设置')}}</th>
            <th class="width6">{{t('状态')}}</th>
            <th class="two op">{{t('操作')}}</th>
        </tr>
    </thead>
    <tbody v-for="plan in plans" :v-id="plan.id">
        <tr>
            <td style="text-align: center;"><i class="icon bars handle grey"></i> </td>
            <td>
                <a :href="'/plans/plan?planId=' + plan.id">{{plan.name}}</a>
                <div v-if="plan.description.length > 0"><span class="small grey">{{plan.description}}</span></div>
                <div>
                    <grey-label v-if="plan.priceType == 'period'">{{t('按时间周期')}}</grey-label>
                    <grey-label v-if="plan.priceType == 'traffic'">{{t('按流量')}}</grey-label>
                    <grey-label v-if="plan.priceType == 'bandwidth'">{{t('按带宽')}}</grey-label>
                </div>
            </td>
            <td>
                <span v-if="plan.cluster.id > 0">
                    <link-icon :href="'/clusters/cluster?clusterId=' + plan.cluster.id">{{plan.cluster.name}}</link-icon>
                </span>
                <span v-else class="red">{{t('已删除')}}</span>
            </td>
            <td>
                <span v-if="plan.user.id > 0">
                    <link-icon :href="'/users/user?userId=' + plan.user.id">{{plan.user.name}}</link-icon>
                </span>
                <span v-else> — </span>
            </td>
            <td>
                <span v-if="plan.totalServers > 0">{{plan.totalServers}}</span>
                <span v-else class="disabled">{{t('没有限制')}}</span>
            </td>
            <td>
                <!-- 价格设置 -->
                <plan-price-view :v-plan="plan"></plan-price-view>

                <!-- 流量限制 -->
                <plan-limit-view :value="plan"></plan-limit-view>

                <!-- 带宽限制 -->
                <plan-bandwidth-limit-view :value="plan"></plan-bandwidth-limit-view>
            </td>
            <td><label-on :v-is-on="plan.isOn"></label-on></td>
            <td>
                <a :href="'/plans/plan?planId=' + plan.id">{{t('详情')}}</a> &nbsp;
                <a href="" @click.prevent="deletePlan(plan.id)">{{t('删除')}}</a>
            </td>
        </tr>
    </tbody>
</table>

<p v-if="plans.length > 0" class="comment">{{t('可以拖动左侧的')}}<i class="icon bars"></i>{{t('排序。')}}</p>
<div id="bottom"></div>

<div class="page" v-html="filterPageContent(page)"></div>