{$layout}

<first-menu>
	<a href="" class="item" @click.prevent="createNode()">{{t('settings_user_nodes_index@[添加节点]')}}</a>
    <span class="item disabled">|</span>
    <a href="/settings/user-ui" target="_blank" class="item">{{t('settings_user_nodes_index@界面设置')}} &nbsp; <i class="icon external small"></i></a>
</first-menu>

<b-empty v-if="!isLoading && nodes.length == 0">{{t('settings_user_nodes_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/userNodes/node?nodeId=' + record.id">{{record.name}}</a>
        </template>
        
        <!-- 访问地址 -->
        <template slot="addrSlot" slot-scope="{ text, record }">
             <div v-if="record.accessAddrs != null && record.accessAddrs.length > 0">
				<span class="ui label tiny basic" v-for="addr in record.accessAddrs" :key="addr" style="margin-bottom: 0.5em; margin-right: 0.5em;">{{addr}}</span>
			</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_user_nodes_index@运行中')}}</Tag>
            </div>
            <span v-else-if="record.status && record.status.updatedAt > 0"><Tag color="red">{{t('settings_user_nodes_index@已断开')}}</Tag></span>
            <span v-else-if="record.status && record.status.updatedAt == 0"><Tag color="red">{{t('settings_user_nodes_index@未连接')}}</Tag></span>
             <span v-else class="disabled">-</span>
        </template>
        
        <!-- 操作 -->
        <template slot="actionSlot" slot-scope="{ text, record }">
            <a-button type="link" :href="'/settings/userNodes/node?nodeId=' + record.id">
                 <i class="pi pi-file" style="font-size: 12px; padding: 4px;"></i> {{t('settings_user_nodes_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_user_nodes_index@删除')}}
            </a-button>
        </template>
        
    </b-table>
</div>

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