{$layout}
{$template "cluster_menu"}
<div class="ui margin"></div>

<div class="right-menu">
    <a :href="'/httpdns/clusters/createNode?clusterId=' + clusterId" class="item">[创建节点]</a>
</div>

<form class="ui form" action="/httpdns/clusters/cluster">
    <input type="hidden" name="clusterId" :value="clusterId" />
    <div class="ui fields inline">
        <div class="ui field">
            <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">
            <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">
            <input type="text" name="keyword" placeholder="节点名称、IP..." :value="keyword" />
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">搜索</button>
            &nbsp;
            <a :href="'/httpdns/clusters/cluster?clusterId=' + clusterId"
                v-if="installState > 0 || activeState > 0 || keyword.length > 0">[清除条件]</a>
        </div>
    </div>
</form>

<div class="ui margin" v-if="!hasNodes"></div>
<p class="comment" v-if="!hasNodes">当前集群下暂时还没有节点。</p>

<table class="ui table selectable celled" v-if="hasNodes">
    <thead>
        <tr>
            <th>节点名称</th>
            <th>IP地址</th>
            <th class="width-5 center">状态</th>
            <th class="two op">操作</th>
        </tr>
    </thead>
    <tbody v-for="node in nodes">
        <tr>
            <td>
                <a
                    :href="'/httpdns/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + node.id">{{node.name}}</a>
                <a :href="'/httpdns/clusters/cluster/node/update?clusterId=' + clusterId + '&nodeId=' + node.id"
                    title="设置"><i class="icon setting grey"></i></a>
                <div v-if="node.region != null">
                    <span class="grey small">{{node.region.name}}</span>
                </div>
            </td>
            <td>
                <span v-if="node.ipAddresses.length == 0" class="disabled">-</span>
                <div v-for="addr in node.ipAddresses">
                    <div class="ui label tiny basic">{{addr.ip}}
                        <span class="small" v-if="addr.name.length > 0">（{{addr.name}}）</span>
                        <span class="small red" v-if="!addr.canAccess" title="不公开访问">[内]</span>
                        <span class="small red" v-if="!addr.isOn">[下线]</span>
                        <span class="small red" v-if="!addr.isUp" title="健康检查失败">[宕机]</span>
                    </div>
                </div>
            </td>
            <td class="center">
                <div v-if="!node.isUp">
                    <span class="red">宕机</span>
                </div>
                <div v-else-if="!node.isOn">
                    <span class="disabled">未启用</span>
                </div>
                <div v-else>
                    <span v-if="node.status.isActive" class="green">在线</span>
                    <span v-else class="disabled">离线</span>
                </div>
            </td>
            <td>
                <a :href="'/httpdns/clusters/cluster/node?clusterId=' + clusterId + '&nodeId=' + node.id">详情</a> &nbsp;
                <a href="" @click.prevent="deleteNode(node.id)">删除</a>
            </td>
        </tr>
    </tbody>
</table>
<div class="page" v-html="page"></div>