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

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

<form class="ui form" action="/settings/ip-library/provinces">
    <div class="ui fields inline">
        <div class="ui field">
            <combo-box :v-items="countries" name="countryId" :v-value="countryId" :placeholder="t('国家/地区')"></combo-box>
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">{{t('搜索')}}</button>
        </div>
    </div>
</form>

<b-empty v-if="!isLoading && provinces.length == 0">{{t('暂时还没有省份/州。')}}</b-empty>

<p class="ui basic message" v-if="provinces.length > 0">{{t('共 {0} 个省份/州。', [provinces.length])}}</p>

<div class="table-box">
    <b-table
        v-if="provinces.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="provinces"
        :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="updateProvince(record.id)">
                <i class="pi pi-pen-to-square" style="font-size: 12px; padding: 4px;"></i> {{t('修改')}}
            </a-button>
        </template>
    </b-table>
</div>