<!-- src/components/RichTextEditor.vue -->
<template>
    <div class="editor-wrapper" v-loading="txtloading" :class="{ 'fullscreen-editor': fullscreen }">
        <el-button @click="toggleFullscreen" circle class="fullscreen-btn">
            <el-icon v-if="!fullscreen">
                <FullScreen />
            </el-icon>
            <el-icon v-else>
                <Close />
            </el-icon>
        </el-button>
        <el-scrollbar :height="scrollHeight">
            <editor-content :editor="editor" class="editor-content" />
        </el-scrollbar>

        <div class="actions">
            <el-button type="success" @click="saveCcontent">保存文件</el-button>
        </div>
    </div>
</template>

<script setup>
import { EditorContent, useEditor } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import { ref, onMounted, computed } from 'vue'
import { apicontent, saveContent } from "@/api/datamanagement";
import { ElMessage } from "element-plus";
import { FullScreen, Close } from '@element-plus/icons-vue'
const props = defineProps({
    rowId: {
        type: String,
        default: false
    },
    fileUrl: {
        type: String,
        required: true
    },
});
const statusMessage = ref('')
onMounted(() => {
    loadContent()
});
// 初始化编辑器
const editor = useEditor({
    content: '',
    extensions: [
        StarterKit.configure({
            heading: {
                levels: [2, 3],
            },
        }),
    ],
})
const txtloading = ref(false)
// 加载文件内容
// const loadContent = () => {
//     txtloading.value = true
//     apicontent({ id: props.rowId }).then((res) => {
//         // debugger
//         editor.value.commands.setContent(convertNewlinesToParagraphs(res.data))
//         txtloading.value = false
//     })
// }
const loadContent = async () => {
    txtloading.value = true;
    try {
        const response = await fetch(props.fileUrl);
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
        const text = await response.text();
        editor.value.commands.setContent(convertNewlinesToParagraphs(text));
        // ElMessage.success('内容加载成功');
    } catch (error) {
        ElMessage.error(`加载失败: ${error.message}`);
    } finally {
        txtloading.value = false;
    }
}
function convertNewlinesToParagraphs(text) {
    return text.split('\n').map(line => `<p>${line}</p>`).join('');
}
function convertParagraphsToNewlines(html) {
    return html
        .replace(/<\/p>/g, '\n')  // 将闭合标签替换为换行符
        .replace(/<p>/g, '')      // 移除开始标签
        .trim();                  // 移除首尾空白
}

// 保存文件内容
const saveCcontent = () => {
    const content = convertParagraphsToNewlines(editor.value.getHTML())
    saveContent({ id: props.rowId, content: content }).then((res) => {
        loadContent()
        ElMessage.success('保存成功')
    })
}
// 新增全屏状态
const fullscreen = ref(false)
const scrollHeight = computed(() => fullscreen.value ? 'calc(100vh - 60px)' : '600px')

// 全屏切换方法
const toggleFullscreen = () => {
    fullscreen.value = !fullscreen.value
    nextTick(() => {
        if (fullscreen.value) {
            document.documentElement.style.overflow = 'hidden'
        } else {
            document.documentElement.style.overflow = ''
        }
    })
}
</script>

<style scoped>
.editor-wrapper {
    max-width: 100%;
    margin: 20px auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    position: relative;
}

.toolbar {
    margin-bottom: 10px;
    padding: 8px;
    background: #f5f5f5;
    border-radius: 4px;
}

.toolbar button {
    margin-right: 8px;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    background: white;
}

.toolbar button.is-active {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.editor-content {
    min-height: 600px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
}

.actions {
    margin-top: 20px;
    text-align: right;
}

.btn-save {
    background: #28a745;
    color: white;
}

.btn-load {
    background: #17a2b8;
    color: white;
}

.status {
    margin-top: 10px;
    color: #666;
    font-size: 0.9em;
}

.fullscreen-editor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    background: white;
    border-radius: 0 !important;
}

.fullscreen-editor .editor-content {
    min-height: calc(100vh - 100px) !important;
}

.fullscreen-btn {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 10000;
}

.actions {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 10px;
    border-top: 1px solid #eee;
    z-index: 1000;
}
</style>