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

<b-steps :steps="[
    {label: t('设置数据格式'), key: STEP_TEMPLATE},
    {label: t('上传文件'), key: STEP_UPLOAD},
    {label: t('处理国家/地区'), key: STEP_COUNTRY},
    {label: t('处理省份/州'), key: STEP_PROVINCE},
    {label: t('处理城市/市'), key: STEP_CITY},
    {label: t('处理县/区'), key: STEP_TOWN},
    {label: t('处理ISP运营商'), key: STEP_PROVIDER},
    {label: t('完成'), key: STEP_FINISH}
]" :current="step"></b-steps>

<!-- 设置件格式 -->
<div v-show="step == STEP_TEMPLATE">
    <form class="ui form">
        <div class="config-section">
            <div class="section-title">{{t('设置数据格式')}}</div>
            <div class="config-item">
                <div class="item-label">{{t('IP库名称')}} *</div>
                <div class="item-content">
                    <input type="text" name="" v-model="libraryName" ref="libraryName" maxlength="50" v-show="libraryFileId == 0" :placeholder="t('例如：我的自定义IP库')"/>
                    <span v-if="libraryFileId > 0">{{libraryName}}</span>
                    <p class="comment">{{t('给当前IP库起一个容易识别的名称。')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('数据格式模板')}} *</div>
                <div class="item-content">
                    <input type="text" name="" v-model="rowTemplate" ref="rowTemplate" v-show="libraryFileId == 0" :placeholder="t('例如：{0}', ['${ipFrom}|${ipTo}|${country}|${province}|${city}|${provider}'])"/>
                    <span v-if="libraryFileId > 0">{{rowTemplate}}</span>
                    <p class="comment">{{t('只支持纯文本Tips')}}<code-label>${ipFrom}</code-label>{{t('表示开始IP，IPv4和IPv6均支持，')}}<code-label>${ipTo}</code-label>{{t('表示结束IP，')}}<code-label>${country}</code-label>{{t('表示国家/地区，')}}<code-label>${province}</code-label>{{t('表示省份/州，')}}<code-label>${city}</code-label>{{t('表示城市/市级单位，')}}<code-label>${town}</code-label>{{t('表示区县（暂时不处理），')}}<code-label>${provider}</code-label>{{t('表示ISP运营商，')}}<code-label>${any}</code-label>{{t('表示不需要识别的内容。')}}<a href="" @click.prevent="formatIP2Region()">[{{t('IP2Region示例')}}]</a> &nbsp;<a href="" @click.prevent="formatIP138()">[{{t('IP138示例')}}]</a> </p>
                </div>
            </div>
            <div class="config-item" v-show="rowTemplate.length > 0 && libraryFileId == 0">
                <div class="item-label">{{t('数据格式分析测试')}}</div>
                <div class="item-content">
                    <input type="text" name="" v-model="formatTestText" :placeholder="t('单行测试数据')" @input="changeFormatTestText" @keyup.enter="testFormat()" @keypress.enter.prevent="1"/>
                    <p class="comment"><a href="" @click.prevent="testFormat">[{{t('执行测试')}}]</a>
                        <span v-if="formatTestResult.length > 0" class="green">&nbsp; &nbsp; {{t('测试成功：')}}{{formatTestResult}}</span>
                    </p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('空值列表')}}</div>
                <div class="item-content">
                    <values-box ref="emptyValues" :v-values="emptyValues" v-show="libraryFileId == 0"></values-box>
                    <span v-for="emptyValue in emptyValues" class="ui label basic small" v-show="libraryFileId > 0" :key="emptyValue">{{emptyValue}}</span>
                    <p class="comment">{{t('内容中如果有这些值，表示没有填写；比如如果空值是')}}<code-label>0</code-label>，{{t('那么')}}<code-label>字段1|0|字段2|0</code-label>{{t('中只有')}}<code-label>字段1</code-label>、<code-label>字段2</code-label>{{t('两个信息是有效的。')}}</p>
                </div>
            </div>
            <div class="config-item">
                <div class="item-label">{{t('密码')}}</div>
                <div class="item-content">
                    <input type="password" maxlength="32"  name="password" v-model="password" :placeholder="t('可选，如果IP库文件有密码保护')"/>
                </div>
            </div>
        </div>
        <a-button @click.prevent="templateGoNext">{{t('下一步')}}</a-button>
    </form>
</div>

<!-- 上传文件 -->
<div v-show="step == STEP_UPLOAD">
    <form class="ui form">
         <div class="config-section">
            <div class="section-title">{{t('上传数据文件')}}</div>
             <div class="config-item">
                <div class="item-label" style="flex-shrink: 0;">{{t('选择数据文件')}} *</div>
                <div class="item-content">
                    <file-upload accept="text/plain, .txt" ref="dataFile" />
                    <p class="comment">{{t('只支持纯文本Tips')}}</p>
                </div>
            </div>
        </div>
        <div class="margin"></div>
        <a-button @click.prevent="upload" :disabled="isUploading">{{ isUploading ? t('正在上传并分析中') : t('开始分析') }}</a-button>
        <a-button @click.prevent="goStep(STEP_TEMPLATE)" :disabled="isUploading">{{t('上一步')}}</a-button>
    </form>
</div>

<!-- 处理国家/地区 -->
<div v-show="step == STEP_COUNTRY">
    <b-empty v-if="!isLoadingCountries && missingCountries.length == 0 && missingCountriesLoaded">{{t('暂时没有需要处理的国家/地区。')}}</b-empty>

    <div v-if="missingCountries.length > 0 && missingCountriesLoaded">
        <p class="comment">{{t('以下如无任何可以进行的操作，请直接进入下一步。')}}</p>
        <b-table
            :columns="countryColumns"
            :data-source="missingCountries"
            :row-key="'countryName'"
            :loading="isLoadingCountries"
            :pagination="false"
            class="celled-table"
            size="small"
        >
             <!-- 问题列 -->
             <template slot="problemSlot" slot-scope="{ text, record }">
                <strong>"{{record.countryName}}"</strong> {{t('没有录入数据库')}}
                 <div v-if="record.similarCountries.length > 0">
                    <div class="ui divider"></div>
                    {{t('我们发现了以下类似国家/地区，如果有相同的国家/地区，请选择：')}}
                    <div style="margin-top: 0.5em">
                        <a href="" v-for="country in record.similarCountries" :key="country.id" class="ui label basic small" @click.prevent="addCountryCustomCode(country, record.countryName)">{{country.displayName}}</a>
                    </div>
                </div>
             </template>
        </b-table>
        <div class="margin"></div>
    </div>
    <div class="margin"></div>

    <a-button @click.prevent="goStep(STEP_PROVINCE)">{{t('下一步')}}</a-button>
    <a-button @click.prevent="reloadCountries">{{t('刷新')}}</a-button>
</div>

<!-- 处理省份/州 -->
<div v-show="step == STEP_PROVINCE">
    <b-empty v-if="!isLoadingProvinces && missingProvinces.length == 0 && missingProvincesLoaded">{{t('暂时没有需要处理的省份/州。')}}</b-empty>

    <div v-if="missingProvinces.length > 0 && missingProvincesLoaded">
        <p class="comment">{{t('以下如无任何可以进行的操作，请直接进入下一步。')}}</p>
        <b-table
            :columns="provinceColumns"
            :data-source="missingProvinces"
            :row-key="record => record.countryName + '_' + record.provinceName"
            :loading="isLoadingProvinces"
            :pagination="false"
            class="celled-table"
            size="small"
        >
             <!-- 问题列 -->
             <template slot="problemSlot" slot-scope="{ text, record }">
                 <strong>"{{record.countryName}} - {{record.provinceName}}"</strong> {{t('没有录入数据库')}}
                <div v-if="record.similarProvinces.length > 0">
                    <div class="ui divider"></div>
                    {{t('我们发现了以下类似省份/州，如果有相同的省份/州，请选择：')}}
                    <div style="margin-top: 0.5em">
                        <a href="" v-for="province in record.similarProvinces" :key="province.id" class="ui label basic small" @click.prevent="addProvinceCustomCode(province, record.provinceName)">{{province.displayName}}</a>
                    </div>
                </div>
             </template>
        </b-table>
        <div class="margin"></div>
    </div>
    <div class="margin"></div>
    <a-button @click.prevent="goStep(STEP_CITY)">{{t('下一步')}}</a-button>
    <a-button @click.prevent="reloadProvinces">{{t('刷新')}}</a-button>
    <a-button @click.prevent="goStep(STEP_COUNTRY)">{{t('上一步')}}</a-button>
</div>

<!-- 处理城市/市 -->
<div v-show="step == STEP_CITY">
    <b-empty v-if="!isLoadingCities && missingCities.length == 0 && missingCitiesLoaded">{{t('暂时没有需要处理的城市/市。')}}</b-empty>

    <div v-if="missingCities.length > 0 && missingCitiesLoaded">
        <p class="comment">{{t('以下如无任何可以进行的操作，请直接进入下一步。每次最多显示{0}条。', [sizePerPage])}}</p>
        <b-table
            :columns="cityColumns"
            :data-source="missingCities"
            :row-key="record => record.countryName + '_' + record.provinceName + '_' + record.cityName"
            :loading="isLoadingCities"
            :pagination="false"
            class="celled-table"
            size="small"
        >
             <!-- 问题列 -->
             <template slot="problemSlot" slot-scope="{ text, record }">
                <strong>"{{record.countryName}} - {{record.provinceName}} - {{record.cityName}}"</strong> {{t('没有录入数据库')}}
                <div v-if="record.similarCities.length > 0">
                    <div class="ui divider"></div>
                    {{t('我们发现了以下类似城市/市，如果有相同的城市/市，请选择：')}}
                    <div style="margin-top: 0.5em">
                        <a href="" v-for="city in record.similarCities" :key="city.id" class="ui label basic small" @click.prevent="addCityCustomCode(city, record.cityName)">{{city.displayName}}</a>
                    </div>
                </div>
             </template>
        </b-table>
        <div class="margin"></div>
    </div>
    <div class="margin"></div>

    <a-button @click.prevent="goStep(STEP_TOWN)">{{t('下一步')}}</a-button>
    <a-button @click.prevent="reloadCities">{{t('刷新')}}</a-button>
    <a-button @click.prevent="goStep(STEP_PROVINCE)">{{t('上一步')}}</a-button>
</div>

<!-- 处理区/县 -->
<div v-show="step == STEP_TOWN">
    <b-empty v-if="!isLoadingTowns && missingTowns.length == 0 && missingTownsLoaded">{{t('暂时没有需要处理的区/县。')}}</b-empty>

    <div v-if="missingTowns.length > 0 && missingTownsLoaded">
        <p class="comment">{{t('以下如无任何可以进行的操作，请直接进入下一步。每次最多显示{0}条。', [sizePerPage])}}</p>
        <b-table
            :columns="townColumns"
            :data-source="missingTowns"
            :row-key="record => record.countryName + '_' + record.provinceName + '_' + record.cityName + '_' + record.townName"
            :loading="isLoadingTowns"
            :pagination="false"
            class="celled-table"
            size="small"
        >
             <!-- 问题列 -->
             <template slot="problemSlot" slot-scope="{ text, record }">
                <strong>"{{record.countryName}} - {{record.provinceName}} - {{record.cityName}} - {{record.townName}}"</strong> {{t('没有录入数据库')}}
                <div v-if="record.similarTowns.length > 0">
                    <div class="ui divider"></div>
                    {{t('我们发现了以下类似区/县，如果有相同的区/县，请选择：')}}
                    <div style="margin-top: 0.5em">
                        <a href="" v-for="town in record.similarTowns" :key="town.id" class="ui label basic small" @click.prevent="addTownCustomCode(town, record.townName)">{{town.displayName}}</a>
                    </div>
                </div>
             </template>
        </b-table>
        <div class="margin"></div>
    </div>
    <div class="margin"></div>

    <a-button @click.prevent="goStep(STEP_PROVIDER)">{{t('下一步')}}</a-button>
    <a-button @click.prevent="reloadTowns">{{t('刷新')}}</a-button>
    <a-button @click.prevent="goStep(STEP_CITY)">{{t('上一步')}}</a-button>
</div>

<!-- 处理ISP运营商 -->
<div v-show="step == STEP_PROVIDER">
     <b-empty v-if="!isLoadingProviders && missingProviders.length == 0 && missingProvidersLoaded">{{t('暂时没有需要处理的ISP运营商。')}}</b-empty>

    <div v-if="missingProviders.length > 0 && missingProvidersLoaded">
        <p class="comment">{{t('以下如无任何可以进行的操作，请直接进入下一步。')}}</p>
        <b-table
            :columns="providerColumns"
            :data-source="missingProviders"
            :row-key="'providerName'"
            :loading="isLoadingProviders"
            :pagination="false"
            class="celled-table"
            size="small"
        >
            <!-- 问题列 -->
             <template slot="problemSlot" slot-scope="{ text, record }">
                <strong>"{{record.providerName}}"</strong> {{t('没有录入数据库')}}
                <div v-if="record.similarProviders.length > 0">
                    <div class="ui divider"></div>
                    {{t('我们发现了以下类似ISP运营商，如果有相同的ISP运营商，请选择：')}}
                    <div style="margin-top: 0.5em">
                        <a href="" v-for="provider in record.similarProviders" :key="provider.id" class="ui label basic small" @click.prevent="addProviderCustomCode(provider, record.providerName)">{{provider.displayName}}</a>
                    </div>
                </div>
             </template>
        </b-table>
        <div class="margin"></div>
    </div>
    <div class="margin"></div>

    <a-button @click.prevent="goStep(STEP_FINISH)">{{t('下一步')}}</a-button>
    <a-button @click.prevent="reloadProviders">{{t('刷新')}}</a-button>
    <a-button @click.prevent="goStep(STEP_TOWN)">{{t('上一步')}}</a-button>
</div>

<!-- 完成 -->
<div v-show="step == STEP_FINISH">
    <p>{{t('现在可以确认完成当前IP库的上传了，后期仍然可以修改国家/地区、省份/州、城市/市、区/县、ISP运营商等信息。')}}</p>
    <a-button @click.prevent="finish" :disabled="isFinishing">{{ isFinishing ? t('正在完成最后操作') : t('确认完成') }}</a-button>
    <a-button @click.prevent="goStep(STEP_PROVIDER)">{{t('上一步')}}</a-button>
</div>