{$layout}
{$template "menu"}

<second-menu>
    <menu-item href="" @click.prevent="createRoute()">
        <i class="pi pi-pen-to-square"></i>
        {{t('ns_routes_index@创建线路')}}
    </menu-item>
</second-menu>

<form class="ui form" action="/ns/routes" method="get" v-show="categories.length > 0">
    <div class="ui fields inline">
        <div class="ui field">
            <b-select
                name="categoryId"
                v-model="categoryId"
                :options="[
                    {label: t('ns_routes_index@选择分类'), value: '0'},
                    ...categories.map(category => ({
                        label: category.name,
                        value: category.id,
                    }))
                ]"
            ></b-select>

            <!-- <select name="categoryId" class="ui dropdown" v-model="categoryId">
                <option value="0">{{t('ns_routes_index@选择分类')}}</option>
                <option v-for="category in categories" :value="category.id">{{category.name}}</option>
            </select> -->
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">{{t('ns_routes_index@搜索')}}</button>
            &nbsp;
            <a href="/ns/routes" v-if="categoryId > 0">{{t('ns_routes_index@清除条件')}}</a>
        </div>
    </div>
</form>

<div class="margin"></div>

<div v-if="routes.length == 0">
    <b-empty><span v-if="categoryId > 0">{{t('ns_routes_index@当前分类下')}}</span>{{t('ns_routes_index@暂时还没有线路')}}</b-empty>
</div>

<div v-show="routes.length > 0">
    <b-sortable-table
        :columns="columns"
        :data-source="routes"
        :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="updateRoute(record.id)">{{record.name}} <i class="icon expand small"></i></a>
            <div>
                <grey-label v-if="record.category.id > 0">{{record.category.name}}</grey-label>
                <grey-label v-if="record.category.id == 0" class="disabled">{{t('ns_routes_index@未分类')}}</grey-label>
            </div>
        </template>

        <!-- Code Slot -->
        <template slot="codeSlot" slot-scope="{ text, record }">
            id:{{record.id}}
        </template>

        <!-- Priority Slot -->
        <template slot="prioritySlot" slot-scope="{ text, record }">
            <span v-if="record.priority > 0">{{record.priority}}</span>
            <span v-else class="disabled">0</span>
        </template>

        <!-- Public Slot -->
        <template slot="publicSlot" slot-scope="{ text, record }">
            <span v-if="record.isPublic" class="green">Y</span>
            <span v-else class="disabled">N</span>
        </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="updateRoute(record.id)">{{t('ns_routes_index@修改')}}</a> &nbsp;
            <a href="" @click.prevent="deleteRoute(record.id)">{{t('ns_routes_index@删除')}}</a>
        </template>

    </b-sortable-table>

    <p class="comment" v-if="routes.length > 0">{{t('ns_routes_index@可以拖动左侧的排序')}}<i class="icon bars"></i>{{t('ns_routes_index@排序')}}，{{t('ns_routes_index@其中只有设置为公用的线路才允许用户使用')}}</p>
</div>