{$layout}

<first-menu>
	<a href="" class="item" @click.prevent="createNode()">{{t('settings_api_index@[添加节点]')}}</a>
    <a href="/settings/api/methodStats" class="item" v-if="hasMethodStats">{{t('settings_api_index@用时统计')}}</a>
</first-menu>

<b-empty v-if="!isLoading && nodes.length == 0">{{t('settings_api_index@暂时还没有节点。')}}</b-empty>

<div class="table-box">
    <b-table
        v-if="nodes.length > 0"
        :columns="columns"
        :data-source="nodes"
        :row-key="'id'"
        size="middle"
        :pagination="false"
        :loading="isLoading" 
        class="celled-table" 
    >
        <!-- 节点名称 -->
        <template slot="nameSlot" slot-scope="{ text, record }">
            <a :href="'/settings/api/node?nodeId=' + record.id">{{record.name}}</a>
            <div v-if="record.isPrimary">
                <grey-label>{{t('settings_api_index@主节点')}}</grey-label>
            </div>
            <div v-if="record.status != null && record.status.shouldUpgrade">
                <span class="red small">v{{record.status.buildVersion}} -&gt; v{{record.status.latestVersion}}<br/>
                    <a-button type="link" size="small" v-if="record.status.canUpgrade" @click.prevent="upgradeNode(record.id)">
                         <i class="pi pi-cloud-upload" style="font-size: 12px; padding: 4px;"></i> {{t('settings_api_index@远程升级')}}
                    </a-button>
                </span>
            </div>
        </template>

        <!-- GRPC访问地址 -->
        <template slot="grpcSlot" slot-scope="{ text, record }">
            <div v-if="record.accessAddrs != null && record.accessAddrs.length > 0">
                <div v-for="addr in record.accessAddrs" :key="addr">
                    <span class="ui label tiny basic" style="margin-bottom: 0.5em">{{addr}}</span>
                </div>
            </div>
            <div v-else class="disabled">-</div>
        </template>

        <!-- HTTP访问地址 -->
        <template slot="httpSlot" slot-scope="{ text, record }">
            <div v-if="record.restAccessAddrs != null && record.restAccessAddrs.length > 0">
                <div v-for="addr in record.restAccessAddrs" :key="addr">
                    <span class="ui label tiny basic" style="margin-bottom: 0.5em">{{addr}}</span>
                </div>
            </div>
            <div v-else class="disabled">-</div>
        </template>

        <!-- 版本号 -->
        <template slot="versionSlot" slot-scope="{ text, record }">
             <span v-if="record.status && record.status.buildVersion.length > 0">v{{record.status.buildVersion}}</span>
             <span v-else class="disabled">-</span>
        </template>

        <!-- CPU -->
        <template slot="cpuSlot" slot-scope="{ text, record }">
            <span v-if="record.status && record.status.isActive" :class="{red:record.status.cpuUsage > 0.80}">{{record.status.cpuUsageText}}</span>
            <span v-else class="disabled">-</span>
        </template>

        <!-- 内存 -->
        <template slot="memSlot" slot-scope="{ text, record }">
            <span v-if="record.status && record.status.isActive" :class="{red:record.status.memUsage > 0.80}">{{record.status.memUsageText}}</span>
            <span v-else class="disabled">-</span>
        </template>

        <!-- 状态 -->
        <template slot="statusSlot" slot-scope="{ text, record }">
            <span v-if="!record.isOn"><label-on :v-is-on="record.isOn"></label-on></span>
            <div v-else-if="record.status && record.status.isActive">
                <Tag color="green">{{t('settings_api_index@运行中')}}</Tag>
            </div>
            <span v-else-if="record.status && record.status.updatedAt > 0"><Tag color="red">{{t('settings_api_index@已断开')}}</Tag></span>
            <span v-else-if="record.status && record.status.updatedAt == 0"><Tag color="red">{{t('settings_api_index@未连接')}}</Tag></span>
            <span v-else class="disabled">-</span> 
        </template>

        <!-- 操作 -->
        <template slot="actionSlot" slot-scope="{ text, record }">
            <a-button type="link" :href="'/settings/api/node?nodeId=' + record.id">
                 <i class="pi pi-file" style="font-size: 12px; padding: 4px;"></i> {{t('settings_api_index@详情')}}
            </a-button>
            <a-button type="link" @click.prevent="deleteNode(record.id)">
                 <i class="pi pi-trash" style="font-size: 12px; padding: 4px;"></i> {{t('settings_api_index@删除')}}
            </a-button>
        </template>

    </b-table>
</div>

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