<template>
	<div class="flow-stamp-container">
		<LeIcon v-if="status == FlowStatusEnum.ACTIVE" :style="style" icon-class="icon-status-flw01" />
		<LeIcon v-if="status == FlowStatusEnum.COMPLETE" :style="style" icon-class="icon-status-flw03" />
		<LeIcon v-if="status == FlowStatusEnum.REJECT" :style="style" icon-class="icon-status-flw04" />
		<LeIcon v-if="status == FlowStatusEnum.REVOKE" :style="style" icon-class="icon-status-flw02" />
		<LeIcon v-if="status == FlowStatusEnum.TIMEOUT" :style="style" icon-class="icon-status-flw05" />
		<LeIcon v-if="status == FlowStatusEnum.TERMINATE" :style="style" icon-class="icon-status-flw06" />
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { FlowStatusEnum } from './enums'

const props = defineProps({
	status: { type: Number, default: 0 },
	size: { type: Number, default: 120 }
})

const style = computed(() => {
	return {
		width: props.size + 'px',
		height: props.size + 'px'
	}
})
</script>

<style lang="scss" scoped>
.flow-stamp-container {
	img {
		overflow: hidden;
		background-color: transparent;
	}
}
</style>
