{$layout}
{$template "menu"}

<second-menu>
    <menu-item :class="{active: selectedType == 'isp'}" @click.prevent="selectRouteType('isp')">{{t('ns_routes_internal@运营商')}}</menu-item>
    <menu-item :class="{active: selectedType == 'chinaProvince'}" @click.prevent="selectRouteType('chinaProvince')">{{t('ns_routes_internal@中国省市')}}</menu-item>
    <menu-item :class="{active: selectedType == 'worldRegion'}" @click.prevent="selectRouteType('worldRegion')">{{t('ns_routes_internal@全球国家地区')}}</menu-item>
    <menu-item :class="{active: selectedType == 'agent'}" @click.prevent="selectRouteType('agent')">{{t('ns_routes_internal@搜索引擎')}}</menu-item>
</second-menu>

<!-- {{t('ns_routes_internal@运营商')}} -->
<div v-if="selectedType == 'isp'">
    <table class="ui table selectable celled" style="width: 30em">
        <thead>
            <tr>
                <th>{{t('ns_routes_internal@运营商Header')}}</th>
                <th>{{t('ns_routes_internal@代号Header')}}</th>
            </tr>
        </thead>
        <tr v-for="route in ispRoutes">
            <td>{{route.name}}</td>
            <td>{{route.code}}</td>
        </tr>
    </table>
</div>

<!-- {{t('ns_routes_internal@中国省市')}} -->
<div v-if="selectedType == 'chinaProvince'">
    <table class="ui table selectable celled" style="width: 30em">
        <thead>
            <tr>
                <th>{{t('ns_routes_internal@省市Header')}}</th>
                <th>{{t('ns_routes_internal@代号Header')}}</th>
            </tr>
        </thead>
        <tr v-for="route in chinaProvinceRoutes">
            <td>{{route.name}}</td>
            <td>{{route.code}}</td>
        </tr>
    </table>
</div>

<!-- {{t('ns_routes_internal@全球国家地区')}} -->
<div v-if="selectedType == 'worldRegion'">
    <table class="ui table selectable celled" style="width: 30em">
        <thead>
            <tr>
                <th>{{t('ns_routes_internal@国家地区Header')}}</th>
                <th>{{t('ns_routes_internal@代号Header')}}</th>
            </tr>
        </thead>
        <tr v-for="route in worldRegionRoutes">
            <td>{{route.name}}</td>
            <td>{{route.code}}</td>
        </tr>
    </table>
</div>

<!-- {{t('ns_routes_internal@搜索引擎')}} -->
<div v-if="selectedType == 'agent'">
    <div>
        <a href="/ns/routes/exportAgentIPs">{{t('ns_routes_internal@导出IPLink')}}</a> &nbsp; &nbsp;
        <a href="" @click.prevent="importAgentIPs">{{t('ns_routes_internal@导入IPLink')}}</a>
    </div>
    <table class="ui table selectable celled" style="width: 30em">
        <thead>
        <tr>
            <th>{{t('ns_routes_internal@搜索引擎Header')}}</th>
            <th>{{t('ns_routes_internal@代号Header')}}</th>
            <th>{{t('ns_routes_internal@IP数量Header')}}</th>
        </tr>
        </thead>
        <tr v-for="route in agentRoutes">
            <td>{{route.name}}</td>
            <td>{{route.code}}</td>
            <td>
                <span v-if="route.countIPs > 0">{{route.countIPs}}</span>
                <span v-else class="disabled">-</span>
            </td>
        </tr>
    </table>
    <p class="comment" v-if="hasEmptyAgents">{{t('ns_routes_internal@在集群开启监测搜索引擎后上表中没有IP的搜索引擎在访问智能DNS时会自动被记录')}}</p>
</div>