<template>
    <div class="flex justify-center">
        <div class="container flex min-h-screen p-8">
            <div class="flex flex-col w-[40%] pr-8">
                <div class="mb-8">
                    <h1 class="text-3xl font-bold text-gray-900">HTML 转图片工具</h1>
                    <p class="mt-2 text-gray-600">将您的 HTML 代码转换为高质量图片</p>
                </div>

                <div class="flex-1 flex flex-col">
                    <div class="flex items-center justify-between mb-4">
                        <label class="text-sm font-medium text-gray-700">输入 HTML 代码</label>
                        <div class="flex items-center space-x-2">
                            <!-- <el-button
                                type="primary"
                                text
                                class="text-sm whitespace-nowrap !rounded-button"
                                @click="importFile"
                            >
                                <el-icon class="mr-1"><Upload /></el-icon>导入文件
                            </el-button> -->
                            <el-button
                                text
                                class="text-sm text-gray-500 whitespace-nowrap !rounded-button"
                                @click="clearContent"
                            >
                                <el-icon class="mr-1"><Delete /></el-icon>清空
                            </el-button>
                        </div>
                    </div>

                    <el-input
                        v-model="htmlContent"
                        type="textarea"
                        :rows="10"
                        class="flex-1"
                        placeholder="在此处粘贴您的 HTML 代码..."
                        resize="none"
                    />

                    <div class="mt-6 flex items-center justify-end">
                        <!-- <div class="flex items-center space-x-4">
                            <div class="flex items-center">
                                <label class="text-sm text-gray-600 mr-2">宽度</label>
                                <el-input-number
                                    v-model="width"
                                    :min="1"
                                    :max="3840"
                                    class="w-[100px]"
                                    controls-position="right"
                                />
                            </div>
                            <div class="flex items-center">
                                <label class="text-sm text-gray-600 mr-2">高度</label>
                                <el-input-number
                                    v-model="height"
                                    :min="1"
                                    :max="2160"
                                    class="w-[100px]"
                                    controls-position="right"
                                />
                            </div>
                        </div> -->
                        <el-button
                            type="primary"
                            class="whitespace-nowrap !rounded-button"
                            @click="preview"
                        >
                            <el-icon class="mr-2"><View /></el-icon>预览效果
                        </el-button>
                    </div>
                </div>
            </div>

            <div class="flex flex-col w-[60%] bg-gray-50 rounded-lg p-8">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-xl font-medium text-gray-900">预览效果</h2>
                    <div class="flex items-center space-x-4">
                        <el-button
                            class="whitespace-nowrap !rounded-button"
                            @click="toggleFullscreen"
                        >
                            <el-icon class="mr-1"><FullScreen /></el-icon>全屏预览
                        </el-button>
                        <el-button
                            type="success"
                            class="whitespace-nowrap !rounded-button"
                            @click="exportImage"
                        >
                            <el-icon class="mr-2"><Download /></el-icon>导出图片
                        </el-button>
                    </div>
                </div>

                <div class="flex-1 bg-white rounded-lg border border-gray-200 p-6">
                    <div
                        class="flex bg-white items-center justify-center h-full text-gray-400"
                        ref="previewRef"
                    >
                        <div
                            class="text-center"
                            v-if="!previewContent"
                        >
                            <el-icon class="text-6xl mb-4"><Picture /></el-icon>
                            <p>预览区域</p>
                            <p class="text-sm mt-2">点击"预览效果"按钮查看渲染结果</p>
                        </div>
                        <div
                            v-else
                            v-html="previewContent"
                            class="w-full h-full"
                            ref="htmlContentRef"
                        ></div>
                    </div>
                </div>

                <div class="mt-6">
                    <el-alert
                        type="info"
                        show-icon
                        :closable="false"
                    >
                        <template #title>
                            <span class="font-medium">使用提示</span>
                        </template>
                        <ul class="list-disc pl-5 space-y-1 mt-2">
                            <li>支持完整的 HTML 代码转换</li>
                            <li>可自定义输出图片尺寸</li>
                            <li>支持导出 PNG、JPG 格式</li>
                            <li>建议代码格式化后再进行转换</li>
                        </ul>
                    </el-alert>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Upload, Delete, View, FullScreen, Download, Picture } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import html2canvas from 'html2canvas';

const htmlContent = ref('');
const htmlContentRef = ref(null);
const width = ref(1920);
const height = ref(1080);
const previewContent = ref('');
const previewRef = ref<HTMLElement | null>(null);

const importFile = () => {
    ElMessage.info('导入文件功能开发中...');
};

const clearContent = () => {
    htmlContent.value = '';
    previewContent.value = '';
};

const preview = () => {
    if (!htmlContent.value) {
        ElMessage.warning('请先输入 HTML 代码');
        return;
    }
    previewContent.value = htmlContent.value;
};

const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
        previewRef.value?.requestFullscreen();
    } else {
        document.exitFullscreen();
    }
};

const exportImage = () => {
    if (!previewContent.value) {
        ElMessage.warning('请先预览效果');
        return;
    }
    html2canvas(previewRef.value).then((canvas) => {
        const imgData = canvas.toDataURL('image/png');
        const img = new Image();
        img.src = imgData;

        const link = document.createElement('a');
        link.download = 'preview.png';
        link.href = imgData;
        link.click();
    });
};
</script>

<style scoped>
:deep(.el-textarea__inner) {
    height: 100%;
}

:deep(.el-input-number .el-input__inner) {
    text-align: left;
}

.container {
    max-width: 100%;
}
</style>
