{$layout}
{$template "menu"}

{$var "header"}
<link rel="stylesheet" href="./index.css">
{$end}

<div class="margin"></div>
<form method="get" action="/clusters" class="ui form">
    <input type="hidden" name="searchType" :value="searchType"/>
    <div class="ui fields inline">
        <div class="ui field">
            <input type="text" name="keyword" v-model="keyword" :placeholder="t('clusters@集群、节点关键词')"/>
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">{{t('clusters@搜索')}}</button>
        </div>
        <div class="ui field" v-if="latestClusters.length > 0">
            <a href="" @click.prevent="showLatest()">
                {{t('clusters@常用')}}
                <i class="pi" :class="{
                    'pi-angle-down': !latestVisible,
                    'pi-angle-up': latestVisible
                }"></i>
            </a>
        </div>
    </div>
</form>

<b-collapse v-if="latestVisible" :title="t('clusters@常用集群')" :links="latestClusters.map(server=>({
    href: '/clusters/cluster?clusterId=' + server.id,
    text: server.name,
}))">
</b-collapse>

<div class="ui tabular menu" v-if="isSearching">
    <a :href="'/clusters?searchType=cluster&keyword=' + keyword" class="item" :class="{active: searchType == '' || searchType == 'cluster'}">{{t('clusters@集群')}}({{countClusters}})</a>
    <a :href="'/clusters/nodes?keyword=' + keyword" class="item" :class="{active: searchType == 'node'}">{{t('clusters@节点')}}({{countNodes}})</a>
</div>

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

    <div class="margin"></div>
    
    <b-table
        v-if="clusters.length > 0"
        :columns="[
            {
                title: t('clusters@集群名称'),
                key: 'name',
                dataIndex: 'name',
                scopedSlots: { customRender: 'name' }
            },
            {
                title: t('clusters@节点数'),
                key: 'countAllNodes',
                dataIndex: 'countAllNodes',
                align: 'center',
                width: '100px',
                scopedSlots: { customRender: 'countAllNodes' }
            },
            {
                title: t('clusters@在线节点数'),
                key: 'countActiveNodes',
                dataIndex: 'countActiveNodes',
                align: 'center',
                width: '100px',
                scopedSlots: { customRender: 'countActiveNodes' }
            },
            {
                title: t('clusters@网站数'),
                key: 'countServers',
                dataIndex: 'countServers',
                align: 'center',
                width: '100px',
                scopedSlots: { customRender: 'countServers' }
            },
            {
                title: t('clusters@DNS域名'),
                key: 'dnsName',
                dataIndex: 'dnsName',
                scopedSlots: { customRender: 'dnsName' }
            },
            {
                title: t('clusters@操作'),
                key: 'actions',
                width: '120px',
                scopedSlots: { customRender: 'actions' }
            }
        ]"
        :data-source="clusters"
        row-key="id"
        :bordered="false"
        :pagination="false"
        >

        <!-- 集群名称列 -->
        <template slot="name" slot-scope="{ text, record }">
            <div class="cluster-name-td">
                <a :href="'/clusters/cluster?clusterId=' + record.id"><keyword :v-word="keyword">{{record.name}}</keyword></a>

                <a :href="'/clusters/cluster/settings?clusterId=' + record.id" title="设置"><i class="icon setting grey"></i></a>

                <div v-if="record.timeZone != null && record.timeZone.length > 0">
                    <grey-label>{{t('clusters@时区')}}：{{record.timeZone}}</grey-label>
                </div>

                <div class="pin-icon">
                    <a href="" :title="t('clusters@取消置顶')" v-if="record.isPinned" @click.prevent="pin(record.id, false)"><i class="icon pin grey visible"></i></a>
                    <a href="" :title="t('clusters@置顶')" v-else @click.prevent="pin(record.id, true)"><i class="icon pin grey opacity"></i></a>
                </div>
            </div>
        </template>

        <!-- 节点数列 -->
        <template slot="countAllNodes" slot-scope="{ text, record }">
            <a :href="'/clusters/cluster/nodes?clusterId=' + record.id" v-if="record.countAllNodes > 0">
                <span class="node-count" :class="{'red': record.countAllNodes > record.countActiveNodes}">{{record.countAllNodes}}</span>
            </a>
            <span class="disabled" v-else>-</span>

            <div v-if="record.countUpgradeNodes > 0" class="node-upgrade-tip">
                <a :href="'/clusters/cluster/upgradeRemote?clusterId=' + record.id" :title="t('clusters@点击进入远程升级页面')">{{t('clusters@有节点需要升级')}}</a>
            </div>
        </template>

        <!-- 在线节点数列 -->
        <template slot="countActiveNodes" slot-scope="{ text, record }">
            <a :href="'/clusters/cluster/nodes?clusterId=' + record.id + '&activeState=1'" v-if="record.countActiveNodes > 0">
                <span class="node-count green">{{record.countActiveNodes}}</span>
            </a>
            <span class="disabled" v-else>-</span>
        </template>

        <!-- 网站数列 -->
        <template slot="countServers" slot-scope="{ text, record }">
            <span v-if="record.countServers > 0">{{record.countServers}}</span>
            <span class="disabled" v-else>-</span>
        </template>

        <!-- DNS域名列 -->
        <template slot="dnsName" slot-scope="{ text, record }">
            <span v-if="record.dnsName.length > 0">
                <var><keyword :v-word="keyword">{{record.dnsName}}</keyword></var>.<span v-if="record.dnsDomainName.length > 0">{{record.dnsDomainName}}</span><span v-else class="disabled">主域名</span>
                <span v-if="record.dnsDomainId > 0"><link-icon :href="'/dns/clusters/cluster?clusterId=' + record.id"></link-icon></span>
            </span>
            <span v-else class="disabled">-</span>
        </template>

        <!-- 操作列 -->
        <template slot="actions" slot-scope="{ text, record }">
            <a :href="'/clusters/cluster?clusterId=' + record.id">{{t('clusters@详情')}}</a> &nbsp;
            <a :href="'/clusters/cluster/settings?clusterId=' + record.id">{{t('clusters@设置')}}</a>
        </template>
    </b-table>
</div>

<page-box></page-box>