{$layout}
{$template "menu"}

<!-- 错误日志 -->
<div v-if="errorLogs.length > 0">
    <div class="margin"></div>
    <div class="ui menu tabular attached">
        <span class="ui item active"><span class="red">需要修复的错误 &nbsp; <a href="" title="本页已修复" @click.prevent="fixPageLogs"><i class="icon remove small"></i> </a></span></span>
    </div>
    <div class="ui segment attached node-logs-box">
        <div class="ui icon message small" v-for="log in errorLogs" :class="{error: log.level == 'error', success: log.level == 'success'}">
            <i class="icon warning circle"></i>
            <div class="content">
                [{{log.createdTime}}]
                <a :href="'/clusters/cluster/node?clusterId=' + log.clusterId + '&nodeId=' + log.nodeId">[节点：{{log.nodeName}}]</a>
                <a :href="'/servers/server/settings?serverId=' + log.serverId"><span v-if="log.serverName.length > 0">[服务：{{log.serverName}}]</span><span v-else>[服务]</span></a>
                <span v-if="log.level == 'error'">[错误]</span>
                <span v-if="log.level == 'success'">[成功]</span>
                {{log.description}}
            </div>
            <a href="" title="关闭" @click.prevent="fixLog(log.id)"><i class="ui icon remove small"></i></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 menu basic text">
        <div class="item">
            <div class="ui fields inline">
                <div class="ui field" v-if="clusters.length > 0">
                    <select class="ui dropdown auto-width" name="clusterId" v-model="clusterId">
                        <option value="0">[选择集群]</option>
                        <option v-for="cluster in clusters" :value="cluster.id">{{cluster.name}}</option>
                    </select>
                </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 v-for="group in groups" :value="group.id">{{group.name}}</option>
                    </select>
                </div>
                <div class="ui field">
                    <input type="text" name="keyword" style="width:10em" 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">[清除条件]</a>
                </div>
                <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>
        </div>
        <div class="item right">
            <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">暂时还没有服务。</p>

<table class="ui table selectable celled" v-if="servers.length > 0">
	<thead>
		<tr>
			<th>服务名称</th>
			<th>所属用户</th>
			<th>部署集群</th>
			<th>域名</th>
			<th>端口</th>
			<th class="two wide center">状态</th>
			<th class="two op">操作</th>
		</tr>
	</thead>
	<tr v-for="server in servers">
        <td><a :href="'/servers/server?serverId=' + server.id"><keyword :v-word="keyword">{{server.name}}</keyword></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.serverNames.length > 0">
                <span v-if="server.serverNames[0].subNames == null || server.serverNames[0].subNames.length == 0"><keyword :v-word="keyword">{{server.serverNames[0].name}}</keyword></span>
                <span v-else><keyword :v-word="keyword">{{server.serverNames[0].subNames[0]}}</keyword></span>
				<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">
            <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>