<template>
    <div class="work-edit-container">
        <div class="work-edit-header">
            <div class="header-left">
                <el-button @click="goToWorksList" plain>
                    <el-icon><Back /></el-icon> 返回作品列表
                </el-button>
                <h3 class="work-title">{{ workTitle }}</h3>
            </div>
            <div class="header-right">
                <el-button type="primary" @click="publishChapter" :disabled="!chapterTitle || !chapterContent">发布</el-button>
                <el-button @click="saveChapter" :disabled="!chapterTitle || !chapterContent">保存</el-button>
            </div>
        </div>

        <div class="work-edit-main">
            <div class="chapters-sidebar">
                <div class="sidebar-header">
                    <h4 class="sidebar-title">章节目录</h4>
                    <el-button type="primary" size="small" @click="createNewChapter">新建章节</el-button>
                </div>
                <div class="chapters-list" v-if="chapters.length > 0">
                    <div
                        v-for="chapter in chapters"
                        :key="chapter.id"
                        class="chapter-item"
                        :class="{ active: currentChapter && currentChapter.id == chapter.id }"
                        @click="selectChapter(chapter)"
                    >
                        <div class="chapter-info">
                            <span class="chapter-name">{{ chapter.title }}</span>
                        </div>
                        <div class="chapter-actions">
                            <div class="action-buttons">
                                <div class="sort-buttons">
                                    <el-button 
                                        size="small" 
                                        text
                                        @click.stop="moveChapterUp(chapter)"
                                        :disabled="chapter.sort <= 1"
                                        title="上移"
                                    >
                                        ↑
                                    </el-button>
                                    <el-button 
                                        size="small" 
                                        text
                                        @click.stop="moveChapterDown(chapter)"
                                        :disabled="chapter.sort >= Math.max(...chapters.map(c => c.sort || 0))"
                                        title="下移"
                                    >
                                        ↓
                                    </el-button>
                                </div>
                                <el-button 
                                    size="small" 
                                    text
                                    type="danger"
                                    @click.stop="deleteChapter(chapter)"
                                    title="删除章节"
                                    class="delete-btn"
                                >
                                    ×
                                </el-button>
                            </div>
                            <div class="chapter-status">
                                <span class="status-tag" :class="getStatusClass(chapter._status, chapter.state)">{{ getStatusText(chapter._status, chapter.state) }}</span>
                                <span class="word-count">{{ chapter.num }}字</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="no-chapters" v-else>
                    <el-empty description='暂无章节，点击"新建章节"开始创作' :image-size="80"></el-empty>
                </div>
            </div>

            <div class="editor-container">
                <!-- 当有章节时显示编辑器 -->
                <template v-if="chapters.length > 0">
                    <div class="chapter-header">
                        <el-input
                            v-model="chapterTitle"
                            placeholder="请输入章节标题"
                            clearable
                            maxlength="50"
                            show-word-limit
                        ></el-input>
                    </div>
                    <div class="chapter-editor">
                        <el-input
                            v-model="chapterContent"
                            type="textarea"
                            :rows="20"
                            placeholder="请输入章节正文内容..."
                            resize="none"
                        ></el-input>
                        <div class="editor-footer">
                            <span>字数统计：{{ num }}</span>
                            <span>上次保存：{{ lastSaved }}</span>
                        </div>
                    </div>
                </template>
                
                <!-- 当没有章节时显示提示 -->
                <template v-else>
                    <div class="empty-editor">
                        <el-empty 
                            description="暂无章节，点击左侧新建章节开始创作" 
                            :image-size="120"
                        >
                            <el-button type="primary" @click="createNewChapter">
                                新建章节
                            </el-button>
                        </el-empty>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent, ref, computed, watch, onBeforeUnmount } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Back } from '@element-plus/icons-vue';
import { myBookApi } from '@/api/bookshelf';
import { homeApi } from '@/api/home';

export default defineComponent({
    name: 'WorkEdit',
    components: {
        Back
    },
    setup() {
        const router = useRouter();
        const route = useRoute();
        const workId = route.params.id;
        
        const workTitle = ref('');
        const chapters = ref([]);
        const currentChapter = ref(null);
        const chapterTitle = ref('');
        const chapterContent = ref('');
        const lastSaved = ref('未保存');
        let autoSaveInterval = null;

        // 字数统计
        const num = computed(() => {
            if (!chapterContent.value) return 0;
            // 去除空格、换行等字符后计算字数
            return chapterContent.value.replace(/\s+/g, '').length;
        });

        // 检查是否有未保存的内容
        const hasUnsavedChanges = () => {
            return currentChapter.value && 
                (chapterTitle.value != currentChapter.value.title || 
                chapterContent.value != currentChapter.value.details);
        };

        // 检查保存状态并提示
        const checkSaveStatus = async () => {
            if (hasUnsavedChanges()) {
                try {
                    await ElMessageBox.confirm('当前章节有未保存的内容，是否保存？', '提示', {
                        confirmButtonText: '保存',
                        cancelButtonText: '不保存',
                        type: 'warning'
                    });
                    return await saveChapter();
                } catch {
                    return false;
                }
            }
            return true;
        };

        // 统一的保存方法
        const saveChapterData = async (status = 0) => {
            if (!chapterTitle.value) {
                ElMessage.warning('请输入章节标题');
                return false;
            }
            
            try {
                const chapterData = {
                    id: currentChapter.value.id,
                    bookId: workId,
                    title: chapterTitle.value,
                    details: chapterContent.value,
                    sort: currentChapter.value.sort,
                    status: status, // 0: 草稿, 1: 已发布
                    num: num.value
                };

                const response = await myBookApi.saveOrUpdateShopNovel(chapterData);
                
                if (response.success) {
                    // 如果是新章节，更新id
                    if (!currentChapter.value.id && response.result && response.result.id) {
                        currentChapter.value.id = response.result.id;
                        chapters.value[chapters.value.length - 1].id = currentChapter.value.id; // 确保id也被更新
                    }
                    
                    // 更新本地数据
                    const index = chapters.value.findIndex(c => c.id == currentChapter.value.id);
                    if (index !== -1) {
                        currentChapter.value.title = chapterTitle.value;
                        currentChapter.value.details = chapterContent.value;
                        currentChapter.value.num = num.value;
                        currentChapter.value.status = status;
                        currentChapter.value._status = status;

                        chapters.value[index].title = chapterTitle.value;
                        chapters.value[index].details = chapterContent.value;
                        chapters.value[index].num = num.value;
                        chapters.value[index].status = status;
                        chapters.value[index]._status = status;
                    }
                    
                    lastSaved.value = status == 1 ? '已发布' : new Date().toLocaleTimeString();
                    ElMessage.success(status == 1 ? '发布成功' : '保存成功');
                    return true;
                } else {
                    throw new Error(response.message || (status == 1 ? '发布失败' : '保存失败'));
                }
            } catch (error) {
                console.error(status === 1 ? '发布失败:' : '保存失败:', error);
                ElMessage.error(status === 1 ? '发布失败，请重试' : '保存失败，请重试');
                return false;
            }
        };

        // 保存章节
        const saveChapter = () => saveChapterData(currentChapter.value.status || 0);

        // 发布章节
        const publishChapter = async () => {
            if (!chapterContent.value) {
                ElMessage.warning('请输入章节内容');
                return;
            }
            return saveChapterData(1);
        };

        // 选择章节
        const selectChapter = async (chapter) => {
            if (await checkSaveStatus()) {
                loadChapter(chapter);
            }
        };

        // 创建新章节
        const createNewChapter = async () => {
            // 检查是否有未保存的章节（没有id的章节）
            const hasUnsavedChapter = chapters.value.some(chapter => !chapter.id);
            
            if (hasUnsavedChapter) {
                ElMessage.warning('请先保存当前章节，再创建新章节');
                return;
            }
            
            if (await checkSaveStatus()) {
                createEmptyChapter();
            }
        };

        // 加载章节内容
        const loadChapter = async (chapter) => {
            try {
                if(chapter.id){
                    const response = await homeApi.getBookCatalogDetail(chapter.id);
                    if (response.success && response.result) {
                        chapter = response.result;
                    } else {
                        throw new Error(response.message || '获取章节详情失败');
                    }
                }
                
                if (!chapter) {
                    throw new Error('章节数据为空');
                }

                currentChapter.value = chapter;
                chapterTitle.value = chapter.title || '';
                chapterContent.value = chapter.details || '';
                lastSaved.value = chapter.status == '1' ? '已发布' : '草稿';
                chapter._status = chapter.status;
            } catch (error) {
                console.error('加载章节失败:', error);
                ElMessage.error('加载章节失败，请重试');
            }
        };

        // 创建空白章节
        const createEmptyChapter = () => {
            const newSort = chapters.value.length > 0 ? Math.max(...chapters.value.map(c => c.sort || 0)) + 1 : 1;
            const newChapter = {
                sort: newSort,
                title: '',
                details: '',
                _status: 'new',
                status: '0',
                num: 0
            };
            
            chapters.value.push(newChapter);
            currentChapter.value = newChapter;
            chapterTitle.value = '';
            chapterContent.value = '';
            lastSaved.value = '未保存';
            currentChapter.value.id = undefined
        };

        // 获取状态文本
        const getStatusText = (status, state) => {
            // 如果是已发布状态，需要根据审核状态显示
            if (status == '1' || status == 1) {
                const stateMap = {
                    0: '审核中',
                    1: '已发布',
                    2: '已驳回'
                };
                // 确保 state 是数字类型
                const stateValue = parseInt(state) || 0;
                return stateMap[stateValue] || '审核中';
            }
            
            // 其他状态
            const statusMap = {
                'new': '未保存',
                '0': '草稿',
                0: '草稿'
            };
            return statusMap[status] || status;
        };

        // 获取状态样式类
        const getStatusClass = (status, state) => {
            // 如果是已发布状态，根据审核状态返回不同的样式类
            if (status == '1' || status == 1) {
                const stateClassMap = {
                    0: 'reviewing', // 审核中
                    1: 'published',  // 已发布
                    2: 'rejected'    // 已驳回
                };
                // 确保 state 是数字类型
                const stateValue = parseInt(state) || 0;
                return stateClassMap[stateValue] || 'reviewing';
            }
            
            // 其他状态
            const statusClassMap = {
                'new': 'new',
                '0': 'draft',
                0: 'draft'
            };
            return statusClassMap[status] || 'default';
        };

        // 返回作品列表
        const goToWorksList = async () => {
            if (await checkSaveStatus()) {
                router.push({ name: 'authorCenter' });
            }
        };

        // 自动保存功能
        const setupAutoSave = () => {
            autoSaveInterval = setInterval(async () => {
                if (hasUnsavedChanges() && chapterTitle.value) {
                    await saveChapter();
                }
            }, 60000); // 1分钟自动保存一次
        };

        // 监听章节内容变化
        watch(chapterContent, (newVal) => {
            if (currentChapter.value && currentChapter.value._status == '1') {
                // 如果已发布的章节被编辑，状态变为未保存
                // currentChapter.value._status = 'new';
            }
        });

        // 初始化
        const initData = async () => {
            try {
                // 获取作品信息
                const response = await homeApi.getBookDetail({ id: workId });

                if (response.success) {
                    workTitle.value = response.result.name;
                } else {
                    ElMessage.error('作品不存在');
                    router.push({ name: 'authorCenter' });
                    return;
                }

                // 获取章节列表
                const chaptersResponse = await myBookApi.getMyShopNovelPage({
                    bookId: workId,
                    pageNo: 1,
                    pageSize: 9999999,
                    reverse: 0,
                });

                if (chaptersResponse.success && chaptersResponse.result?.records) {
                    chapters.value = chaptersResponse.result.records.map(chapter => ({
                        ...chapter,
                        _status: chapter.status,
                        state: chapter.state || 0, // 确保 state 字段存在
                        details: chapter.details || '',
                        title: chapter.title || '',
                        num: chapter.num || 0,
                        sort: chapter.sort || 0 // 初始化 sort 字段
                    }));

                    // 按 sort 排序
                    sortChapters();

                    // 默认选中最后一章（只选中已保存的章节）
                    const savedChapters = chapters.value.filter(chapter => chapter.id);
                    if (savedChapters.length > 0) {
                        await selectChapter(savedChapters[savedChapters.length - 1]);
                    }
                } else {
                    // 如果没有章节数据，保持空状态
                    chapters.value = [];
                }
            } catch (error) {
                console.error('加载作品信息失败:', error);
                ElMessage.error('加载作品信息失败');
                
                // 如果加载失败，保持空状态
                chapters.value = [];
            }
        };

        // 初始化
        initData();
        setupAutoSave();

        // 组件销毁前清除定时器
        onBeforeUnmount(() => {
            if (autoSaveInterval) {
                clearInterval(autoSaveInterval);
            }
        });

        // 添加键盘快捷键监听
        const handleKeydown = (event) => {
            // 监听 Ctrl+S 快捷键
            if ((event.ctrlKey || event.metaKey) && event.key === 's') {
                event.preventDefault(); // 阻止浏览器默认的保存行为
                event.stopPropagation(); // 阻止事件冒泡
                
                // 如果有章节标题和内容，则保存章节
                if (chapterTitle.value && chapterContent.value) {
                    saveChapter();
                }
            }
        };

        // 在组件挂载时添加事件监听器
        const addKeyboardListener = () => {
            document.addEventListener('keydown', handleKeydown);
        };

        // 在组件卸载时移除事件监听器
        const removeKeyboardListener = () => {
            document.removeEventListener('keydown', handleKeydown);
        };

        // 初始化
        initData();
        setupAutoSave();
        addKeyboardListener();

        // 组件销毁前清除定时器和事件监听器
        onBeforeUnmount(() => {
            if (autoSaveInterval) {
                clearInterval(autoSaveInterval);
            }
            removeKeyboardListener();
        });

        // 排序章节
        const sortChapters = () => {
            chapters.value.sort((a, b) => (a.sort || 0) - (b.sort || 0));
        };

        // 上移章节
        const moveChapterUp = async (chapter) => {
            const currentSort = chapter.sort || 0;
            const prevChapter = chapters.value.find(c => c.sort < currentSort && c.sort === Math.max(...chapters.value.filter(ch => ch.sort < currentSort).map(ch => ch.sort || 0)));
            
            if (prevChapter) {
                const tempSort = chapter.sort;
                chapter.sort = prevChapter.sort;
                prevChapter.sort = tempSort;
                
                // 保存章节排序
                await saveChapterSort(chapter);
                await saveChapterSort(prevChapter);
                
                sortChapters();
            }
        };

        // 下移章节
        const moveChapterDown = async (chapter) => {
            const currentSort = chapter.sort || 0;
            const nextChapter = chapters.value.find(c => c.sort > currentSort && c.sort === Math.min(...chapters.value.filter(ch => ch.sort > currentSort).map(ch => ch.sort || 0)));
            
            if (nextChapter) {
                const tempSort = chapter.sort;
                chapter.sort = nextChapter.sort;
                nextChapter.sort = tempSort;
                
                // 保存章节排序
                await saveChapterSort(chapter);
                await saveChapterSort(nextChapter);
                
                sortChapters();
            }
        };

        // 保存章节排序
        const saveChapterSort = async (chapter) => {
            try {
                const chapterData = {
                    id: chapter.id,
                    bookId: workId,
                    title: chapter.title,
                    details: chapter.details,
                    sort: chapter.sort,
                    status: chapter.status,
                    num: chapter.num
                };

                await myBookApi.saveOrUpdateShopNovel(chapterData);
            } catch (error) {
                console.error('保存章节排序失败:', error);
                ElMessage.error('保存章节排序失败');
            }
        };

        // 删除章节
        const deleteChapter = async (chapter) => {
            try {
                await ElMessageBox.confirm(
                    `确定要删除章节"${chapter.title}"吗？删除后不可恢复。`, 
                    '删除确认', 
                    {
                        confirmButtonText: '删除',
                        cancelButtonText: '取消',
                        type: 'warning',
                        confirmButtonClass: 'el-button--danger'
                    }
                );

                // 如果章节没有ID（新建但未保存的章节），直接从列表中移除
                if (!chapter.id) {
                    const index = chapters.value.findIndex(c => c === chapter);
                    if (index !== -1) {
                        chapters.value.splice(index, 1);
                    }
                    
                    // 如果删除的是当前选中章节，清空编辑器或选中其他已保存的章节
                    if (currentChapter.value === chapter) {
                        const savedChapters = chapters.value.filter(c => c.id);
                        if (savedChapters.length > 0) {
                            await selectChapter(savedChapters[savedChapters.length - 1]);
                        } else {
                            currentChapter.value = null;
                            chapterTitle.value = '';
                            chapterContent.value = '';
                            lastSaved.value = '未保存';
                        }
                    }
                    
                    ElMessage.success('章节删除成功');
                    return;
                }

                const response = await myBookApi.deleteMyNovel({ 
                    bookId: workId,
                    id: chapter.id 
                });
                
                if (response.success) {
                    // 更新本地数据
                    const index = chapters.value.findIndex(c => c.id == chapter.id);
                    if (index !== -1) {
                        chapters.value.splice(index, 1);
                    }
                    
                    // 如果删除的是当前选中章节，清空编辑器或选中其他已保存的章节
                    if (currentChapter.value && currentChapter.value.id === chapter.id) {
                        const savedChapters = chapters.value.filter(c => c.id);
                        if (savedChapters.length > 0) {
                            await selectChapter(savedChapters[savedChapters.length - 1]);
                        } else {
                            currentChapter.value = null;
                            chapterTitle.value = '';
                            chapterContent.value = '';
                            lastSaved.value = '未保存';
                        }
                    }
                    
                    ElMessage.success('章节删除成功');
                } else {
                    throw new Error(response.message || '删除章节失败');
                }
            } catch (error) {
                if (error.message === 'cancel') {
                    // 用户取消删除
                    return;
                }
                console.error('删除章节失败:', error);
                ElMessage.error('删除章节失败，请重试');
            }
        };

        return {
            workTitle,
            chapters,
            currentChapter,
            chapterTitle,
            chapterContent,
            lastSaved,
            num,
            selectChapter,
            createNewChapter,
            saveChapter,
            publishChapter,
            getStatusText,
            getStatusClass,
            goToWorksList,
            moveChapterUp,
            moveChapterDown,
            deleteChapter
        };
    }
});
</script>

<style lang="scss" scoped>
.work-edit-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #fff;

    .work-edit-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        padding: 0 20px;
        background-color: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
        z-index: 10;
        
        .header-left {
            display: flex;
            align-items: center;
            
            .work-title {
                margin: 0 0 0 20px;
                font-size: 18px;
                color: #333;
            }
        }
        
        .header-right {
            display: flex;
            gap: 10px;
            
            .el-button--primary {
                background-color: #0A2463;
                border-color: #0A2463;
                
                &:hover, &:focus {
                    background-color: #1a3473;
                    border-color: #1a3473;
                }
            }
        }
    }

    .work-edit-main {
        display: flex;
        flex: 1;
        height: calc(100vh - 60px);
        
        .chapters-sidebar {
            width: 280px;
            background-color: #fff;
            border-right: 1px solid #eee;
            display: flex;
            flex-direction: column;
            
            .sidebar-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 16px;
                border-bottom: 1px solid #eee;
                
                .sidebar-title {
                    margin: 0;
                    font-size: 16px;
                    color: #333;
                }
                
                .el-button--primary {
                    background-color: #0A2463;
                    border-color: #0A2463;
                    
                    &:hover, &:focus {
                        background-color: #1a3473;
                        border-color: #1a3473;
                    }
                }
            }
            
            .chapters-list {
                flex: 1;
                overflow-y: auto;
                
                .chapter-item {
                    padding: 12px 16px;
                    border-bottom: 1px solid #f5f5f5;
                    cursor: pointer;
                    
                    &:hover {
                        background-color: #f5f5f9;
                    }
                    
                    &.active {
                        background-color: #e0e7f5;
                    }
                    
                    .chapter-info {
                        display: flex;
                        margin-bottom: 6px;
                        
                        .chapter-sort {
                            color: #888;
                            margin-right: 8px;
                            font-size: 14px;
                        }
                        
                        .chapter-name {
                            font-size: 14px;
                            color: #333;
                            flex: 1;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                    
                    .chapter-actions {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        
                        .action-buttons {
                            display: flex;
                            gap: 2px;
                            
                            .sort-buttons {
                                display: flex;
                                gap: 2px;
                                
                                .el-button {
                                    width: 24px;
                                    height: 24px;
                                    padding: 0;
                                    margin: 0;
                                    background: none;
                                    border: 1px solid #ddd;
                                    border-radius: 4px;
                                    font-size: 16px;
                                    color: #666;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    cursor: pointer;
                                    transition: all 0.2s;
                                    
                                    &:hover, &:focus {
                                        color: #0A2463;
                                        border-color: #0A2463;
                                        background-color: #f0f4ff;
                                    }
                                    
                                    &:disabled {
                                        color: #ccc;
                                        border-color: #eee;
                                        cursor: not-allowed;
                                        
                                        &:hover {
                                            background: none;
                                        }
                                    }
                                }
                            }
                            
                            .delete-btn {
                                width: 24px;
                                height: 24px;
                                padding: 0;
                                margin: 0;
                                background: none;
                                border: 1px solid #ddd;
                                border-radius: 4px;
                                font-size: 18px;
                                color: #999;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                cursor: pointer;
                                transition: all 0.2s;
                                margin-left: 4px;
                                
                                &:hover, &:focus {
                                    color: #ff4d4f;
                                    border-color: #ff4d4f;
                                    background-color: #fff2f0;
                                }
                            }
                        }
                        
                        .chapter-status {
                            display: flex;
                            gap: 8px;
                            align-items: center;
                            
                            .status-tag {
                                padding: 3px 8px;
                                border-radius: 12px;
                                font-size: 12px;
                                font-weight: 500;
                                border: 1px solid;
                                
                                &.new {
                                    background-color: #fff7e6;
                                    color: #fa8c16;
                                    border-color: #ffd591;
                                }
                                
                                &.draft {
                                    background-color: #f6ffed;
                                    color: #52c41a;
                                    border-color: #b7eb8f;
                                }
                                
                                &.published {
                                    background-color: #e6f7ff;
                                    color: #1890ff;
                                    border-color: #91d5ff;
                                }
                                
                                &.reviewing {
                                    background-color: #fff7e6;
                                    color: #fa8c16;
                                    border-color: #ffd591;
                                }
                                
                                &.rejected {
                                    background-color: #fff2f0;
                                    color: #ff4d4f;
                                    border-color: #ffccc7;
                                }
                                
                                // 兼容旧的状态样式
                                &[class*="0"] {
                                    background-color: #f6ffed;
                                    color: #52c41a;
                                    border-color: #b7eb8f;
                                }
                                
                                &[class*="1"] {
                                    background-color: #e6f7ff;
                                    color: #1890ff;
                                    border-color: #91d5ff;
                                }
                                
                                // 默认样式
                                &:not(.new):not(.draft):not(.published):not(.reviewing):not(.rejected):not([class*="0"]):not([class*="1"]) {
                                    background-color: #fafafa;
                                    color: #666;
                                    border-color: #d9d9d9;
                                }
                            }
                            
                            .word-count {
                                font-size: 12px;
                                color: #999;
                            }
                        }
                    }
                }
            }
            
            .no-chapters {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 20px;
            }
        }
        
        .editor-container {
            flex: 1;
            padding: 20px;
            display: flex;
            flex-direction: column;
            
            .chapter-header {
                margin-bottom: 20px;
                
                :deep(.el-input__wrapper) {
                    padding: 0 15px;
                    height: 48px;
                }
                
                :deep(.el-input__inner) {
                    font-size: 18px;
                    font-weight: 500;
                }
            }
            
            .chapter-editor {
                flex: 1;
                display: flex;
                flex-direction: column;
                
                :deep(.el-textarea__inner) {
                    font-size: 16px;
                    line-height: 1.8;
                    padding: 16px;
                    height: calc(100vh - 200px);
                }
                
                .editor-footer {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 12px;
                    color: #999;
                    font-size: 14px;
                }
            }
            
            .empty-editor {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                
                :deep(.el-empty) {
                    .el-empty__description {
                        color: #666;
                        font-size: 16px;
                        margin-bottom: 20px;
                    }
                    
                    .el-button--primary {
                        background-color: #0A2463;
                        border-color: #0A2463;
                        
                        &:hover, &:focus {
                            background-color: #1a3473;
                            border-color: #1a3473;
                        }
                    }
                }
            }
        }
    }
}
</style> 