{$layout} {$template "menu"}

<div class="ui message error" v-if="!serversIsEnabled">
  当前账号下的网站不可用，请检查账号状态以及是否有逾期未支付的账单。
</div>

<div class="ui message warning" v-if="serversIsEnabled && countUnpaidBills > 0">
  <a href="/finance/bills?paidFlag=0"
    >有逾期未支付的账单，可能会影响你的CDN服务正常运行，请尽快完成支付。</a
  >
</div>

<!-- <p class="comment" v-if="servers.length == 0">暂时还没有任何负载均衡服务。</p> -->
<b-empty v-if="servers.length == 0">暂时还没有任何负载均衡服务。</b-empty>

<b-table
    v-if="servers.length > 0"
    :columns="columns"
    :data-source="servers"
    :row-key="'id'"
    :bordered="false"
    size="middle"
    :scroll="{ x: 1000 }"
>
    <template slot="nameSlot" slot-scope="{ text, record }">
        <div>
            <a :href="'/lb/server?serverId=' + record.id">{{record.name}}</a>

            <div v-if="record.userPlan != null && record.userPlan.id > 0">
                <span
                    style="margin-top: 1em"
                    class="small"
                    :class="{grey: !record.userPlan.isExpired, red: record.userPlan.isExpired}"
                    >套餐：{{record.userPlan.name}} / {{record.userPlan.dayTo}}
                    <span v-if="record.userPlan.isExpired">已过期</span></span
                >
            </div>
            <div v-if="record.trafficLimitStatus != null">
                <server-traffic-limit-status-viewer
                    v-model="record.trafficLimitStatus"
                ></server-traffic-limit-status-viewer>
            </div>
        </div>
    </template>

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

    <template slot="tcpPortsSlot" slot-scope="{ text, record }">
        <div v-if="record.tcpPorts.length > 0">
            <span v-for="port in record.tcpPorts" class="ui label basic small">{{port}}</span>
        </div>
        <span v-else class="disabled">-</span>
    </template>

    <template slot="tlsPortsSlot" slot-scope="{ text, record }">
        <div v-if="record.tlsPorts.length > 0">
            <span v-for="port in record.tlsPorts" class="ui label basic small">{{port}}</span>
        </div>
        <span v-else class="disabled">-</span>
    </template>

    <template slot="udpPortsSlot" slot-scope="{ text, record }">
        <div v-if="record.udpPorts.length > 0">
            <span v-for="port in record.udpPorts" class="ui label basic small">{{port}}</span>
        </div>
        <span v-else class="disabled">-</span>
    </template>

    <template slot="statusSlot" slot-scope="{ text, record }">
        <span v-if="!record.isOn" class="grey">停用中</span>
        <span v-else class="green">正常</span>
    </template>

    <template slot="actionSlot" slot-scope="{ text, record }">
        <a-button type="link" @click="goToServer(record.id)">
            <i class="pi pi-cog" style="font-size: 12px; padding: 4px;"></i> 管理
        </a-button>
        <a-dropdown>
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                更多 <i class="pi pi-chevron-down"></i>
            </a>
            <a-menu slot="overlay">
                <a-menu-item v-if="record.isOn">
                    <a @click="updateServerOff(record.id)">
                        <i class="pi pi-pause" style="font-size: 12px; padding: 4px;"></i> 停用
                    </a>
                </a-menu-item>
                <a-menu-item v-if="!record.isOn">
                    <a @click="updateServerOn(record.id)">
                        <span class="red">
                            <i class="pi pi-play" style="font-size: 12px; padding: 4px;"></i> 启用
                        </span>
                    </a>
                </a-menu-item>
                <a-menu-item>
                    <a @click="deleteServer(record.id)">
                        <i class="pi pi-trash" style="font-size: 12px; padding: 4px;"></i> 删除
                    </a>
                </a-menu-item>
            </a-menu>
        </a-dropdown>
    </template>
</b-table>

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