<template>
	<div class="form-info" v-if="info">
		<el-tag disable-transitions type="success" effect="dark" size="small">
			v{{ info?.version }}
		</el-tag>

		<el-text :truncated="true" size="small">
			{{ info?.name }}
		</el-text>
	</div>
</template>

<script setup lang="ts" name="node-flow-form-info">
import { useCool } from "/@/cool";
import { ref, watch, onMounted } from "vue";

const props = defineProps({
	flowId: Number
});

const { service } = useCool();

const info = ref<Eps.FlowInfoEntity>();

async function refresh() {
	info.value = await service.flow.info.info({
		id: props.flowId
	});
}

onMounted(() => {
	watch(
		() => props.flowId,
		(val) => {
			if (val) {
				refresh();
			}
		},
		{
			immediate: true
		}
	);
});
</script>

<style lang="scss" scoped>
.form-info {
	display: flex;
	align-items: center;
	border: 1px solid var(--el-border-color);
	border-radius: var(--el-border-radius-base);
	padding: 0 10px;
	cursor: pointer;
	height: 32px;
	width: 100%;
	position: relative;
	transition: all 0.2s;
	box-sizing: border-box;

	.el-tag {
		margin-right: 5px;
	}

	&:hover {
		border-color: var(--el-border-color-hover);
	}
}
</style>
