{$layout}

<first-menu>
	<a href="" class="item" @click.prevent="createNode()">{{t("settings_db_nodes_index@[添加节点]")}}</a>
</first-menu>

<b-empty v-if="!isLoading && nodes.length == 0">{{t("settings_db_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/db-nodes/node?nodeId=' + record.id">{{record.name}}</a>
        </template>
        
        <!-- 连接地址 -->
        <template slot="addrSlot" slot-scope="{ text, record }">
            {{record.host}}:{{record.port}}
        </template>
        
        <!-- 数据库版本 -->
        <template slot="versionSlot" slot-scope="{ text, record }">
            <span v-if="record.status && record.status.version.length > 0">v{{record.status.version}}</span>
            <span class="disabled" v-else>-</span>
        </template>
        
        <!-- 用量 -->
        <template slot="sizeSlot" slot-scope="{ text, record }">
            <span v-if="record.status && record.status.isOk">{{record.status.size}}</span>
            <span v-else class="disabled">-</span>
        </template>
        
        <!-- 状态 -->
        <template slot="statusSlot" slot-scope="{ text, record }">
            <div v-if="record.isOn">
                <Tag v-if="record.status && record.status.isOk" color="green">{{t("settings_db_nodes_index@连接正常")}}</Tag>
                <a-button type="link" danger v-else @click.prevent="showError(record.status.error)">
                    <Tag color="red">{{t("settings_db_nodes_index@连接错误")}}</Tag>
                </a-button>
            </div>
            <span v-else>
                <label-on :v-is-on="record.isOn"></label-on>
            </span>
        </template>
        
        <!-- 操作 -->
        <template slot="actionSlot" slot-scope="{ text, record }">
            <a-button type="link" :href="'/settings/db-nodes/node?nodeId=' + record.id">
                 <i class="pi pi-file" style="font-size: 12px; padding: 4px;"></i> {{t("settings_db_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_db_nodes_index@删除")}}
            </a-button>
        </template>
    </b-table>
</div>

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