<template>
	<div class="assignee-container">
		<!-- 类型 -->
		<template v-if="type === TaskTypeEnum.TRANSFER">
			<el-avatar :size="36" color="#1989fa" style="background-color: #1989fa">
				<svg-icon color="#FFF" style="font-size: 20px" icon-class="flow-publish" class-name="svg-icon" />
			</el-avatar>
		</template>
		<template v-else-if="status === 1">
			<el-avatar :size="36" style="background-color: #3f73f6">
				<svg-icon color="#FFF" style="font-size: 32px" icon-class="flow-approval" class-name="svg-icon" />
			</el-avatar>
		</template>
		<template v-else>
			<flow-node-avatar :size="36" :show-name="false" :name="name" />
		</template>

		<!-- 状态 -->
		<div class="badge">
			<template v-if="type === 3">
				<svg-icon icon-class="reject" />
			</template>
			<template v-else-if="status === 1">
				<svg-icon icon-class="active" color="#2a5eff" />
			</template>
			<template v-else>
				<svg-icon icon-class="approval" />
			</template>
		</div>
	</div>
</template>

<script setup lang="ts">
import SvgIcon from '../SvgIcon/index.vue'
import FlowNodeAvatar from './FlowNodeAvatar.vue'
import { TaskTypeEnum, TaskStatusEnum } from './enums'

defineProps({
	status: { type: Number, default: 0 },
	type: { type: Number, default: 0 },
	name: { type: String, default: '' }
})
</script>

<style lang="scss" scoped>
.assignee-container {
	position: relative;
	top: -5px;
	left: -13px;

	.badge {
		$BadgeSize: 18px;
		$BadgeOffset: -4px;
		position: absolute;
		width: $BadgeSize;
		height: $BadgeSize;
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: $BadgeOffset;
		right: $BadgeOffset;
		z-index: 999;
		border: 2px solid #fff;
		background-color: #fff;
		border-radius: 50%;
		overflow: hidden;
	}

	.svg-icon {
		font-size: 36px;
	}
}
</style>
