{$layout}

<second-menu>
    <menu-item @click.prevent="createSystem">{{t('添加新操作系统')}}</menu-item>
</second-menu>

<form class="ui form" method="get" action="/settings/client-systems">
    <div class="ui fields inline">
        <div class="ui field">
            <input type="text" name="keyword" v-model="keyword" :placeholder="t('关键词')"/>
        </div>
        <div class="ui field">
            <button type="submit" class="ui button">{{t('搜索')}}</button>&nbsp;
            <a href="/settings/client-systems" v-if="keyword.length > 0">{{t('清除条件')}}</a>
        </div>
    </div>
</form>

<b-empty v-if="!isLoading && systems.length == 0">{{t('暂时还没有操作系统信息。')}}</b-empty>

<div class="table-box">
    <b-table
        v-if="systems.length > 0"
        :columns="[
            {
                title: t('操作系统名称'),
                dataIndex: 'name',
                key: 'name',
                width: '150px'
            },
            {
                title: t('代号'),
                key: 'codes',
                scopedSlots: { customRender: 'codesSlot' }
            },
            {
                title: t('数据ID'),
                dataIndex: 'dataId',
                key: 'dataId',
                width: '150px'
            },
            {
                title: t('操作'),
                key: 'action',
                width: '100px',
                align: 'center',
                scopedSlots: { customRender: 'actionSlot' }
            }
        ]"
        :data-source="systems"
        :row-key="'dataId'" 
        size="middle"
        :pagination="false"
        :loading="isLoading" 
        class="celled-table"
    >
        <!-- 代号 -->
        <template slot="codesSlot" slot-scope="{ text, record }">
            <span class="ui label basic small" v-for="code in record.codes" :key="code" style="margin-bottom: 0.5em; margin-right: 0.5em;">
                <keyword :v-word="keyword">{{code}}</keyword>
            </span>
        </template>
        
        <!-- 操作 -->
        <template slot="actionSlot" slot-scope="{ text, record }">
             <a-button type="link" @click.prevent="updateSystem(record.dataId)">
                 <i class="pi pi-pen-to-square" style="font-size: 12px; padding: 4px;"></i> {{t('修改')}}
             </a-button>
        </template>
    </b-table>
</div>

<page-box></page-box>