<script setup>

import "@/lib/array.js"
import {inject, onMounted, ref, watch} from "vue"
import TDivider from "@/components/ui/TDivider.vue";
import TLabel from "@/components/ui/TLabel.vue";
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";
import TButton from "@/components/ui/TButton.vue";
import PlusButton from "@/components/common/PlusButton.vue";

const Tea = inject("$Tea")

const props = defineProps(["v-routes", "name"])

const emits = defineEmits(["add", "cancel", "change", "change"])

const {
	routeCode,
	inputName,
	routes,
	provinces,
	provinceRouteCode,
	isAdding,
	routeType,
	selectedRoutes,
	supportChinaProvinceRoutes,
	supportISPRoutes,
	supportWorldRegionRoutes,
	supportAgentRoutes,
	supportPublicRoutes,
	publicCategories
} = (function () {
	let selectedRoutes = props.vRoutes
	if (selectedRoutes == null) {
		selectedRoutes = []
	}

	let inputName = props.name
	if (typeof inputName != "string" || inputName.length == 0) {
		inputName = "routeCodes"
	}

	return {
		routeCode: ref("default"),
		inputName: ref(inputName),
		routes: ref([]),

		provinces: ref({}),
		provinceRouteCode: ref(""),

		isAdding: ref(false),
		routeType: ref("default"),
		selectedRoutes: ref(selectedRoutes),

		supportChinaProvinceRoutes: ref(false),
		supportISPRoutes: ref(false),
		supportWorldRegionRoutes: ref(false),
		supportAgentRoutes: ref(false),
		supportPublicRoutes: ref(false),
		publicCategories: ref([])
	}
})()

const add = function () {
	isAdding.value = true
	routeType.value = "default"
	routeCode.value = "default"
	provinceRouteCode.value = ""
	emits("add")
}

const cancel = function () {
	isAdding.value = false
	emits("cancel")
}

const confirm = function () {
	if (routeCode.value.length == 0) {
		return
	}

	// route
	let selectedRoute = null
	for (const route of routes.value) {
		if (route.code == routeCode.value) {
			selectedRoute = route
			break
		}
	}

	if (selectedRoute != null) {
		// province route
		if (provinceRouteCode.value.length > 0 && provinces.value[routeCode.value] != null) {
			for (const province of provinces.value[routeCode.value]) {
				if (province.code == provinceRouteCode.value) {
					selectedRoute = {
						name: selectedRoute.name + "-" + province.name,
						code: province.code
					}
					break
				}
			}
		}

		selectedRoutes.value.push(selectedRoute)
	}

	emits("change", selectedRoutes.value)
	cancel()
}

const remove = function (index) {
	selectedRoutes.value.$remove(index)
	emits("change", selectedRoutes.value)
}

watch(routeType, function (v) {
	routeCode.value = ""
	routes.value.forEach(function (route) {
		if (route.type == v && routeCode.value.length == 0) {
			routeCode.value = route.code
		}
	})
})

onMounted(() => {
	Tea.action("/ns/routes/options")
		.post()
		.success(function (resp) {
			routes.value = resp.data.routes
			supportChinaProvinceRoutes.value = resp.data.supportChinaProvinceRoutes
			supportISPRoutes.value = resp.data.supportISPRoutes
			supportWorldRegionRoutes.value = resp.data.supportWorldRegionRoutes
			supportAgentRoutes.value = resp.data.supportAgentRoutes
			publicCategories.value = resp.data.publicCategories
			supportPublicRoutes.value = resp.data.supportPublicRoutes

			// provinces
			let _provinces = {}
			if (resp.data.provinces != null && resp.data.provinces.length > 0) {
				for (const province of resp.data.provinces) {
					let countryCode = province.countryCode
					if (typeof _provinces[countryCode] == "undefined") {
						_provinces[countryCode] = []
					}
					_provinces[countryCode].push({
						name: province.name,
						code: province.code
					})
				}
			}
			provinces.value = _provinces
		})
})

</script>

<template>
	<div>
		<div v-show="selectedRoutes.length > 0" class="label-group">
			<TLabel outlined="" v-for="(route, index) in selectedRoutes">
				<input type="hidden" :name="inputName" :value="route.code"/>
				{{ route.name }} &nbsp;
				<a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove small"></i></a>
			</TLabel>
			<TDivider></TDivider>
		</div>
		<div v-if="isAdding" style="margin-bottom: 1em">
			<table class="ui table definition">
				<tr>
					<td class="title">选择类型 *</td>
					<td>
						<TSelect v-model="routeType">
							<TOption value="default">[默认线路]</TOption>
							<TOption value="user">自定义线路</TOption>
							<optgroup label="---"></optgroup>
							<TOption value="isp" v-if="supportISPRoutes">运营商</TOption>
							<TOption value="china" v-if="supportChinaProvinceRoutes">中国省市</TOption>
							<TOption value="world" v-if="supportWorldRegionRoutes">全球国家地区</TOption>
							<TOption value="agent" v-if="supportAgentRoutes">搜索引擎</TOption>
							<optgroup label="---" v-if="publicCategories.length > 0"></optgroup>
							<TOption v-for="category in publicCategories" :value="category.type">{{ category.name }}</TOption>
						</TSelect>
					</td>
				</tr>
				<tr>
					<td>选择线路 *</td>
					<td>
						<TSelect v-model="routeCode">
							<template v-for="route in routes">
								<TOption :value="route.code" v-if="route.type == routeType">{{ route.name }}</TOption>
							</template>
						</TSelect>
					</td>
				</tr>
				<tr v-if="routeCode.length > 0 && provinces[routeCode] != null">
					<td>选择省/州</td>
					<td>
						<TSelect v-model="provinceRouteCode">
							<TOption value="">[全域]</TOption>
							<TOption v-for="province in provinces[routeCode]" :value="province.code">{{ province.name }}</TOption>
						</TSelect>
					</td>
				</tr>
			</table>
			<div>
				<TButton secondary="" type="button" size="small" @click.prevent="confirm">确定</TButton>
				&nbsp; <a href="" title="取消" @click.prevent="cancel">取消</a>
			</div>
		</div>
		<PlusButton type="button" @click.prevent="add" v-if="!isAdding"></PlusButton>
		<p class="comment" v-if="!supportISPRoutes || !supportChinaProvinceRoutes || !supportWorldRegionRoutes || !supportPublicRoutes">由于套餐限制，当前用户只能使用部分线路。</p>
	</div>
</template>

<style scoped>
</style>