<script setup>
import PopupLayout from "@/layouts/PopupLayout.vue";
import ctxRef from "@/utils/ctx_ref.js";
import Context from "./selectProvincesPopup.js"
import TCheckboxBinary from "@/components/ui/TCheckboxBinary.vue";
import TButton from "@/components/ui/TButton.vue";

const ctx = ctxRef(new Context())

</script>

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

		<form>
			<table class="ui table">
				<tr>
					<td>
						<div class="h-10 relative">
							<div class="absolute right-1 top-1">
								<TCheckboxBinary v-model="ctx.isCheckingAll" @change="ctx.checkAll">全选</TCheckboxBinary>
							</div>
						</div>

						<div class="grid grid-cols-4 gap-3.5">
							<div v-for="province in ctx.provinces">
								<TCheckboxBinary v-model="province.isChecked" @change="ctx.selectProvince(province)">
									{{ province.name }}
								</TCheckboxBinary>
							</div>
						</div>
						<div class="clear"></div>
					</td>
				</tr>
			</table>
			<TButton type="button" @click.prevent="ctx.submit">确定</TButton>
		</form>
	</PopupLayout>
</template>

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