<script setup>
// Copyright 2024 FlexCDN root@flexcdn.cn. All rights reserved. Official site: https://flexcdn.cn .

import ctxRef from "@/utils/ctx_ref.js"
import Context from "./internal.js"
import Menu from "@/views/ns/routes/@menu.vue";
import ListTable from "@/components/common/ListTable.vue";
import TColumn from "@/components/ui/TColumn.vue";
import Navbar from "@/components/common/Navbar.vue";
import NavTab from "@/components/common/NavTab.vue";

const ctx = ctxRef(new Context())

</script>

<template>
	<Menu :ctx="ctx"></Menu>

	<Navbar secondary>
		<template #tabs>
			<NavTab @click.prevent="ctx.selectRouteType('isp')" name="运营商" active></NavTab>
			<NavTab @click.prevent="ctx.selectRouteType('chinaProvince')" name="中国省市"></NavTab>
			<NavTab @click.prevent="ctx.selectRouteType('worldRegion')" name="全球国家地区"></NavTab>
			<NavTab @click.prevent="ctx.selectRouteType('agent')" name="搜索引擎"></NavTab>
			<NavTab separator v-if="ctx.publicCategories.length > 0"></NavTab>
			<NavTab v-for="category in ctx.publicCategories" @click.prevent="ctx.selectRouteType('category:' + category.id)" :value="'category' + category.id">
				<template #name>
					{{ category.name }}
				</template>
			</NavTab>
		</template>
	</Navbar>

	<!-- 运营商 -->
	<div v-if="ctx.selectedType == 'isp'">
		<ListTable :items="ctx.ispRoutes" style="width: 30em">
			<TColumn header="运营商">
				<template #body="{data: route}">
					{{ route.name }}
				</template>
			</TColumn>
			<TColumn header="代号">
				<template #body="{data: route}">
					{{ route.code }}
				</template>
			</TColumn>
		</ListTable>
	</div>

	<!-- 中国省市 -->
	<div v-if="ctx.selectedType == 'chinaProvince'">
		<ListTable :items="ctx.chinaProvinceRoutes" style="width: 30em">
			<TColumn header="省市">
				<template #body="{data: route}">
					{{ route.name }}
				</template>
			</TColumn>
			<TColumn header="代号">
				<template #body="{data: route}">
					{{ route.code }}
				</template>
			</TColumn>
		</ListTable>
	</div>

	<!-- 全球国家地区 -->
	<div v-if="ctx.selectedType == 'worldRegion'">
		<ListTable :items="ctx.worldRegionRoutes" style="width: 30em">
			<TColumn header="国家/地区">
				<template #body="{data: route}">
					{{ route.name }}
				</template>
			</TColumn>
			<TColumn header="代号">
				<template #body="{data: route}">
					{{ route.code }}
				</template>
			</TColumn>
		</ListTable>
	</div>

	<!-- 搜索引擎 -->
	<div v-if="ctx.selectedType == 'agent'">
		<ListTable :items="ctx.agentRoutes" style="width: 30em">
			<TColumn header="搜索引擎">
				<template #body="{data: route}">
					{{ route.name }}
				</template>
			</TColumn>
			<TColumn header="代号">
				<template #body="{data: route}">
					{{ route.code }}
				</template>
			</TColumn>
		</ListTable>
	</div>

	<!-- 官方分类 -->
	<div v-if="ctx.selectedType.startsWith('category:')">
		<ListTable :items="ctx.categoryRoutes" style="width: 30em">
			<TColumn header="线路名">
				<template #body="{data: route}">
					{{ route.name }}
				</template>
			</TColumn>
			<TColumn header="代号">
				<template #body="{data: route}">
					{{ route.code }}
				</template>
			</TColumn>
		</ListTable>
	</div>
</template>

<style lang="postcss" scoped>
</style>