<template>
	<el-card class="box-card">
		<template #header>
			<div class="card-header">
				<span>{{ $t('poster.preview') }}</span>
				<div class="operation-buttons">
					<el-button type="primary" @click="exportPoster">
						<el-icon><Download /></el-icon>
						{{ $t('poster.export') }}
					</el-button>
				</div>
			</div>
		</template>

		<div class="poster-preview" ref="posterRef">
			<div class="poster-content" contenteditable="true" v-html="posterContent"></div>
		</div>
	</el-card>
</template>

<script setup lang="ts" name="PosterPreview">
import { ElMessage } from 'element-plus';
import { Download } from '@element-plus/icons-vue';
import { toPng } from 'html-to-image';
import { useI18n } from 'vue-i18n';
import { useDebounceFn } from '@vueuse/core';

// Use i18n
const { t } = useI18n();

// eslint-disable-next-line
const props = defineProps<{
	posterGenerated: boolean;
	templateCode?: string;
}>();

const posterRef = ref<HTMLElement | null>(null);

const posterContent = computed(() => {
	return props.templateCode;
});

// Original export logic
const _exportPoster = async () => {
	try {
		// Safe access to posterRef
		if (!posterRef.value) {
			ElMessage.error(t('poster.export') + '失败，请重试');
			return;
		}

		const futuristicCard = posterRef.value.querySelector('.poster-content') as HTMLElement;
		if (!futuristicCard) {
			ElMessage.error(t('poster.export') + '失败，未找到海报内容');
			return;
		}

		// New logic using html-to-image
		toPng(futuristicCard, { cacheBust: true, pixelRatio: 2 }) // Use toPng and options
			.then((dataUrl) => {
				const link = document.createElement('a');
				link.download = `poster-${Date.now()}.png`;
				link.href = dataUrl;
				link.click();
				ElMessage.success(t('poster.export') + '成功');
			})
			.catch((err) => {
				ElMessage.error(`${t('poster.export')}失败`);
			});
	} catch (error) {
		ElMessage.error(`${t('poster.export')}失败`);
	}
};

// Debounced export function
const exportPoster = useDebounceFn(_exportPoster, 500);

// Expose methods to parent component
defineExpose({
	exportPoster,
});
</script>

<style scoped>
.box-card {
	width: 100%;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.poster-preview {
	flex: 1;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
}

.poster-content {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

:deep(body) {
	overflow: hidden;
	height: 100%;
}

:deep(.el-card__body) {
	height: 100%;
	padding: 10px;
	overflow: hidden;
}
</style>
