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

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

<form class="ui form" method="get" action="/settings/ip-library/towns">
    <div class="ui fields inline">
        <div class="ui field">
            <combo-box name="countryId" :v-items="countries" :v-value="countryId" @change="changeCountry" :placeholder="t('国家/地区')"></combo-box>
        </div>
        <div class="ui field">
            <combo-box name="provinceId" :data-url="'/settings/ip-library/towns/provinceOptions?countryId=' + countryId" data-key="provinces" :v-value="provinceId" ref="provinceOptionsRef" @change="changeProvince" :placeholder="t('省份/州')"></combo-box>
        </div>
        <div class="ui field">
            <combo-box name="cityId" :data-url="'/settings/ip-library/towns/cityOptions?provinceId=' + provinceId" data-key="cities" :v-value="cityId" ref="cityOptionsRef" :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 && towns.length == 0">{{t('暂时还没有区/县。')}}</b-empty>

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

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