<template>
	<el-aside class="panel">
		<el-scrollbar>
			<el-tabs v-model="activeName" stretch>
				<el-tab-pane v-if="activeName==='line'" label="连线属性" name="line">
					<el-form :model="form" label-width="90px">
						<el-form-item label="连线ID" prop="id">
							<el-input v-model="form.id" disabled></el-input>
						</el-form-item>
						<el-form-item label="连线名称" prop="text">
							<el-input v-model="form.text" @input="onInput"/>
						</el-form-item>
					</el-form>
				</el-tab-pane>
				<el-tab-pane v-else-if="activeName==='node'" label="节点属性" name="node">
					<el-form :model="form" label-width="90px">
						<el-form-item label="节点ID" prop="id">
							<el-input v-model="form.id" disabled></el-input>
						</el-form-item>
						<el-form-item label="节点名称" prop="text">
							<el-input v-model="form.text" @input="onInput"/>
						</el-form-item>
					</el-form>
				</el-tab-pane>
				<el-tab-pane v-else label="流程设置" name="flow">
				</el-tab-pane>
			</el-tabs>
		</el-scrollbar>
	</el-aside>
</template>

<script setup>
import {ref, watch} from "vue"
import LogicFlow from "@logicflow/core";

const props = defineProps({
	node: {type: Object, default: {}},
	lf: {type: LogicFlow}
})
const activeName = ref('node')
const form = ref({
	id: null,
	text: null
})

watch(() => props.node, () => {
	changeActive()
	form.value.id = props.node.id
	form.value.text = props.node?.text?.value
}, {deep: true})

const onInput = () => {
	updateEdgeLabel(form.value.id, form.value.text)
}

function changeActive() {
	if (Object.keys(props.node).length === 0) {
		activeName.value = 'flow'
	}else if (props.node.type === 'line') {
		activeName.value = 'line'
	}else {
		activeName.value = 'node'
	}
}

function updateEdgeLabel(edgeId, newLabel) {
	let edge = props.lf?.graphModel?.getEdgeModelById(edgeId);
	if (!edge) {
		edge = props.lf?.graphModel?.getNodeModelById(edgeId);
	}
	if (!edge) return;
	edge.updateText(newLabel);
}
</script>

<style scoped>
.panel {
	width: 320px;
	background: #fff;
	border-left: 1px solid var(--el-border-color-light);
	padding: 10px;
	user-select: none;
}
</style>
