<template>
	<div>
		<el-tag
			v-for="(item, index) in data"
			style="margin-right: 5px; margin-top: 5px"
			:key="item.id"
			:closable="!disabled"
			@close="removeItem(index, item.id, item.type)"
			:type="item.type === 'dept' ? 'primary' : item.type === 'user' ? 'warning' : 'success'"
			size="large"
		>
			{{ getDisplayName(item) }}
		</el-tag>
	</div>
</template>

<script setup>
let emits = defineEmits(['update:data']);

let props = defineProps({
	data: {
		type: Array,
		default: () => [],
	},
	disabled: {
		type: Boolean,
		default: false,
	},
});

const getDisplayName = (item) => {
	if (item.type === 'user') {
		const commonDeptName = item.commonDeptName || '';
		const realName = item.realName || item.name || '';
		const teacherNo = item.teacherNo || item.username || '';
		return commonDeptName ? `${commonDeptName} - ${realName} (${teacherNo})` : `${realName} (${teacherNo})`;
	}
	return item.name;
};

const removeItem = (index, id, type) => {
	emits(
		'update:data',
		props.data.filter((res) => !(res.id === id && res.type === type))
	);
};
</script>
