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

const utils = useUtils()

const props = defineProps(["values", "v-values", "size", "maxlength", "name", "placeholder", "v-allow-empty", "validator"])

const {realValues, isUpdating, isAdding, index, value, isEditing} = (function () {
	let values = props.values;
	if (values == null) {
		values = [];
	}

	if (props.vValues != null && typeof props.vValues == "object") {
		values = props.vValues
	}

	return {
		"realValues": ref(values),
		"isUpdating": ref(false),
		"isAdding": ref(false),
		"index": ref(0),
		"value": ref(""),
		isEditing: ref(false)
	}
})()

const emits = defineEmits(["change"])

const valueRef = ref()

const create = function () {
	isAdding.value = true;
	setTimeout(function () {
		valueRef.value.focus();
	}, 200);
}

const update = function (_index) {
	cancel()
	isUpdating.value = true;
	index.value = _index;
	value.value = realValues.value[_index];
	setTimeout(function () {
		valueRef.value.focus();
	}, 200);
}

const confirm = function () {
	if (value.value.length == 0) {
		if (typeof (props.vAllowEmpty) != "boolean" || !props.vAllowEmpty) {
			return
		}
	}

	// validate
	if (typeof (props.validator) == "function") {
		let resp = props.validator.call(valueRef, value.value)
		if (typeof resp == "object") {
			if (typeof resp.isOk == "boolean" && !resp.isOk) {
				if (typeof resp.message == "string") {
					utils.warn(resp.message, function () {
						valueRef.value.focus();
					})
				}
				return
			}
		}
	}

	if (isUpdating.value) {
		realValues.value[index.value] = value.value
	} else {
		realValues.value.push(value.value);
	}
	cancel()
	emits("change", realValues.value)
}

const remove = function (index) {
	realValues.value.$remove(index)
	emits("change", realValues.value)
}

const cancel = function () {
	isUpdating.value = false;
	isAdding.value = false;
	value.value = "";
}

const updateAll = function (values) {
	realValues.value = values
}

const addValue = function (v) {
	realValues.value.push(v)
}

const startEditing = function () {
	isEditing.value = !isEditing.value
}

const allValues = function () {
	return realValues.value
}

defineExpose({
	updateAll,
	addValue,
	allValues
})

</script>

<template>
	<div>
		<div v-show="!isEditing && realValues.length > 0" class="label-group">
			<TLabel v-for="(value, index) in realValues" class="outlined">
				<span v-if="value.toString().length > 0">{{ value }}</span>
				<span v-if="value.toString().length == 0" class="disabled">[空]</span>
			</TLabel>
			<a href="" @click.prevent="startEditing" style="font-size: 0.8em; margin-left: 0.2em">[修改]</a>
		</div>
		<div v-show="isEditing || realValues.length == 0">
			<div v-if="realValues.length > 0" class="label-group">
				<TLabel v-for="(value, _index) in realValues" :class="{blue:_index == index && isUpdating}" outlined="">
					<span v-if="value.toString().length > 0">{{ value }}</span>
					<span v-if="value.toString().length == 0" class="disabled">[空]</span>
					<input type="hidden" :name="name" :value="value"/>
					&nbsp; <a href="" @click.prevent="update(_index)" title="修改"><i class="pi pi-pencil small"></i></a>&nbsp;
					<a href="" @click.prevent="remove(_index)" title="删除"><i class="pi pi-times small"></i></a>
				</TLabel>
				<TDivider></TDivider>
			</div>
			<!-- 添加|修改 -->
			<div v-if="isAdding || isUpdating">
				<div class="ui fields inline">
					<div class="ui field">
						<TInputText type="text" :size="size" :maxlength="maxlength" :placeholder="placeholder"
									v-model="value" ref="valueRef" @keyup.enter="confirm()" @keypress.enter.prevent="1"/>
					</div>
					<div class="ui field">
						<TButton secondary="" size="small" type="button" @click.prevent="confirm()">确定</TButton>
					</div>
					<div class="ui field">
						<a href="" @click.prevent="cancel()" title="取消"><i class="pi pi-times small"></i></a>
					</div>
				</div>
			</div>
			<div v-if="!isAdding && !isUpdating">
				<PlusButton size="small" type="button" @click.prevent="create()"></PlusButton>
			</div>
		</div>
	</div>
</template>

<style scoped>

</style>