{$layout}
{$template "menu"}

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

<form class="ui form" method="get" action="/clusters/ip-addrs">
    <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">
            状态：
        </div>
        <div class="ui field">
            <b-select
                name="upState"
                v-model="upState"
                :options="[
                    {label: '[全部]', value: '0'},
                    {label: '在线', value: '1'},
                    {label: '离线', value: '2'},
                ]"
            ></b-select>
            <!-- <select class="ui dropdown" name="upState" v-model="upState">
                <option value="0">[全部]</option>
                <option value="1">在线</option>
                <option value="2">离线</option>
            </select> -->
        </div>
        <div class="ui field">
            <input type="text" placeholder="IP、名称..." name="keyword" v-model="keyword"/>
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">搜索</button>
            <span v-if="addrs.length > 0">
                &nbsp;
                <a :href="'/clusters/ip-addrs/exportExcel?clusterId=' + clusterId + '&upState=' + upState + '&keyword=' + keyword">[导出]</a>
            </span>
            &nbsp;
            <a href="/clusters/ip-addrs" v-if="clusterId > 0 || upState > 0 || keyword.length > 0">[清除条件]</a>
        </div>
    </div>
</form>

<b-empty v-if="addrs.length == 0">暂时还没有IP地址。</b-empty>
<div v-if="addrs.length > 0">
    <div class="margin"></div>
    <table class="ui table selectable celled">
        <thead>
            <tr>
                <th>IP</th>
                <th>所属主集群</th>
                <th>所属节点</th>
                <th>备注</th>
                <th>阈值</th>
                <th>状态</th>
                <th class="two op">操作</th>
            </tr>
        </thead>
        <tr v-for="addr in addrs">
            <td>
                <a :href="'/clusters/ip-addrs/addr?addrId=' + addr.id"><keyword :v-word="keyword">{{addr.ip}}</keyword></a>
                <div v-if="addr.clusters.length > 0">
                    <grey-label v-for="cluster in addr.clusters">{{cluster.name}}</grey-label>
                </div>
            </td>
            <td>
                <link-icon :href="'/clusters/cluster?clusterId=' + addr.cluster.id">{{addr.cluster.name}}</link-icon>
            </td>
            <td>
                <link-icon :href="'/clusters/cluster/node?clusterId=' + addr.cluster.id + '&nodeId=' + addr.node.id"><keyword :v-word="keyword">{{addr.node.name}}</keyword></link-icon>
            </td>
            <td>
                <span v-if="addr.name.length > 0"><keyword :v-word="keyword">{{addr.name}}</keyword></span>
                <span v-else class="disabled">-</span>
            </td>
            <td>
                <span v-if="addr.hasThresholds" class="green">Y</span>
                <span v-else class="disabled">N</span>
            </td>
            <td>
                <span v-if="!addr.isOn" class="red">禁用</span>
                <span v-else-if="!addr.canAccess" class="red">不公开访问</span>
                <span v-else-if="addr.isUp && addr.backupIP.length > 0" class="orange">备用
                    <br/><span class="grey small">{{addr.backupIP}}</span>
                </span>
                <span v-else-if="addr.isUp" class="green">在线</span>
                <span v-else class="red">离线</span>
            </td>
            <td>
                <a :href="'/clusters/ip-addrs/addr?addrId=' + addr.id">详情</a> &nbsp;
                <a href="" @click.prevent="deleteAddr(addr.id)">删除</a>
            </td>
        </tr>
    </table>
</div>

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