<template>
	<div class="attachment-btn">
		<button class="icon-btn" @click="fileInput?.click()" title="添加附件">
			<el-icon :size="18"><Paperclip /></el-icon>
		</button>
		<input
			ref="fileInput"
			type="file"
			multiple
			:accept="acceptTypes"
			style="display: none"
			@change="handleFileChange"
		/>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Paperclip } from '@element-plus/icons-vue';

const acceptTypes = 'image/*,video/mp4,video/mov,video/avi,.pdf,.doc,.docx,.xls,.xlsx';
const fileInput = ref<HTMLInputElement>();

const emit = defineEmits<{ select: [files: File[]] }>();

function handleFileChange(e: Event) {
	const input = e.target as HTMLInputElement;
	if (input.files?.length) {
		emit('select', Array.from(input.files));
		input.value = '';
	}
}
</script>
