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

<b-empty v-if="!isLoading && countries.length == 0">{{t('暂时还没有国家/地区数据。')}}</b-empty>

<div class="table-box">
    <b-table
        v-if="countries.length > 0"
        :columns="[
            {
                title: 'ID',
                dataIndex: 'id',
                key: 'id',
                width: '60px'
            },
            {
                title: t('国家/地区名称'),
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: t('内置别名'),
                key: 'codes',
                scopedSlots: { customRender: 'codesSlot' }
            },
            {
                title: t('自定义名称'),
                key: 'customName',
                scopedSlots: { customRender: 'customNameSlot' }
            },
            {
                title: t('自定义别名'),
                key: 'customCodes',
                scopedSlots: { customRender: 'customCodesSlot' }
            },
            {
                title: t('操作'),
                key: 'action',
                width: '100px',
                align: 'center',
                scopedSlots: { customRender: 'actionSlot' }
            }
        ]"
        :data-source="countries"
        :row-key="'id'"
        size="middle"
        :pagination="false" 
        :loading="isLoading" 
        class="celled-table"
    >
        <!-- 内置别名 -->
        <template slot="codesSlot" slot-scope="{ text, record }">
            <div v-if="record.codes.length > 0">
                <span v-for="code in record.codes" class="ui label basic small" :key="code">{{code}}</span>
            </div>
            <span v-else class="disabled">{{t('无')}}</span>
        </template>
        
        <!-- 自定义名称 -->
         <template slot="customNameSlot" slot-scope="{ text, record }">
             <span v-if="record.customName.length > 0">{{record.customName}}</span>
             <span v-else class="disabled">{{t('暂无')}}</span>
         </template>
        
        <!-- 自定义别名 -->
        <template slot="customCodesSlot" slot-scope="{ text, record }">
             <div v-if="record.customCodes.length > 0">
                <span v-for="code in record.customCodes" class="ui label basic small" :key="code">{{code}}</span>
            </div>
            <span v-else class="disabled">{{t('暂无')}}</span>
        </template>
        
        <!-- 操作 -->
        <template slot="actionSlot" slot-scope="{ text, record }">
             <a-button type="link" @click.prevent="updateCountry(record.id)">
                 <i class="pi pi-pen-to-square" style="font-size: 12px; padding: 4px;"></i> {{t('修改')}}
             </a-button>
        </template>
    </b-table>
</div>