{$layout}
{$template "menu"}

<second-menu>
    <menu-item @click.prevent="createRegion()">
        <i class="pi pi-pen-to-square"></i>
        {{t('clusters_regions@创建区域')}}
    </menu-item>
</second-menu>

<b-empty v-if="regions.length == 0">{{t('clusters_regions@暂时还没有区域')}}</b-empty>

<div v-if="regions.length > 0">
    <b-sortable-table
        :columns="columns" 
        :data-source="regions" 
        :row-key="'id'"
        :scroll="{ x: 100 }"
        size="middle"
        :on-sort="onSort"
        >
        
        <!-- 拖动把手 -->
        <template slot="handleSlot" slot-scope="{ text, record }">
            <i class="icon handle bars grey" :title="t('clusters_regions@拖动排序')"></i>
        </template>
        
        <!-- 区域名称 -->
        <template slot="nameSlot" slot-scope="{ text, record }">
            <a href="" @click.prevent="updateRegion(record.id)" :class="{disabled: !record.isOn}">
                {{record.name}} &nbsp; <i class="icon expand small"></i>
            </a>
        </template>
        
        <!-- 区域说明 -->
        <template slot="descriptionSlot" slot-scope="{ text, record }">
            <span v-if="record.description.length > 0">{{record.description}}</span>
            <span v-else class="disabled">-</span>
        </template>
        
        <!-- 节点数 -->
        <template slot="countNodesSlot" slot-scope="{ text, record }">
            <a :href="'/clusters/regions/nodes?regionId=' + record.id">
                <span :class="{disabled: record.countNodes == 0, 'ant-btn-link': record.countNodes != 0}">{{record.countNodes}}</span>
            </a>
        </template>
        
        <!-- 状态 -->
        <template slot="statusSlot" slot-scope="{ text, record }">
            <label-on :v-is-on="record.isOn"></label-on>
        </template>
        
        <!-- 操作 -->
        <template slot="actionSlot" slot-scope="{ text, record }">
            <a href="" @click.prevent="updateRegion(record.id)">
                <i class="pi pi-pen-to-square"></i> {{t('clusters_regions@修改Index')}}
            </a> &nbsp; 
            <a href="" @click.prevent="deleteRegion(record.id)">
                <i class="pi pi-trash"></i> {{t('clusters_regions@删除')}}
            </a>
        </template>
    </b-sortable-table>
</div>

<p v-if="regions.length > 0" class="comment" v-html="t('clusters_regions@可以拖动左侧排序')"></p>