{$layout}
{$template "menu"}

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

    <div class="ui icon message small error">
        <i class="p-message-icon pi pi-exclamation-triangle"></i>
        <div class="content"><a href="/clusters/logs?type=needFix">
            {{t('index_有count个网站相关的错误需要修复_8a74', {count: 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">
            <b-select
                name="groupId"
                v-model="groupId"
                auto-width
                :options="[
                    {label: t('index_选择分组_0101'), value: '0'},
                    {label: t('index_未分组_0101'), value: '-1'},
                    ...groups.map(group => ({
                        label: group.name,
                        value: group.id,
                    }))
                ]"
            ></b-select>

            <!-- <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="t('index_关键词、域名、端口等_0101')" v-model="keyword"/>
        </div>
        <div class="ui field">
            <button type="submit" class="ui button">
                {{t('index_搜索_0101')}}
            </button>
            &nbsp;
            <a href="/servers" v-if="clusterId > 0 || groupId > 0 || keyword.length > 0 || hasOrder || userId > 0">
                {{t('index_清除条件_0101')}}
            </a>
        </div>
    </div>
    <div class="ui fields inline" style="margin-top: 1em" v-if="clusterId == 0 && groupId == 0 && keyword.length == 0 && latestServers.length > 0">
        <div class="ui field">
            <a href="" @click.prevent="showLatest()">
                {{t('index_常用_0101')}}
                <i class="pi" :class="{
                    'pi-angle-down': !latestVisible,
                    'pi-angle-up': latestVisible
                }"></i>
            </a>
        </div>
        <div class="ui field" style="position: absolute; right: 1em">
            <checkbox name="checkDNS" :v-value="1" v-model="checkDNS">
                {{t('index_检查域名解析_0101')}}
            </checkbox>
        </div>
    </div>
</form>

<!-- 常用服务 -->
<b-collapse v-if="latestVisible" :title="t('index_常用网站_0101')" :links="latestServers.map(server=>({
    href: '/servers/server?serverId=' + server.id,
    text: server.name,
}))">
</b-collapse>
<!-- <div class="b-collapse-container" 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> -->

<b-empty v-if="servers.length == 0">
    {{t('index_暂时还没有网站_db03')}}，{{ t('index_现在去_0101') }}
    <a class="ant-btn-link ant-btn-link-hover" style="display: inline-flex; align-items: center; gap: 0.5em; margin-left: 0.5em;" href="/servers/create">
        {{t('index_创建网站_0101')}}
        <i class="pi pi-arrow-right" style="font-size: 12px;"></i>
    </a>
</b-empty>

<div v-if="checkedServerIds.length > 0">
    <div class="ui divider"></div>
    <button class="ui button basic" @click.prevent="resetCheckedServers">
        {{t('index_取消所选_0101')}}
    </button> &nbsp; &nbsp;
    <button class="ui button basic" @click.prevent="deleteServers">
        {{t('index_删除所选count个网站_0101', [checkedServerIds.length])}}
    </button>
</div>

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

<b-table
    v-if="servers.length > 0"
    :columns="tableColumns"
    :data-source="servers"
    :row-key="(record) => record.id"
    :bordered="false"
    size="middle"
    :pagination="false"
    :loading="false"
    :row-selection="{
        type: 'checkbox',
        selectedRowKeys: checkedServerIds,
        onChange: (selectedRowKeys) => {
            checkedServerIds = selectedRowKeys;
            updateCheckedServers();
        }
    }"
    :scroll="{ x: 1200 }"
    :on-sort="handleTableChange"
    >
    <!-- 网站名称列 -->
    <template slot="name" slot-scope="{ text, record }">
        <a :href="'/servers/server?serverId=' + record.id"><keyword :v-word="keyword">{{record.name}}</keyword></a>  &nbsp; <a :href="'/servers/server/settings?serverId=' + record.id" :title="t('index_设置_0101')"></a>
        <div style="margin-top:0.4em">
            <grey-label>{{record.serverTypeName}}</grey-label>
        </div>
    </template>

    <!-- 所属用户列 -->
    <template slot="user" slot-scope="{ text, record }">
        <span v-if="record.user != null">{{record.user.fullname}}<link-icon v-if="canVisitUser" :href="'/users/user?userId=' + record.user.id"></link-icon></span>
        <span v-else>-</span>
    </template>

    <!-- 域名列 -->
    <template slot="serverName" slot-scope="{ text, record }">
        <span v-if="record.firstServerName.length > 0">
            <keyword :v-word="keyword">{{record.firstServerName}}</keyword>
            <span v-if="record.countServerNames > 1">
                {{t('index_等count个域名_0101', [record.countServerNames])}}
                <popup-icon :href="'/servers/serverNamesPopup?serverId=' + record.id" height="20em"></popup-icon>
            </span>
        </span>
        <span v-else class="disabled">-</span>

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

        <!-- 审核失败 -->
        <div v-if="!record.auditingIsOk" style="margin-top: 0.5em">
            <a class="ui label basic tiny red" :title="t('index_点击跳到审核页面_0101')" :href="'/servers/server/settings/serverNames?serverId=' + record.id">
                {{t('index_审核不通过_0101')}}
                &nbsp;<i class="icon long arrow right alternate"></i>
            </a>
        </div>
    </template>

    <!-- 端口列 -->
    <template slot="ports" slot-scope="{ text, record }">
        <span v-if="record.ports.length == 0">-</span>
        <div v-for="port in record.ports">
            <tiny-basic-label><keyword :v-word="keyword">{{port.portRange}}</keyword><span class="small">（{{port.protocol}}）</span></tiny-basic-label>
        </div>
    </template>

    <!-- 下行带宽列 -->
    <template slot="bandwidth" slot-scope="{ text, record }">
        <span class="bandwidth-span"><bits-var :v-bits="record.bandwidthBits"></bits-var></span>
    </template>

    <!-- QPS列 -->
    <template slot="qps" slot-scope="{ text, record }">
        <span>{{record.qps}}</span>
    </template>

    <!-- 攻击QPS列 -->
    <template slot="attackQps" slot-scope="{ text, record }">
        <span>{{record.attackQPS}}</span>
    </template>

    <!-- 状态列 -->
    <template slot="status" slot-scope="{ text, record }">
        <div class="status-container">
            <!-- DNS检查状态（当启用DNS检查时显示） -->
            <div v-if="!checkDNS">
                <div class="status-toggle">
                    <a-switch 
                        :checked="record.isOn" 
                        @change="toggleServerStatus(record)"
                        :loading="record.isUpdating"
                        :disabled="record.isUpdating"
                        checked-children="启用"
                        un-checked-children="停用"
                        >
                    </a-switch>
                </div>
            </div>
            <div v-else>
                <!-- 状态切换开关 -->
                <div class="status-toggle" v-if="!record.isOn || record.status.isOk">
                    <a-switch 
                        :checked="record.isOn" 
                        @change="toggleServerStatus(record)"
                        :loading="record.isUpdating"
                        :disabled="record.isUpdating"
                        checked-children="启用"
                        un-checked-children="停用"
                        >
                    </a-switch>
                </div>
                <span v-else-if="record.status.message.length == 0">
                    <i class="pi pi-sync" style="color: #3b82f6" :title="t('index_检查中_0101')"></i>
                </span>
                <span v-else>
                    <i class="pi pi-exclamation-circle" style="color: #ef4444" :title="record.status.message"></i>
                    <tip-icon :content="record.status.todo"></tip-icon>
                </span>
            </div>
        </div>
    </template>

    <!-- 操作列 -->
    <template slot="actions" slot-scope="{ text, record }">
        <a :href="'/servers/server?serverId=' + record.id">
            {{t('index_详情_0101')}}
        </a> &nbsp;
        <a :href="'/servers/server/settings?serverId=' + record.id">
            {{t('index_设置_0101')}}
        </a>
    </template>
</b-table>

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