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

<div class="ui segment">
    <h3>IP库测试</h3>
    <p class="comment">输入IP地址测试当前使用的IP库是否能正确查询地理位置信息</p>

    <form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
        <csrf-token></csrf-token>
        <table class="ui table definition">
            <tr>
                <td class="title">MaxMind文件状态</td>
                <td>
                    <div v-if="usingMaxMind">
                        <span v-if="maxMindCityExists" class="green">✓ City数据库已上传</span>
                        <span v-else-if="usingEmbeddedMaxMind" class="green">✓ City数据库（使用嵌入的默认库）</span>
                        <span v-else class="red">✗ City数据库未上传</span>
                        <br/>
                        <span v-if="maxMindASNExists" class="green">✓ ASN数据库已上传</span>
                        <span v-else class="grey">- ASN数据库未上传（可选）</span>
                        <p class="comment green">✓ 当前正在使用MaxMind GeoIP2数据库</p>
                    </div>
                    <div v-else>
                        <span v-if="maxMindCityExists" class="green">✓ City数据库已上传</span>
                        <span v-else class="red">✗ City数据库未上传</span>
                        <br/>
                        <span v-if="maxMindASNExists" class="green">✓ ASN数据库已上传</span>
                        <span v-else class="grey">- ASN数据库未上传（可选）</span>
                        <p class="comment">如果已上传MaxMind文件，系统会优先使用MaxMind库。如果没有上传，系统会使用嵌入的默认MaxMind库。</p>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="title">IP地址 *</td>
                <td>
                    <input type="text" name="ip" class="text" maxlength="100" ref="focus" placeholder="例如：8.8.8.8" v-model="ip"/>
                    <p class="comment">输入要测试的IP地址，例如：8.8.8.8（Google DNS，美国）、114.114.114.114（中国DNS）、202.96.0.20（中国北京联通）</p>
                </td>
            </tr>
        </table>

        <div class="ui divider"></div>

        <button type="submit" class="ui button primary">测试查询</button>
    </form>

    <!-- 查询结果显示区域 -->
    <div class="ui segment" v-if="result.isDone" ref="resultBox" style="margin-top: 2em;">
        <h4>查询结果</h4>
        <div v-if="!result.isOk" class="ui message error">
            <strong>查询失败：</strong>{{result.error}}
        </div>
        <div v-if="result.isOk">
            <div class="ui message success">
                <strong>IP地址：</strong>{{result.ip}}<br/>
                <strong>IP库类型：</strong>{{result.libraryType}}
                <span v-if="result.libraryVersion"> (版本 {{result.libraryVersion}})</span>
            </div>
            <table class="ui table definition">
                <tr>
                    <td class="title" style="width: 150px;">国家</td>
                    <td>
                        <strong>{{result.country || '-'}}</strong>
                        <span v-if="result.countryId > 0" class="grey"> (ID: {{result.countryId}})</span>
                    </td>
                </tr>
                <tr>
                    <td class="title">省份</td>
                    <td>
                        <strong>{{result.province || '-'}}</strong>
                        <span v-if="result.provinceId > 0" class="grey"> (ID: {{result.provinceId}})</span>
                    </td>
                </tr>
                <tr>
                    <td class="title">城市</td>
                    <td>
                        <strong>{{result.city || '-'}}</strong>
                        <span v-if="result.cityId > 0" class="grey"> (ID: {{result.cityId}})</span>
                    </td>
                </tr>
                <tr>
                    <td class="title">区县</td>
                    <td>
                        <strong>{{result.town || '-'}}</strong>
                        <span v-if="result.townId > 0" class="grey"> (ID: {{result.townId}})</span>
                    </td>
                </tr>
                <tr>
                    <td class="title">ISP/运营商</td>
                    <td>
                        <strong>{{result.provider || '-'}}</strong>
                        <span v-if="result.providerId > 0" class="grey"> (ID: {{result.providerId}})</span>
                    </td>
                </tr>
                <tr v-if="result.regionSummary">
                    <td class="title">区域摘要</td>
                    <td>{{result.regionSummary}}</td>
                </tr>
                <tr v-if="result.summary">
                    <td class="title">完整摘要</td>
                    <td>{{result.summary}}</td>
                </tr>
            </table>
            <div class="ui message" v-if="result.libraryType == 'MaxMind GeoIP2'" style="margin-top: 1em;">
                <i class="icon check circle green"></i> 当前使用的是MaxMind GeoIP2数据库，IP库已成功替换！
            </div>
            <div class="ui message warning" v-else style="margin-top: 1em;">
                <i class="icon warning circle"></i> 当前使用的是默认IP库。如果已上传MaxMind文件，请重启服务后再次测试。
            </div>
        </div>
    </div>
</div>