{$layout} {$template "menu"}

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

<b-empty v-if="routes.length == 0">暂时还没有线路。</b-empty>
<div class="margin"></div>
<b-sortable-table
    v-if="routes.length > 0"
    :columns="columns"
    :data-source="routes"
    :row-key="'id'"
    :scroll="{ x: 800 }"
    size="middle"
    :on-sort="handleSort"
>
     <!-- 拖动把手 -->
     <template slot="handleSlot" slot-scope="{ text, record }">
        <i class="icon handle bars"></i>
      </template>

    <template slot="nameSlot" slot-scope="{ text, record }">
        <a href="" @click.prevent="updateRoute(record.id)">
            {{record.name}} <i class="pi pi-window-maximize"></i>
        </a>
    </template>

    <template slot="codeSlot" slot-scope="{ text, record }">
        id:{{record.id}}
    </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-button type="link" @click="updateRoute(record.id)">
            <i class="pi pi-pen-to-square" style="font-size: 12px; padding: 4px;"></i> 修改
        </a-button>
        <a-button type="link" @click="deleteRoute(record.id)">
            <i class="pi pi-trash" style="font-size: 12px; padding: 4px;"></i> 删除
        </a-button>
    </template>
</b-sortable-table>

<p class="comment" v-if="routes.length > 0">
    可以拖动左侧的<i class="pi pi-bars"></i>排序。
</p>
