{$layout}
{$template "menu"}

<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: '[全部分组]', value: '0'},
                    ...groups.map(group => ({
                        label: group.name??'',
                        value: group.id??'',
                    }))
                ]"
            ></b-select>

            <!-- <select class="ui dropdown" name="groupId" v-model="groupId">
                <option value="0">[全部分组]</option>
                <option v-for="group in groups" :value="group.id">{{group.name}}</option>
            </select> -->
        </div>
        <div class="ui field" v-if="regions.length > 0">
            <b-select
                name="regionId"
                v-model="regionId"
                :options="[
                    {label: '[全部区域]', value: '0'},
                    ...regions.map(region => ({
                        label: region.name??'',
                        value: region.id??'',
                    }))
                ]"
            ></b-select>

            <!-- <select class="ui dropdown" name="regionId" v-model="regionId">
                <option value="0">[全部区域]</option>
                <option v-for="region in regions" :value="region.id">{{region.name}}</option>
            </select> -->
        </div>
        <div class="ui field">
            <b-select
                name="activeState"
                v-model="activeState"
                :options="[
                    {label: '[在线状态]', value: '0'},
                    {label: '在线', value: '1'},
                    {label: '不在线', value: '2'},
                ]"
            ></b-select>

            <!-- <select class="ui dropdown" name="activeState" v-model="activeState">
                <option value="0">[在线状态]</option>
                <option value="1">在线</option>
                <option value="2">不在线</option>
            </select> -->
        </div>
        <div class="ui field">
            <b-select
                name="installedState"
                v-model="installState"
                :options="[
                    {label: '[安装状态]', value: '0'},
                    {label: '已安装', value: '1'},
                    {label: '未安装', value: '2'},
                ]"
            ></b-select>

            <!-- <select class="ui dropdown" name="installedState" v-model="installState">
                <option value="0">[安装状态]</option>
                <option value="1">已安装</option>
                <option value="2">未安装</option>
            </select> -->
        </div>
        <div class="ui field" v-if="teaIsPlus && levels.length > 0">
            <b-select
                name="level"
                v-model="level"
                :options="[
                    {label: '[级别]', value: '0'},
                    ...levels.map(levelInfo => ({
                        label: levelInfo.name??'',
                        value: levelInfo.code??'',
                    }))
                ]"
            ></b-select>

            <!-- <select class="ui dropdown" name="level" v-model="level">
                <option value="0">[级别]</option>
                <option v-for="levelInfo in levels" :value="levelInfo.code">{{levelInfo.name}}</option>
            </select> -->
        </div>
        <div class="ui field">
            <input type="text" name="keyword" placeholder="关键词" v-model="keyword" style="width:10em"/>
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">搜索</button> &nbsp;
            <a :href="'/clusters/nodes'" v-if="clusterId > 0 || regionId > 0 || groupId > 0 || installState > 0 || activeState > 0 || keyword.length > 0 || level > 0 || hasOrder">[清除条件]</a>
        </div>
    </div>
</form>

<b-empty v-if="nodes.length == 0">暂时还没有节点。</b-empty>

<table class="ui table selectable celled" v-if="nodes.length > 0">
    <thead>
    <tr>
        <th>节点名称</th>
        <th>IP</th>
        <th class="width10">DNS线路</th>
        <th class="value-column center" v-if="windowWidth < miniWidth || windowWidth > columnWidth1">CPU<sort-arrow name="cpuOrder"></sort-arrow></th>
        <th class="value-column center" v-if="windowWidth < miniWidth || windowWidth > columnWidth2">内存<sort-arrow name="memoryOrder"></sort-arrow></th>
        <th class="value-column center" v-if="windowWidth < miniWidth || windowWidth > columnWidth3">下行带宽<sort-arrow name="trafficOutOrder"></sort-arrow></th>
        <th class="value-column center" v-if="windowWidth < miniWidth || windowWidth > columnWidth4">连接数<sort-arrow name="connectionsOrder"></sort-arrow></th>
        <th class="value-column center" v-if="windowWidth < miniWidth || windowWidth > columnWidth5">负载<sort-arrow name="loadOrder"></sort-arrow></th>
        <th class="width6 center">状态</th>
        <th class="one op">操作</th>
    </tr>
    </thead>
    <tr v-for="(node, nodeIndex) in nodes">
        <td class="node-name-td">
            <a :href="'/clusters/cluster/node?clusterId=' + node.cluster.id + '&nodeId=' + node.id">
                {{node.name}}
                <sup v-if="node.level > 1"><span class="blue"> &nbsp;L{{node.level}}</span></sup>
            </a>
            <a :href="'/clusters/cluster/node/settings/schedule?clusterId=' + node.cluster.id + '&nodeId=' + node.id">
                <sup v-if="node.isBackup"><span class="blue"> &nbsp;备用</span></sup>
                <sup v-if="node.offlineDay != null && node.offlineDay.length > 0"><span class="blue"> &nbsp;到{{node.offlineDay.substring(0, 4)}}-{{node.offlineDay.substring(4, 6)}}-{{node.offlineDay.substring(6, 8)}}</span></sup>
            </a>

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

            <div v-if="node.region != null">
                <grey-label>区域：{{node.region.name}}</grey-label>
            </div>
            <div v-if="node.group != null">
                <grey-label>分组：{{node.group.name}}</grey-label>
            </div>
            <div v-if="node.secondaryClusters != null && node.secondaryClusters.length > 0">
                <node-clusters-labels :v-primary-cluster="node.cluster" :v-secondary-clusters="node.secondaryClusters" size="tiny"></node-clusters-labels>
            </div>
        </td>
        <td>
            <span v-if="node.ipAddresses.length == 0" class="disabled">-</span>
            <div v-else class="address-box">
                <b-label-group v-if="node.ipAddresses.length < mostIPVisible || node.ipAddressesVisible || index < mostIPVisible" style="margin-bottom:0.3em">
                    <b-label v-for="(addr, index) in node.ipAddresses">
                        {{addr.ip}}
                        <span class="small" v-if="addr.name.length > 0">（{{addr.name}}<span v-if="!addr.canAccess">，不公开访问</span>）</span>
                        <span class="small" v-if="addr.name.length == 0 && !addr.canAccess">（不公开访问）</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>

                <!-- <div v-for="(addr, index) in node.ipAddresses" v-if="node.ipAddresses.length < mostIPVisible || node.ipAddressesVisible || index < mostIPVisible" style="margin-bottom:0.3em">
                    <div class="ui label tiny basic">
                        {{addr.ip}}
                        <span class="small" v-if="addr.name.length > 0">（{{addr.name}}<span v-if="!addr.canAccess">，不公开访问</span>）</span>
                        <span class="small" v-if="addr.name.length == 0 && !addr.canAccess">（不公开访问）</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>
                    </div>
                </div> -->

                <a href="" @click.prevent="showMoreIP(nodeIndex, node)" v-show="node.ipAddresses.length > mostIPVisible">
                    <span class="small grey" v-if="!node.ipAddressesVisible">更多IP...</span>
                    <span class="small grey" v-if="node.ipAddressesVisible">...收起</span>
                </a>
            </div>
        </td>
        <td class="routes-box" :class="{'show-link': node.dnsRouteNames.length == 0 &&  hasClusterDNS}">
            <div v-if="node.dnsRouteNames.length > 0">
                <div v-for="routeName in node.dnsRouteNames">
                    <tiny-basic-label>{{routeName}}</tiny-basic-label>
                </div>
                <div>
                    <a href="" @click.prevent="updateNodeDNS(node.id)" class="small">[修改]</a>
                </div>
            </div>
            <span v-else-if="hasClusterDNS">
                <a href="" @click.prevent="updateNodeDNS(node.id)" class="small">[设置]</a>
            </span>
            <span v-else class="disabled">-</span>
        </td>
        <td class="center" v-if="windowWidth < miniWidth || windowWidth > columnWidth1">
            <span v-if="node.status.isActive" :class="{red:node.status.cpuUsage > 0.50}">{{node.status.cpuUsageText}}</span>
            <span v-else class="disabled">-</span>
        </td>
        <td class="center" v-if="windowWidth < miniWidth || windowWidth > columnWidth2">
            <span v-if="node.status.isActive" :class="{red:node.status.memUsage > 0.80}">{{node.status.memUsageText}}</span>
            <span v-else class="disabled">-</span>
        </td>
        <td class="center" v-if="windowWidth < miniWidth || windowWidth > columnWidth3">
            <span v-if="node.status.isActive && node.status.trafficOutBytes > 0">{{teaweb.formatBits(node.status.trafficOutBytes * 8/60, 2)}}</span>
            <span v-else class="disabled">-</span>
        </td>
        <td class="center" v-if="windowWidth < miniWidth || windowWidth > columnWidth4">
            <span v-if="node.status.isActive && node.status.countConnections > 0">{{teaweb.formatCount(node.status.countConnections)}}</span>
            <span v-else class="disabled">-</span>
        </td>
        <td class="center" v-if="windowWidth < miniWidth || windowWidth > columnWidth5">
            <span v-if="node.status.isActive">{{node.status.load1m}}</span>
            <span v-else class="disabled">-</span>
        </td>
        <td class="center">
            <div v-if="!node.isUp">
                <span class="red">健康问题下线</span>
                <div>
                    <a href="" @click.prevent="upNode(node.id)">[上线]</a>
                </div>
            </div>
            <div v-else-if="!node.isOn">
                <label-on :v-is-on="node.isOn"></label-on>
            </div>
            <div v-else-if="node.isInstalled">
                <div v-if="node.status.isActive">
                    <span v-if="!node.isSynced" class="red">同步中</span>
                    <span v-else class="green">运行中</span>
                </div>
                <span v-else-if="node.status.updatedAt > 0" class="red">已断开</span>
                <span v-else-if="node.status.updatedAt == 0" class="red">未连接</span>
            </div>
            <div v-else>
                <span v-if="node.installStatus.isRunning" class="red">安装中</span>
                <a v-if="node.installStatus.isFinished && !node.installStatus.isOk" :href="'/clusters/cluster/node/install?clusterId=' + clusterId + '&nodeId=' + node.id" title="点击看安装错误"><span class="red">安装出错</span></a>
                <a v-else class="red" :href="'/clusters/cluster/node/install?clusterId=' + clusterId + '&nodeId=' + node.id" title="点击进安装界面"><span class="red">未安装</span></a>
            </div>
        </td>
        <td>
            <a :href="'/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + node.id">详情</a><!-- &nbsp; <a href="" @click.prevent="deleteNode(node.id)">删除</a>-->
        </td>
    </tr>
</table>


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