<script setup>
import "@/lib/array.js"
import {ref} from "vue";
import useUtils from "@/utils/utils.js";
import TLabel from "@/components/ui/TLabel.vue";
import TDivider from "@/components/ui/TDivider.vue";
import PlusButton from "@/components/common/PlusButton.vue";

const props = defineProps({
	"v-provinces": Array
})
const emits = defineEmits(["update:modelValue"])
const utils = useUtils()

let propProvinces = props.vProvinces
if (propProvinces == null) {
	propProvinces = []
}
let propProvinceIds = propProvinces.$map(function (k, v) {
	return v.id
})

const provinces = ref(propProvinces)
const provinceIds = ref(propProvinceIds)

const add = function () {
	let provinceStringIds = provinceIds.value.map(function (v) {
		return v.toString()
	})
	utils.popup("/ui/selectProvincesPopup?provinceIds=" + provinceStringIds.join(","), {
		width: "48em",
		callback: function (resp) {
			provinces.value = resp.data.provinces
			change()
		}
	})
}
const remove = function (index) {
	provinces.value.$remove(index)
	change()
}
const change = function () {
	provinceIds.value = provinces.value.$map(function (k, v) {
		return v.id
	})
	emits("update:modelValue", JSON.stringify(provinceIds.value))
}
</script>

<template>
	<div>
		<input type="hidden" name="provinceIdsJSON" :value="JSON.stringify(provinceIds)"/>
		<div v-if="provinces.length > 0" style="margin-bottom: 0.5em" class="flex flex-wrap gap-2">
			<TLabel v-for="(province, index) in provinces" outlined="">{{ province.name }} <a href=""
																							  title="删除"
																							  @click.prevent="remove(index)"><i
				class="pi pi-remove"></i></a></TLabel>
			<TDivider></TDivider>
		</div>
		<div>
			<PlusButton size="small" type="button" @click.prevent="add"></PlusButton>
		</div>
	</div>
</template>

<style scoped>

</style>