{$layout}
{$template "menu"}

<div class="config-section">
    <div class="section-title">
        <i class="icon server"></i>
        <span>{{t("servers_groups_group_index@分组名称")}}</span>
    </div>
    <div class="config-item">
        <div class="item-content">{{group.name}}</div>
    </div>
</div>

<b-settings-header>{{t("servers_groups_group_index@网站")}}</b-settings-header>

<b-empty v-if="!loading && servers.length == 0">{{t("servers_groups_group_index@暂时还没有网站")}}</b-empty>

<b-table
    v-if="servers.length > 0"
    :columns="[
        { title: t('servers_groups_group_index@网站名称'), key: 'name', scopedSlots: { customRender: 'nameSlot' } },
        { title: t('servers_groups_group_index@所属用户'), key: 'user', width: '120px', scopedSlots: { customRender: 'userSlot' } },
        { title: t('servers_groups_group_index@部署集群'), dataIndex: 'cluster.name', key: 'cluster', width: '150px' },
        { title: t('servers_groups_group_index@域名'), key: 'domain', scopedSlots: { customRender: 'domainSlot' } },
        { title: t('servers_groups_group_index@端口'), key: 'ports', width: '150px', scopedSlots: { customRender: 'portSlot' } },
        { title: t('servers_groups_group_index@状态'), key: 'status', width: '100px', align: 'center', scopedSlots: { customRender: 'statusSlot' } },
        { title: t('servers_groups_group_index@操作'), key: 'action', width: '150px', scopedSlots: { customRender: 'actionSlot' } }
    ]"
    :data-source="servers"
    :row-key="'id'"
    :loading="loading"
    :pagination="false"
>
    <template slot="nameSlot" slot-scope="{ text, record }">
        <a :href="'/servers/server?serverId=' + record.id"><keyword :v-word="keyword">{{record.name}}</keyword></a>
        <div style="margin-top:0.4em">
            <grey-label>{{record.serverTypeName}}</grey-label>
        </div>
    </template>

    <template slot="userSlot" 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="domainSlot" slot-scope="{ text, record }">
        <span v-if="record.serverNames.length > 0">
            <span v-if="record.serverNames[0].subNames == null || record.serverNames[0].subNames.length == 0"><keyword :v-word="keyword">{{record.serverNames[0].name}}</keyword></span>
            <span v-else><keyword :v-word="keyword">{{record.serverNames[0].subNames[0]}}</keyword></span>
            <span v-if="record.countServerNames > 1">{{t("servers_groups_group_index@等count个域名", [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-tag color="orange" :href="'/servers/server/settings/serverNames?serverId=' + record.id">{{t("servers_groups_group_index@审核中")}} <i class="pi pi-arrow-right"></i></a-tag>
        </div>

        <!-- 审核失败 -->
        <div v-if="!record.auditingIsOk" style="margin-top: 0.5em">
             <a-tag color="red" :href="'/servers/server/settings/serverNames?serverId=' + record.id">{{t("servers_groups_group_index@审核不通过")}} <i class="pi pi-arrow-right"></i></a-tag>
        </div>
    </template>

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

    <template slot="statusSlot" slot-scope="{ text, record }">
        <div v-if="!checkDNS">
            <label-on :v-is-on="record.isOn"></label-on>
        </div>
        <div v-else>
            <Tag v-if="!record.isOn" color="default">{{t("servers_groups_group_index@停用中")}}</Tag>
            <Tag v-else-if="record.status.isOk" color="green">{{t("servers_groups_group_index@正常")}}</Tag>
            <Tag v-else-if="record.status.message.length == 0" color="blue">{{t("servers_groups_group_index@检查中")}}</Tag>
            <Tag v-else color="red">{{record.status.message}}
                <tip-icon :content="record.status.todo"></tip-icon>
            </Tag>
        </div>
    </template>

    <template slot="actionSlot" slot-scope="{ text, record }">
        <a-button type="link" :href="'/servers/server?serverId=' + record.id">{{t("servers_groups_group_index@详情")}}</a-button>
        <a-button type="link" :href="'/servers/server/settings?serverId=' + record.id">{{t("servers_groups_group_index@设置")}}</a-button>
    </template>
</b-table>

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