<template>
	<div class="node-judge">
		<div class="item">
			<span> 满足 </span>
			<tools-handle
				type="source"
				:node-id="node.id"
				id="source-if"
				:position="{
					right: '-24px'
				}"
			/>
		</div>
		<div class="item">
			<span> 不满足 </span>
			<tools-handle
				type="source"
				:node-id="node.id"
				id="source-else"
				:position="{
					right: '-24px'
				}"
			/>
		</div>
	</div>
</template>

<script setup lang="ts" name="node-judge">
import type { FlowNode } from "/$/flow/types";
import { type PropType } from "vue";
import { useFlow } from "/$/flow/hooks";
import ToolsHandle from "/$/flow/components/tools/handle.vue";

const props = defineProps({
	node: {
		type: Object as PropType<FlowNode>,
		default: () => ({})
	}
});

const flow = useFlow();
</script>

<style lang="scss" scoped>
.node-judge {
	padding-bottom: 15px;

	.item {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 5px;
		font-size: 12px;
		position: relative;

		&:last-child {
			margin-bottom: 0;
		}
	}
}
</style>
