{$layout}
{$template "menu"}

<form class="ui form" method="get" action="/clusters/regions/nodes" v-show="regions.length > 0">
    <div class="margin"></div>
    <div class="ui fields inline">
        <div class="ui field">
            <b-select
                name="regionId"
                v-model="regionId"
                :options="[
                    {label: t('clusters_regions@所有区域'), value: '0'},
                    ...regions.map(region => ({
                        label: region.name??'',
                        value: region.id??'',
                    }))
                ]"
            ></b-select>

            <!-- <select class="ui dropdown" name="regionId" v-model="regionId">
                <option value="0">[所有区域]</option>
                <option v-for="region in regions" :value="region.id">{{region.name}}</option>
            </select> -->
        </div>
        <div class="ui field">
            <button type="submit" class="ui button">{{t('clusters_regions@搜索')}}</button>
            &nbsp;
            <a href="/clusters/regions/nodes" v-if="regionId > 0">{{t('clusters_regions@清除条件')}}</a>
        </div>
    </div>
</form>

<div v-if="nodes.length == 0">
    <b-empty><span v-if="regionId > 0">{{t('clusters_regions@当前区域下')}}</span>{{t('clusters_regions@暂时还没有节点')}}</b-empty>
</div>

<div v-if="nodes.length > 0">
    <div class="margin"></div>
    <b-table
        :columns="columns" 
        :data-source="nodes" 
        :row-key="'id'" 
        :scroll="{ x: 800 }"
        size="middle">
        
        <!-- 节点 -->
        <template slot="nameSlot" slot-scope="{ text, record }">
            <link-icon :href="'/clusters/cluster/node/detail?clusterId=' + record.cluster.id + '&nodeId=' + record.id">{{record.name}}</link-icon>
        </template>
        
        <!-- 集群 -->
        <template slot="clusterSlot" slot-scope="{ text, record }">
            <span v-if="record.cluster != null">{{record.cluster.name}}</span>
            <span v-else class="disabled">-</span>
        </template>
        
        <!-- 区域 -->
        <template slot="regionSlot" slot-scope="{ text, record }">
            <span v-if="record.region != null">{{record.region.name}}</span>
            <span v-else class="disabled">{{t('clusters_regions@尚未设置')}}</span>
        </template>
        
        <!-- 操作 -->
        <template slot="actionSlot" slot-scope="{ text, record }">
            <a href="" v-if="record.region == null" @click.prevent="updateNodeRegion(record)">
                <i class="pi pi-plus-circle"></i> {{t('clusters_regions@设置')}}
            </a>
            <a href="" v-if="record.region != null" @click.prevent="updateNodeRegion(record)">
                <i class="pi pi-pen-to-square"></i> {{t('clusters_regions@修改')}}
            </a>
        </template>
    </b-table>

    <p class="comment grey" v-if="hasNodesWithoutRegion">{{t('clusters_regions@已将未设置区域的节点排在最前')}}</p>

    <page-box></page-box>
</div>