{$layout}
{$template "../menu"}

<second-menu>
    <menu-item @click.prevent="createCategory">
        <i class="pi pi-plus" style="font-size: 12px; margin-right: 5px;"></i>
        {{t('ns_routes_categories_index@添加分类')}}
    </menu-item>
</second-menu>

<b-empty v-if="categories.length == 0">{{t('ns_routes_categories_index@暂时还没有线路分类')}}</b-empty>

<div v-if="categories.length > 0">
    <b-sortable-table
        :columns="columns"
        :data-source="categories"
        :row-key="'id'"
        size="middle"
        :show-header="true"
        :on-sort="handleSort"
    >
        <!-- Handle Slot -->
        <template slot="handleSlot" slot-scope="{ text, record }">
            <i class="icon bars handle grey"></i>
        </template>

        <!-- Name Slot -->
        <template slot="nameSlot" slot-scope="{ text, record }">
            <a href="" @click.prevent="updateCategory(record.id)">{{record.name}} <i class="icon expand small"></i></a>
        </template>

        <!-- Status Slot -->
        <template slot="statusSlot" slot-scope="{ text, record }">
            <label-on :v-is-on="record.isOn"></label-on>
        </template>

        <!-- Action Slot -->
        <template slot="actionSlot" slot-scope="{ text, record }">
            <a href="" @click.prevent="updateCategory(record.id)">{{t('ns_routes_categories_index@修改')}}</a> &nbsp;
            <a href="" @click.prevent="deleteCategory(record.id)">{{t('ns_routes_categories_index@删除')}}</a>
        </template>

    </b-sortable-table>

    <p class="comment" v-if="categories.length > 0">{{t('ns_routes_categories_index@可以拖动左侧的')}}<i class="icon bars"></i>{{t('ns_routes_categories_index@排序')}}</p>
</div>