<template>
	<div class="sender-wrapper">
		<Sender
			v-model="modelValue"
			variant="updown"
			ref="senderRef"
			submitType="cmdOrCtrlEnter"
			:auto-size="{ minRows: 2, maxRows: 5 }"
			clearable
			allow-speech
			placeholder="请输入问题..."
			@submit="emit('submit', modelValue!)"
			:loading="loading"
			@cancel="emit('cancel')"
		>
			<!-- 头部插槽 -->
			<template #header>
				<slot name="header" />
			</template>

			<!-- 插槽内容 -->
			<template #prefix>
				<div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap">
					<slot name="prefix-extra" />
				</div>
			</template>

			<!-- 动作插槽 -->
			<template #action-list>
				<div style="display: flex; align-items: center; gap: 8px">
					<slot name="action" />
					<el-button round color="#626aef" @click="emit('submit', modelValue)">
						<el-icon>
							<Promotion />
						</el-icon>
					</el-button>
				</div>
			</template>

			<!-- 自定义 底部插槽 -->
			<template #footer>
				<div v-if="attachments.length" class="attachment-preview">
					<div v-for="file in attachments" :key="file.id" class="attachment-preview__item">
						<el-image
							:src="getImageSrc(file)"
							class="attachment-preview__image"
							fit="cover"
							preview-teleported
							hide-on-click-modal
							:preview-src-list="attachments.map(getImageSrc)"
						/>
					</div>
				</div>
			</template>
		</Sender>
	</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { Sender } from 'vue-element-plus-x'
import { useI18n } from '@/composables/useI18n'
import { Promotion } from '@element-plus/icons-vue'
import type { WorkflowUploadFile } from '@/features/fileUpload/shared'

const { t } = useI18n()

const modelValue = defineModel<string>()

const senderRef = ref<InstanceType<typeof Sender>>()

const props = withDefaults(
	defineProps<{
		loading: boolean
		attachments?: WorkflowUploadFile[]
	}>(),
	{
		attachments: () => []
	}
)

const emit = defineEmits<{
	(e: 'submit', content?: string): void
	(e: 'cancel'): void
}>()

const getImageSrc = (file: WorkflowUploadFile) => `/File/GetImage?fileId=${file.path || file.id}`

const attachments = computed(() => props.attachments)

defineExpose({
	getInstance: () => senderRef.value
})
</script>

<style lang="less" scoped>
.sender-wrapper {
	padding: 10px 0;
	width: 90%;
	margin: 0 auto;
	margin-bottom: 12px;
}

.attachment-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px 4px 2px;
}

.attachment-preview__item {
	width: 64px;
	height: 64px;
}

.attachment-preview__image {
	width: 64px;
	height: 64px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--border-light);
	cursor: zoom-in;
}

.isSelect {
	color: #626aef;
	border: 1px solid #626aef !important;
	border-radius: 15px;
	padding: 3px 12px;
	font-weight: 700;
}
</style>
