{$layout}
{$template "menu"}

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

<div class="margin"></div>

<form class="ui form" action="/clusters/nodes">
    <div class="ui fields inline">
        <div class="ui field">
            <node-cluster-combo-box :v-cluster-id="clusterId"></node-cluster-combo-box>
        </div>
        <div class="ui field" v-if="groups.length > 0">
            <b-select
                name="groupId"
                v-model="groupId"
                :options="[
                    {label: t('clusters@[全部分组]'), value: '0'},
                    ...groups.map(group => ({
                        label: group.name??'',
                        value: group.id??'',
                    }))
                ]"
            ></b-select>
        </div>
        <div class="ui field" v-if="regions.length > 0">
            <b-select
                name="regionId"
                v-model="regionId"
                :options="[
                    {label: t('clusters@[全部区域]'), value: '0'},
                    ...regions.map(region => ({
                        label: region.name??'',
                        value: region.id??'',
                    }))
                ]"
            ></b-select>
        </div>
        <div class="ui field">
            <b-select
                name="activeState"
                v-model="activeState"
                :options="[
                    {label: t('clusters@[在线状态]'), value: '0'},
                    {label: t('clusters@在线'), value: '1'},
                    {label: t('clusters@不在线'), value: '2'},
                ]"
            ></b-select>
        </div>
        <div class="ui field">
            <b-select
                name="installedState"
                v-model="installState"
                :options="[
                    {label: t('clusters@[安装状态]'), value: '0'},
                    {label: t('clusters@已安装'), value: '1'},
                    {label: t('clusters@未安装'), value: '2'},
                ]"
            ></b-select>
        </div>
        <div class="ui field" v-if="teaIsPlus && levels.length > 0">
            <b-select
                name="level"
                v-model="level"
                :options="[
                    {label: t('clusters@[级别]'), value: '0'},
                    ...levels.map(levelInfo => ({
                        label: levelInfo.name??'',
                        value: levelInfo.code??'',
                    }))
                ]"
            ></b-select>
        </div>
        <div class="ui field">
            <input type="text" name="keyword" :placeholder="t('clusters@关键词')" v-model="keyword" style="width:10em"/>
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">{{t('clusters@搜索')}}</button> &nbsp;
            <a :href="'/clusters/nodes'" v-if="clusterId > 0 || regionId > 0 || groupId > 0 || installState > 0 || activeState > 0 || keyword.length > 0 || level > 0 || hasOrder">{{t('clusters@[清除条件]')}}</a>
        </div>
    </div>
</form>
<div class="margin"></div>

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

<b-table
    v-if="nodes.length > 0"
    :columns="[
        {
            title: t('clusters@节点名称'),
            key: 'name',
            dataIndex: 'name',
            scopedSlots: { customRender: 'name' }
        },
        {
            title: t('clusters@IP'),
            key: 'ipAddresses',
            dataIndex: 'ipAddresses',
            scopedSlots: { customRender: 'ipAddresses' }
        },
        {
            title: t('clusters@DNS线路'),
            key: 'dnsRouteNames',
            dataIndex: 'dnsRouteNames',
            width: '120px',
            scopedSlots: { customRender: 'dnsRouteNames' }
        },
        {
            title: t('clusters@CPU'),
            key: 'cpu',
            align: 'center',
            width: '80px',
            scopedSlots: { customRender: 'cpu' }
        },
        {
            title: t('clusters@内存'),
            key: 'memory',
            align: 'center',
            width: '80px',
            scopedSlots: { customRender: 'memory' }
        },
        {
            title: t('clusters@下行带宽'),
            key: 'trafficOut',
            align: 'center',
            width: '90px',
            scopedSlots: { customRender: 'trafficOut' }
        },
        {
            title: t('clusters@连接数'),
            key: 'connections',
            align: 'center',
            width: '80px',
            scopedSlots: { customRender: 'connections' }
        },
        {
            title: t('clusters@负载'),
            key: 'load',
            align: 'center',
            width: '80px',
            scopedSlots: { customRender: 'load' }
        },
        {
            title: t('clusters@状态'),
            key: 'status',
            align: 'center',
            width: '100px',
            scopedSlots: { customRender: 'status' }
        },
        {
            title: t('clusters@操作'),
            key: 'actions',
            width: '80px',
            scopedSlots: { customRender: 'actions' }
        }
    ]"
    :data-source="nodes"
    row-key="id"
    :bordered="false"
    :pagination="false"
    :scroll="{ x: '1200px' }"
    >

    <!-- 节点名称列 -->
    <template slot="name" slot-scope="{ text, record }">
        <div class="node-name-td">
            <a :href="'/clusters/cluster/node?clusterId=' + record.cluster.id + '&nodeId=' + record.id">
                {{record.name}}
                <sup v-if="record.level > 1"><span class="node-level"> &nbsp;L{{record.level}}</span></sup>
            </a>
            <a :href="'/clusters/cluster/node/settings/schedule?clusterId=' + record.cluster.id + '&nodeId=' + record.id">
                <sup v-if="record.isBackup"><span class="node-status-tag"> &nbsp;{{t('clusters@备用')}}</span></sup>
                <sup v-if="record.offlineDay != null && record.offlineDay.length > 0"><span class="node-status-tag"> &nbsp;{{t('clusters@到')}}{{record.offlineDay.substring(0, 4)}}-{{record.offlineDay.substring(4, 6)}}-{{record.offlineDay.substring(6, 8)}}</span></sup>
            </a>

            <a :href="'/clusters/cluster/node/update?clusterId=' + record.cluster.id + '&nodeId=' + record.id" :title="t('clusters@设置Title')"><i class="icon setting grey"></i></a>

            <div v-if="record.region != null">
                <grey-label>{{t('clusters@区域冒号')}}{{record.region.name}}</grey-label>
            </div>
            <div v-if="record.group != null">
                <grey-label>{{t('clusters@分组冒号')}}{{record.group.name}}</grey-label>
            </div>
            <div v-if="record.secondaryClusters != null && record.secondaryClusters.length > 0">
                <node-clusters-labels :v-primary-cluster="record.cluster" :v-secondary-clusters="record.secondaryClusters" size="tiny"></node-clusters-labels>
            </div>
        </div>
    </template>

    <!-- IP列 -->
    <template slot="ipAddresses" slot-scope="{ text, record, index }">
        <span v-if="record.ipAddresses.length == 0" class="disabled">-</span>
        <div v-else class="address-box">
            <b-label-group v-if="record.ipAddresses.length < mostIPVisible || record.ipAddressesVisible || index < mostIPVisible" style="margin-bottom:0.3em">
                <b-label v-for="(addr, index) in record.ipAddresses">
                    {{addr.ip}}
                    <span class="small" v-if="addr.name.length > 0">{{t('clusters@IP备注左括号')}}{{addr.name}}<span v-if="!addr.canAccess">{{t('clusters@IP备注不公开访问带逗号')}}</span>{{t('clusters@IP备注右括号')}}</span>
                    <span class="small" v-if="addr.name.length == 0 && !addr.canAccess">{{t('clusters@IP备注左括号')}}{{t('clusters@IP备注不公开访问')}}{{t('clusters@IP备注右括号')}}</span>

                    <!-- 专属集群 -->
                    <div v-if="addr.clusters != null && addr.clusters.length > 0" style="margin-top: 0.3em; font-weight: normal">
                         <span class="small grey">[</span><span v-for="(cluster, index) in addr.clusters" class="small grey">{{cluster.name}}<span v-if="index < addr.clusters.length - 1">，</span></span><span class="small grey">]</span>
                    </div>
                </b-label>
            </b-label-group>

            <a href="" @click.prevent="showMoreIP(index, record)" v-show="record.ipAddresses.length > mostIPVisible" class="more-ip-link">
                <span class="small grey" v-if="!record.ipAddressesVisible">{{t('clusters@更多IP')}}</span>
                <span class="small grey" v-if="record.ipAddressesVisible">{{t('clusters@收起')}}</span>
            </a>
        </div>
    </template>

    <!-- DNS线路列 -->
    <template slot="dnsRouteNames" slot-scope="{ text, record }">
        <div class="routes-box" :class="{'show-link': record.dnsRouteNames.length == 0 &&  hasClusterDNS}">
            <div v-if="record.dnsRouteNames.length > 0">
                <div v-for="routeName in record.dnsRouteNames">
                    <tiny-basic-label>{{routeName}}</tiny-basic-label>
                </div>
                <div>
                    <a href="" @click.prevent="updateNodeDNS(record.id)" class="small">{{t('clusters@[修改]')}}</a>
                </div>
            </div>
            <span v-else-if="hasClusterDNS">
                <a href="" @click.prevent="updateNodeDNS(record.id)" class="small setup-link">{{t('clusters@[设置]')}}</a>
            </span>
            <span v-else class="disabled">-</span>
        </div>
    </template>

    <!-- CPU列 -->
    <template slot="cpu" slot-scope="{ text, record }">
        <span v-if="record.status.isActive" class="status-value" :class="{red: record.status.cpuUsage > 0.50}">{{record.status.cpuUsageText}}</span>
        <span v-else class="disabled">-</span>
    </template>

    <!-- 内存列 -->
    <template slot="memory" slot-scope="{ text, record }">
        <span v-if="record.status.isActive" class="status-value" :class="{red: record.status.memUsage > 0.80}">{{record.status.memUsageText}}</span>
        <span v-else class="disabled">-</span>
    </template>

    <!-- 下行带宽列 -->
    <template slot="trafficOut" slot-scope="{ text, record }">
        <span v-if="record.status.isActive && record.status.trafficOutBytes > 0">{{teaweb.formatBits(record.status.trafficOutBytes * 8/60, 2)}}</span>
        <span v-else class="disabled">-</span>
    </template>

    <!-- 连接数列 -->
    <template slot="connections" slot-scope="{ text, record }">
        <span v-if="record.status.isActive && record.status.countConnections > 0">{{teaweb.formatCount(record.status.countConnections)}}</span>
        <span v-else class="disabled">-</span>
    </template>

    <!-- 负载列 -->
    <template slot="load" slot-scope="{ text, record }">
        <span v-if="record.status.isActive">{{record.status.load1m}}</span>
        <span v-else class="disabled">-</span>
    </template>

    <!-- 状态列 -->
    <template slot="status" slot-scope="{ text, record }">
        <div v-if="!record.isUp" class="node-status red">
            <div>
                <i class="pi pi-exclamation-triangle"></i>
                {{t('clusters@健康问题下线')}}
            </div>
            <a href="" @click.prevent="upNode(record.id)" class="action-link">
                <i class="pi pi-arrow-up"></i>
                {{t('clusters@[上线]')}}
            </a>
        </div>
        <div v-else-if="!record.isOn">
            <label-on :v-is-on="record.isOn"></label-on>
        </div>
        <div v-else-if="record.isInstalled">
            <div v-if="record.status.isActive">
                <span v-if="!record.isSynced" class="node-status red">
                    <i class="pi pi-sync"></i>
                    {{t('clusters@同步中')}}
                </span>
                <span v-else class="node-status green">
                    <i class="pi pi-check-circle"></i>
                    {{t('clusters@运行中')}}
                </span>
            </div>
            <span v-else-if="record.status.updatedAt > 0" class="node-status red">
                <i class="pi pi-times-circle"></i>
                {{t('clusters@已断开')}}
            </span>
            <span v-else-if="record.status.updatedAt == 0" class="node-status red">
                <i class="pi pi-power-off"></i>
                {{t('clusters@未连接')}}
            </span>
        </div>
        <div v-else>
            <span v-if="record.installStatus.isRunning" class="node-status red">
                <i class="pi pi-spin pi-spinner"></i>
                {{t('clusters@安装中')}}
            </span>
            <a v-if="record.installStatus.isFinished && !record.installStatus.isOk" 
               :href="'/clusters/cluster/node/install?clusterId=' + clusterId + '&nodeId=' + record.id" 
               :title="t('clusters@点击看安装错误Title')" 
               class="node-status red">
                <i class="pi pi-exclamation-circle"></i>
                {{t('clusters@安装出错')}}
            </a>
            <a v-else 
               class="node-status red" 
               :href="'/clusters/cluster/node/install?clusterId=' + clusterId + '&nodeId=' + record.id" 
               :title="t('clusters@点击进安装界面Title')">
                <i class="pi pi-download"></i>
                {{t('clusters@未安装')}}
            </a>
        </div>
    </template>

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


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