<script setup>
import PopupLayout from "@/layouts/PopupLayout.vue";
import ctxRef from "@/utils/ctx_ref.js";
import Context from "./selectCountriesPopup.js"
import TButton from "@/components/ui/TButton.vue";
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import SearchBox from "@/components/common/SearchBox.vue";
import {ref} from "vue";
import TDivider from "@/components/ui/TDivider.vue";

const searchBox = ref()
const ctx = ctxRef(new Context(), {
	refs: {searchBox}
})

</script>

<template>
	<PopupLayout>
		<header v-if="ctx.type == 'allow'">选择允许的区域</header>
		<header v-if="ctx.type == 'deny'">选择封禁的区域</header>

		<form>
			<div class="relative">
				<div class="flex flex-wrap gap-4 mr-20">
					<a class="menu-item" href="" v-for="group in ctx.letterGroups" :class="{active: group.code == ctx.selectedGroup, disabled: group.countMatched == 0}" @click.prevent="ctx.selectGroup(group)">{{ group.code }}<span v-if="group.count > 0" class="count">&nbsp;({{ group.count }})</span></a>
				</div>
				<div class="absolute right-1 top-0.5">
					<TCheckboxBinary v-model="ctx.isCheckingAll" @change="ctx.checkAll">全选</TCheckboxBinary>
				</div>
				<TDivider></TDivider>
			</div>
			<div class="mt-4">
				<div v-for="group in ctx.letterGroups">
					<div v-if="group.code == ctx.commonGroupName && group.code == ctx.selectedGroup">
						<div class="grid grid-cols-4 gap-3.5">
							<div v-for="country in ctx.letterCountries[ctx.commonGroupName]">
								<TCheckboxBinary v-model="country.isChecked" @change="ctx.selectCountry(country)">
									<span :class="{blue: country.isMatched}">{{ country.name }}</span>
								</TCheckboxBinary>
							</div>
						</div>
					</div>
					<div v-else>
						<template v-for="letter in group.code">
							<div v-if="ctx.letterCountries[letter] != null && group.code == ctx.selectedGroup" class="country-group">
								<h5>{{ letter }}</h5>
								<div class="grid grid-cols-4 gap-2">
									<div v-for="country in ctx.letterCountries[letter]">
										<TCheckboxBinary v-model="country.isChecked" @change="ctx.selectCountry(country)">
											<span :class="{blue: country.isMatched}">{{ country.name }}</span>
										</TCheckboxBinary>
									</div>
								</div>
							</div>
						</template>
					</div>
				</div>
			</div>

			<div class="mt-4 relative">
				<div>
					<TButton @click.prevent="ctx.submit">确定</TButton>
				</div>
				<div class="absolute right-1 top-2" v-show="!ctx.searchBoxVisible">
					<a href="" @click.prevent="ctx.showSearchBox"><i class="icon search"></i></a>
				</div>
				<div class="absolute right-1 top-2" v-show="ctx.searchBoxVisible">
					<SearchBox placeholder="关键词" ref="searchBox" @change="ctx.changeKeyword"></SearchBox>
				</div>
			</div>
		</form>
	</PopupLayout>
</template>

<style lang="postcss" scoped>
.menu-item:not(.active) {
	color: var(--p-text-color);
}
</style>