{$layout}
{$template "menu"}

<!-- 错误日志 -->
<div v-if="countNeedFixLogs > 0">
    <div class="margin"></div>

    <div class="ui icon message small error">
        <i class="icon warning circle"></i>
        <div class="content"><a href="/clusters/logs?type=needFix">有{{countNeedFixLogs}}个网站相关的错误需要修复。</a></div>
    </div>
</div>

<!-- 搜索表单 -->
<form method="get" class="ui form" action="/servers">
    <input type="hidden" name="auditingFlag" :value="auditingFlag"/>
	<div class="ui margin"></div>
    <div class="ui fields inline">
        <div class="ui field" v-if="clusters.length > 0">
            <node-cluster-combo-box :v-cluster-id="clusterId"></node-cluster-combo-box>
        </div>
        <div class="ui field" v-if="groups.length > 0">
            <select class="ui dropdown auto-width" name="groupId" v-model="groupId">
                <option value="0">[选择分组]</option>
                <option value="-1">[未分组]</option>
                <option v-for="group in groups" :value="group.id">{{group.name}}</option>
            </select>
        </div>
        <div class="ui field" v-if="hasUsers">
            <user-selector :v-user-id="userId"></user-selector>
        </div>
        <div class="ui field">
            <input type="text" name="keyword" style="width:14em" placeholder="关键词、域名、端口等" v-model="keyword"/>
        </div>
        <div class="ui field">
            <button type="submit" class="ui button">搜索</button>
            &nbsp;
            <a href="/servers" v-if="clusterId > 0 || groupId > 0 || keyword.length > 0 || hasOrder || userId > 0">[清除条件]</a>
        </div>
    </div>
    <div class="ui fields inline" style="margin-top: 1em">
        <div class="ui field" v-if="clusterId == 0 && groupId == 0 && keyword.length == 0 && latestServers.length > 0">
            <a href="" @click.prevent="showLatest()">常用<i class="icon angle" :class="{down: !latestVisible, up: latestVisible}"></i> </a>
        </div>
        <div class="ui field" style="position: absolute; right: 1em">
            <checkbox name="checkDNS" :v-value="1" v-model="checkDNS">检查域名解析</checkbox>
        </div>
    </div>
</form>

<!-- 常用服务 -->
<div class="ui segment" v-if="latestVisible">
    常用网站：<span v-for="(server, index) in latestServers"><a :href="'/servers/server?serverId=' + server.id">{{server.name}}</a> &nbsp; <span class="disabled" v-if="index != latestServers.length - 1">|</span> &nbsp;</span>
</div>

<p class="ui message" v-if="servers.length == 0">暂时还没有网站，现在去 <a href="/servers/create">[创建网站<i class="ui icon long arrow alternate right"></i> ]</a></p>

<div v-if="checkedServerIds.length > 0">
    <div class="ui divider"></div>
    <button class="ui button basic" @click.prevent="resetCheckedServers">取消所选</button> &nbsp; &nbsp;
    <button class="ui button basic" @click.prevent="deleteServers">删除所选{{checkedServerIds.length}}网站</button>
</div>

<table class="ui table selectable celled" v-if="servers.length > 0">
	<thead>
		<tr>
            <th style="width: 1em" class="server-checkbox-td"><checkbox ref="allCheckedCheckboxes" @input="changeAllChecked"></checkbox></th>
			<th>网站名称</th>
			<th>所属用户</th>
			<th>部署集群</th>
			<th>域名</th>
			<th>端口</th>
            <th class="value-column center">下行带宽<tip-icon content="最近5分钟峰值带宽，每5分钟更新一次"></tip-icon><sort-arrow name="trafficOutOrder"></sort-arrow></th>
            <th class="value-column center" v-if="windowWidth < miniWidth || windowWidth > columnWidth4">QPS<tip-icon content="最近5分钟平均QPS，每5分钟更新一次"></tip-icon><sort-arrow name="requestsOrder"></sort-arrow></th>
            <th class="value-column center" v-if="windowWidth < miniWidth || windowWidth > columnWidth5">攻击QPS<tip-icon content="最近5分钟平均攻击QPS，每5分钟更新一次"></tip-icon><sort-arrow name="attackRequestsOrder"></sort-arrow></th>
			<th class="two wide center">状态</th>
			<th class="two op">操作</th>
		</tr>
	</thead>
	<tr v-for="server in servers">
        <td class="server-checkbox-td"><checkbox ref="serverCheckboxes" :v-value="server.id" @input="changeServerChecked"></checkbox></td>
        <td class="server-name-td"><a :href="'/servers/server?serverId=' + server.id"><keyword :v-word="keyword">{{server.name}}</keyword></a>  &nbsp; <a :href="'/servers/server/settings?serverId=' + server.id" title="设置"><i class="icon setting grey"></i></a>
			<div style="margin-top:0.4em">
				<grey-label>{{server.serverTypeName}}</grey-label>
			</div>
		</td>
		<td>
			<span v-if="server.user != null">{{server.user.fullname}}<link-icon v-if="canVisitUser" :href="'/users/user?userId=' + server.user.id"></link-icon></span>
            <span v-else>-</span>
		</td>
		<td>{{server.cluster.name}}</td>
		<td>
			<span v-if="server.firstServerName.length > 0">
                <keyword :v-word="keyword">{{server.firstServerName}}</keyword>
				<span v-if="server.countServerNames > 1">等{{server.countServerNames}}个域名 <popup-icon :href="'/servers/serverNamesPopup?serverId=' + server.id" height="20em"></popup-icon></span>
			</span>
			<span v-else class="disabled">-</span>

            <!-- 审核中 -->
            <div v-if="server.isAuditing" style="margin-top: 0.5em">
                <a class="ui label basic tiny red" title="点击跳到审核页面" :href="'/servers/server/settings/serverNames?serverId=' + server.id">审核中<span class="small grey" v-if="server.auditingTime.length > 0">（{{server.auditingTime}}）</span> &nbsp;<i class="icon long arrow right alternate"></i></a>
            </div>

            <!-- 审核失败 -->
            <div v-if="!server.auditingIsOk" style="margin-top: 0.5em">
                <a class="ui label basic tiny red" title="点击跳到审核页面" :href="'/servers/server/settings/serverNames?serverId=' + server.id">审核不通过 &nbsp;<i class="icon long arrow right alternate"></i></a>
            </div>
		</td>
		<td>
			<span v-if="server.ports.length == 0">-</span>
			<div v-for="port in server.ports">
                <tiny-basic-label><keyword :v-word="keyword">{{port.portRange}}</keyword><span class="small">（{{port.protocol}}）</span></tiny-basic-label>
			</div>
		</td>
        <td class="center">
            <span v-if="server.bandwidthBits > 0" class="bandwidth-span"><bits-var :v-bits="server.bandwidthBits"></bits-var></span>
            <span class="disabled" v-else>-</span>
        </td>
        <td class="center"  v-if="windowWidth < miniWidth || windowWidth > columnWidth4">
            <span v-if="server.qps != '0'">{{server.qps}}</span>
            <span v-else class="disabled">-</span>
        </td>
        <td class="center" v-if="windowWidth < miniWidth || windowWidth > columnWidth5">
            <span v-if="server.attackQPS != '0'">{{server.attackQPS}}</span>
            <span v-else class="disabled">-</span>
        </td>
		<td class="center">
            <div v-if="!checkDNS">
                <label-on :v-is-on="server.isOn"></label-on>
            </div>
            <div v-else>
                <span v-if="!server.isOn" class="grey">停用中</span>
                <span v-else-if="server.status.isOk" class="green">正常</span>
                <span v-else-if="server.status.message.length == 0">检查中</span>
                <span v-else class="red">{{server.status.message}}
                    <tip-icon :content="server.status.todo"></tip-icon>
                </span>
            </div>
		</td>
		<td>
			<a :href="'/servers/server?serverId=' + server.id">详情</a> &nbsp;
            <a :href="'/servers/server/settings?serverId=' + server.id">设置</a>
		</td>
	</tr>
</table>

<div class="page" v-html="page"></div>