<script lang="ts" setup>
import { Handle, Position } from '@vue-flow/core'
import { ref } from 'vue'
const props = defineProps<{
	data: {
		type: Object,
		default: () => ({
			id: '',
		})
	},
	selectItem: {
		type: Object,
		default: () => {},
	},
}>()

</script>
<!-- source输入，target输出 -->
<template>
	<div class="node" :class="{active:props.selectItem.id == props.data.id}">
		<Handle v-if="props.data?.versionId !== '1'" type="target" id="Top" :connectableStart="false" :connectableEnd="false" :position="Position.Top" />
		<Handle type="source" id="Bottom" :connectableStart="false" :connectableEnd="false" :position="Position.Bottom" />
		<!-- <Handle type="source" id="Right" :position="Position.Right" />
		<Handle type="target" id="Left" :position="Position.Left" /> -->
		<!-- <div>{{ props.data.id }}</div> -->
		<div class="item">
			<!-- {{ props.data.url }} -->
			<img v-if="props.data?.url" :src="props.data?.url" />
			<div class="mask"></div>
		</div>
	</div>
</template>

<style lang="less" scoped>
.node{
	.item{
		width: 100%;
		height: 100%;
		position: relative;
		img{
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}
	.mask{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
	}
}
</style>
