<script setup>

import "@/lib/array.js"
import {inject, onMounted, ref} from "vue"
import TSelect from "@/components/ui/TSelect.vue";
import TOption from "@/components/ui/TOption.vue";

const Tea = inject("$Tea")

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

const emits = defineEmits(["change"])

const {levels, description, level} = (function () {
	let value = props.vValue
	if (value == null || value.length == 0) {
		value = "" // 不要给默认值，因为黑白名单等默认值均有不同
	}

	return {
		levels: ref([]),
		description: ref(""),
		level: ref(value)
	}
})()

const change = function () {
	emits("change")

	let l = levels.value.$find(function (k, v) {
		return v.code == level.value
	})
	if (l != null) {
		description.value = l.description
	} else {
		description.value = ""
	}
}

onMounted(() => {
	Tea.action("/ui/eventLevelOptions")
		.post()
		.success(function (resp) {
			levels.value = resp.data.eventLevels
			change()
		})
})


</script>

<template>
	<div>
		<TSelect name="eventLevel" v-model="level" @change="change">
			<TOption v-for="level in levels" :value="level.code">{{ level.name }}</TOption>
		</TSelect>
		<p class="comment">{{ description }}</p>
	</div>
</template>

<style scoped>
</style>
