<template>
	<div class="form-classify">
		<cl-svg name="add" class="btn-icon is-rt" @click="add()" />

		<div class="list">
			<div class="textarea-item" v-for="(item, index) in list" :key="index">
				<cl-svg name="delete" class="btn-icon" @click="remove(index)"></cl-svg>

				<el-input
					type="textarea"
					v-model="list[index]"
					placeholder="输入你的主题内容"
					:autosize="{
						minRows: 2,
						maxRows: 4
					}"
					resize="none"
				/>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="node-problem-form-classify">
import { useModel, watch, type PropType, onMounted } from "vue";
import { useFlow } from "/$/flow/hooks";

const props = defineProps({
	modelValue: {
		type: Array as PropType<string[]>,
		default: () => []
	}
});

const flow = useFlow();
const list = useModel(props, "modelValue");

// 添加
function add() {
	list.value.push("");
}

// 删除
function remove(index: number) {
	list.value.splice(index, 1);

	// handle删了，线同步删除
	const edge = flow.edges.find(
		(e) => e.source == flow.node?.id && e.sourceHandle == `source-${index}`
	);
	if (edge) {
		flow.removeEdges(edge);
	}
}

onMounted(() => {
	watch(
		list,
		(arr) => {
			if (flow.node) {
				flow.node.handle!.next = arr.map((_, i) => {
					return {
						label: `分类 ${i + 1}`,
						value: `source-${i}`
					};
				});
			}
		},
		{
			immediate: true,
			deep: true
		}
	);
});
</script>

<style lang="scss" scoped>
.form-classify {
	.list {
		.textarea-item {
			padding-top: 8px !important;

			.btn-icon {
				position: absolute;
				right: 8px;
				top: 8px;
				z-index: 9;
				background-color: var(--el-bg-color);
			}
		}
	}
}
</style>
