{$layout} 
{$template "menu"}

<!-- <p class="comment" v-if="userPlans.length == 0">暂时还没有已购套餐。</p> -->
<b-empty v-if="userPlans.length == 0">暂时还没有已购套餐。</b-empty>

<div class="margin"></div>
<b-table
    v-if="userPlans.length > 0"
    :columns="columns"
    :data-source="userPlans"
    :row-key="'id'"
    :bordered="false"
    size="middle"
    :scroll="{ x: 1200 }"
>
    <template slot="planSlot" slot-scope="{ text, record }">
        <span v-if="record.plan.id > 0">{{record.plan.name}}</span>
        <span class="red" v-else>[已删除]</span>
    </template>

    <template slot="nameSlot" slot-scope="{ text, record }">
        <span v-if="record.name.length > 0">{{record.name}}</span>
        <span v-else class="disabled">-</span>
    </template>

    <template slot="priceSlot" slot-scope="{ text, record }">
        <div v-if="record.plan != null">
            <!-- 价格设置 -->
            <plan-price-view :v-plan="record.plan"></plan-price-view>

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

            <!-- 带宽限制 -->
            <plan-bandwidth-limit-view
                :value="record.plan"
            ></plan-bandwidth-limit-view>
        </div>
    </template>

    <template slot="dayToSlot" slot-scope="{ text }">
        {{text}}
    </template>

    <template slot="serversSlot" slot-scope="{ text, record }">
        <div v-if="record.servers != null && record.servers.length > 0">
            <div v-for="server in record.servers">
                <a
                    :href="'/servers/server/settings/plan?serverId=' + server.id"
                    v-if="server.type == 'httpProxy' || server.type == 'httpWeb'"
                    >{{server.name}}</a
                >
                <a
                    :href="'/lb/server/settings/plan?serverId=' + server.id"
                    v-if="server.type == 'tcpProxy' || server.type == 'udpProxy'"
                    >{{server.name}}</a
                >
            </div>
        </div>
        <span v-else class="disabled">尚未绑定</span>
    </template>

    <template slot="actionSlot" slot-scope="{ text, record }">
        <a-button type="link" @click="renewUserPlan(record.id)">
            <i class="pi pi-refresh" style="font-size: 12px; padding: 4px;"></i> 续费
        </a-button>
        <a-button type="link" @click="deleteUserPlan(record.id)">
            <i class="pi pi-trash" style="font-size: 12px; padding: 4px;"></i> 删除
        </a-button>
    </template>
</b-table>

<div class="page" v-html="page"></div>
