<script setup>

import "@/lib/array.js"
import useUtils from "@/utils/utils.js"
import {ref} from "vue"
import TButton from "@/components/ui/TButton.vue";
import TDivider from "@/components/ui/TDivider.vue";
import TLabel from "@/components/ui/TLabel.vue";

const utils = useUtils()

const props = defineProps(["v-type", "v-provinces"])

const emits = defineEmits(["change"])

const {listType, provinces} = (function () {
	let provinces = props.vProvinces
	if (provinces == null) {
		provinces = []
	}

	return {
		listType: ref(props.vType),
		provinces: ref(provinces)
	}
})()

const addProvince = function () {
	let selectedProvinceIds = provinces.value.map(function (province) {
		return province.id
	})
	utils.popup("/servers/server/settings/waf/ipadmin/selectProvincesPopup?type=" + listType.value + "&selectedProvinceIds=" + selectedProvinceIds.join(","), {
		width: "50em",
		height: "35em",
		callback: function (resp) {
			provinces.value = resp.data.selectedProvinces
			notifyChange()
		}
	})
}

const removeProvince = function (index) {
	provinces.value.$remove(index)
	notifyChange()
}

const resetProvinces = function () {
	provinces.value = []
	notifyChange()
}

const notifyChange = function () {
	emits("change", {
		"provinces": provinces.value
	})
}


</script>

<template>
	<div>
		<span v-if="provinces.length == 0" class="disabled">暂时没有选择<span v-if="listType =='allow'">允许</span><span v-else>封禁</span>的省份。</span>
		<div v-show="provinces.length > 0" class="label-group">
			<TLabel outlined="" v-for="(province, index) in provinces">
				<input type="hidden" :name="listType + 'ProvinceIds'" :value="province.id"/>
				{{ province.name }}
				<a href="" @click.prevent="removeProvince(index)" title="删除"><i class="icon remove"></i></a>
			</TLabel>
		</div>
		<TDivider></TDivider>
		<TButton type="button" secondary="" size="small" @click.prevent="addProvince">修改</TButton> &nbsp;
		<TButton type="button" secondary="" size="small" v-show="provinces.length > 0" @click.prevent="resetProvinces">清空</TButton>
	</div>
</template>

<style scoped>
</style>
