{$layout}
{$template "menu"}

<b-empty v-if="clusters.length == 0">{{t('ns_clusters_index@暂时还没有集群')}}</b-empty>

<b-table
    v-if="clusters.length > 0"
    :columns="[
        {
            title: t('ns_clusters_index@集群名称Col'),
            key: 'name',
            scopedSlots: { customRender: 'clusterNameSlot' }
        },
        {
            title: t('ns_clusters_index@节点数Col'),
            key: 'nodesCount',
            scopedSlots: { customRender: 'nodesCountSlot' },
            width: '100px',
            align: 'center'
        },
        {
            title: t('ns_clusters_index@在线节点数Col'),
            key: 'activeNodesCount',
            scopedSlots: { customRender: 'activeNodesCountSlot' },
            width: '100px',
            align: 'center'
        },
        {
            title: t('ns_clusters_index@域名数Col'),
            key: 'domainsCount',
            scopedSlots: { customRender: 'domainsCountSlot' },
            width: '100px',
            align: 'center'
        },
        {
            title: t('ns_clusters_index@状态Col'),
            key: 'isOn',
            scopedSlots: { customRender: 'statusSlot' },
            width: '100px', // 原 width5 估算
            align: 'center'
        },
        {
            title: t('ns_clusters_index@操作Col'),
            key: 'action',
            scopedSlots: { customRender: 'actionSlot' },
            width: '180px', // 原 two op 估算
            align: 'center'
        }
    ]"
    :data-source="clusters"
    :row-key="'id'"
    size="middle"
    :show-header="true"
>
    <!-- Cluster Name Slot -->
    <template slot="clusterNameSlot" slot-scope="{ text, record }">
         <a :href="'/ns/clusters/cluster?clusterId=' + record.id">{{record.name}}</a>
         <a :href="'/ns/clusters/cluster/settings?clusterId=' + record.id" :title="t('ns_clusters_index@设置Title')" style="margin-left: 5px;">
             <i class="icon setting grey"></i>
         </a>
    </template>

    <!-- Nodes Count Slot -->
    <template slot="nodesCountSlot" slot-scope="{ text, record }">
        <a :href="'/ns/clusters/cluster?clusterId=' + record.id" v-if="record.countAllNodes > 0">
            <span :class="{red:record.countAllNodes > record.countActiveNodes}">{{record.countAllNodes}}</span>
        </a>
        <span class="disabled" v-else="">-</span>
        <div v-if="record.countUpgradeNodes > 0" style="margin-top:0.5em">
            <a :href="'/ns/clusters/cluster?clusterId=' + record.id" :title="t('ns_clusters_index@点击进入远程升级页面Title')">
                <span class="red">{{t('ns_clusters_index@有节点需要升级')}}</span>
            </a>
        </div>
    </template>

    <!-- Active Nodes Count Slot -->
    <template slot="activeNodesCountSlot" slot-scope="{ text, record }">
         <a :href="'/ns/clusters/cluster?clusterId=' + record.id + '&activeState=1'" v-if="record.countActiveNodes > 0">
             <span class="green">{{record.countActiveNodes}}</span>
         </a>
         <span class="disabled" v-else>-</span>
    </template>

    <!-- Domains Count Slot -->
    <template slot="domainsCountSlot" slot-scope="{ text, record }">
        <span v-if="record.countDomains > 0">{{record.countDomains}}</span>
        <span v-else class="disabled">-</span>
    </template>

    <!-- Status Slot -->
    <template slot="statusSlot" slot-scope="{ text, record }">
        <label-on :v-is-on="record.isOn"></label-on>
    </template>

    <!-- Action Slot -->
    <template slot="actionSlot" slot-scope="{ text, record }">
        <a :href="'/ns/clusters/cluster?clusterId=' + record.id">{{t('ns_clusters_index@详情Link')}}</a>
    </template>

</b-table>

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