<template>
	<div class="node-classify">
		<div class="model" v-if="!focus">
			<model-text :data="node.data?.options?.model" />
		</div>

		<div class="item" v-for="(item, index) in list" :key="index">
			<span class="content">{{ item.content || "未填写内容" }}</span>

			<tools-handle
				type="source"
				:node-id="node.id"
				:id="item.value"
				:position="{
					right: '-24px'
				}"
			/>
		</div>
	</div>
</template>

<script lang="ts" setup name="node-classify">
import type { FlowNode } from "/$/flow/types";
import { computed, type PropType } from "vue";
import ToolsHandle from "/$/flow/components/tools/handle.vue";
import ModelText from "../llm/form/model-text.vue";

const props = defineProps({
	node: {
		type: Object as PropType<FlowNode>,
		default: () => ({})
	},
	// 节点是否聚焦
	focus: {
		type: Boolean,
		default: false
	}
});

const list = computed(() => {
	return ((props.node.data?.options?.types as any[]) || []).map((e, i) => {
		return {
			content: e,
			value: `source-${i}`
		};
	});
});
</script>

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

	.model,
	.item {
		display: flex;
		align-items: center;
		background-color: var(--el-fill-color-light);
		padding: 0 10px;
		border-radius: 6px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.model {
		height: 33px;
		font-size: 14px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-bottom: 8px;
	}

	.item {
		height: 30px;
		margin-bottom: 4px;
		font-size: 12px;
		position: relative;

		.content {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
}
</style>
