<template>
	<div class="agent-operate flex flex-center">
		<el-popover placement="top" trigger="click" popper-class="agent-plus-popover">
			<template #reference>
				<SvgIcon name="plus" color="#0D0D0D" size="16" />
			</template>
			<template #default>
				<div class="agent-modal flex flex-col">
					<div class="file flex align-center" @click="emit('upload')">
						<img src="@/assets/icons/attach.svg" class="file-icon" />
						<span>Upload files</span>
					</div>
					<div class="gap"></div>
					<div class="report flex align-center" @click="emit('toggle-report')">
						<SvgIcon color="#5A5A5A" name="light" size="11" />
						<span>Trending report</span>
					</div>
				</div>
			</template>
		</el-popover>
	</div>
</template>

<script setup lang="ts">
	const emit = defineEmits<{
		(e: 'upload'): void
		(e: 'toggle-report'): void
	}>()
</script>

<style lang="less" scoped>
	.agent-operate {
		width: 3.2rem;
		height: 3.2rem;
		cursor: pointer;
		border-radius: 50%;

		&:hover {
			background-color: #f0f0f0;
		}
	}
</style>

<style lang="less">
	.agent-plus-popover {
		display: flex;
		justify-content: flex-start;
		background: transparent !important;
		box-shadow: none !important;
		border: none !important;
		padding: 0 !important;
		margin-bottom: -1rem;
		width: fit-content !important;
		min-width: initial !important;

		.el-popper__arrow:before {
			display: none;
		}

		.agent-modal {
			row-gap: 1.2rem;
			font-family: 'Medium';
			font-weight: 500;
			font-size: 1.3rem;
			color: #222;
			background-color: #fff;
			border: 1px solid #d9d9d9;
			box-shadow: 0px 6.53px 32.63px 0px #0000000d;
			border-radius: 1rem;
			padding: 1.2rem 1.4rem;
			transform: translateX(calc(50% - 1.6rem));

			.c-svg {
				width: initial;
				width: 1rem;
				height: 1.3rem;
			}

			.file,
			.report {
				line-height: 1.8rem;
				column-gap: 1rem;
				cursor: pointer;
			}

			.file {
				.file-icon {
					width: 1.1rem;
					height: 1.3rem;
				}
			}

			.gap {
				height: 0.05rem;
				background-color: #d4d4d4;
			}
		}
	}
</style>
