<template>
	<div class="crew-edge-label">
		<el-tag :type="isParallel ? 'success' : 'primary'" size="small" effect="plain">
			{{ isParallel ? '并行' : '串行' }}
		</el-tag>
		<span v-if="data?.note" class="edge-note">{{ data.note }}</span>
	</div>
</template>

<script lang="ts" setup>
import { computed } from "vue";

const props = defineProps<{
	data?: { edgeType?: string; note?: string };
}>();

const isParallel = computed(() => props.data?.edgeType === "parallel");
</script>

<style scoped lang="scss">
.crew-edge-label {
	display: flex;
	align-items: center;
	gap: 4px;
	background: white;
	padding: 2px 6px;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	font-size: 12px;
}
.edge-note {
	color: #606266;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
