<script setup>

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

const utils = useUtils()

const props = defineProps(["v-groups"])

const {groups} = (function () {
	let groups = props.vGroups
	if (groups == null) {
		groups = []
	}
	return {
		groups: ref(groups)
	}
})()

const selectGroup = function () {
	let groupIds = groups.value.map(function (v) {
		return v.id.toString()
	}).join(",")
	utils.popup("/servers/groups/selectPopup?selectedGroupIds=" + groupIds, {
		callback: function (resp) {
			groups.value.push(resp.data.group)
		}
	})
}

const addGroup = function () {
	utils.popup("/servers/groups/createPopup", {
		callback: function (resp) {
			groups.value = []
			groups.value.push(resp.data.group)
		}
	})
}

const removeGroup = function (index) {
	groups.value.$remove(index)
}

const groupIds = function () {
	return groups.value.map(function (v) {
		return v.id
	})
}


</script>

<template>
	<div>
		<div v-if="groups.length > 0" class="label-group">
			<TLabel outlined="" v-if="groups.length > 0" v-for="(group, index) in groups">
				<input type="hidden" name="groupIds" :value="group.id"/>
				{{ group.name }} &nbsp;<a href="" title="删除" @click.prevent="removeGroup(index)"><i class="icon remove"></i></a>
			</TLabel>
			<TDivider></TDivider>
		</div>
		<div class="flex gap-[40px]">
			<a href="" @click.prevent="selectGroup()">选择分组</a>
			<a href="" @click.prevent="addGroup()">添加分组</a>
		</div>
	</div>
</template>

<style scoped>
</style>
