{$layout}

<div class="right-box">
    <div style="padding: 1em 0">
        <a-button @click="createCategory">
            <i class="pi pi-plus"></i>
            {{t('tickets_categories_index@添加分类')}}
        </a-button>
    </div>

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

    <b-table
        v-if="categories.length > 0"
        :columns="[
            { title: t('tickets_categories_index@分类名'), key: 'name', scopedSlots: { customRender: 'nameSlot' } },
            { title: t('tickets_categories_index@状态'), dataIndex: 'isOn', key: 'status', scopedSlots: { customRender: 'statusSlot' }, width: '10%', align: 'center' },
            { title: t('tickets_categories_index@操作'), key: 'action', scopedSlots: { customRender: 'actionSlot' }, width: '10%', align: 'center' }
        ]"
        :data-source="categories"
        :row-key="'id'"
        :pagination="false"
        size="middle"
    >
        <template slot="nameSlot" slot-scope="{ text, record }">
             <a href="" @click.prevent="updateCategory(record.id)">{{record.name}} <i class="icon expand small"></i></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-button type="link" @click.prevent="updateCategory(record.id)">{{t('tickets_categories_index@修改')}}</a-button>
            <a-button type="link" @click.prevent="deleteCategory(record.id)">{{t('tickets_categories_index@删除')}}</a-button>
        </template>
    </b-table>
</div>