<template>
    <el-dialog
        v-model="dialogVisible"
        title="章节目录"
        width="1000px"
        :before-close="handleClose"
        class="catalog-dialog"
        :close-on-click-modal="true"
        :close-on-press-escape="true"
        destroy-on-close
    >
        <div class="catalog-dialog-content">
            <!-- 使用BookCatalog组件展示目录 -->

            <BookCatalog 
                :chapters="chapters"
                :max-display-chapters="9999999"
                :current-chapter-id="currentChapterId"
                @chapter-click="handleChapterClick"
            />
        </div>
        
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import { ref, watch } from 'vue';
import BookCatalog from './BookCatalog.vue';

export default {
    name: 'CatalogDialog',
    components: {
        BookCatalog
    },
    props: {
        modelValue: {
            type: Boolean,
            default: false
        },
        chapters: {
            type: Array,
            default: () => []
        },
        currentChapterId: {
            type: String,
            default: ''
        }
    },
    emits: ['update:modelValue', 'chapter-select'],
    setup(props, { emit }) {
        const dialogVisible = ref(props.modelValue);

        // 监听props变化
        watch(() => props.modelValue, (newVal) => {
            dialogVisible.value = newVal;
        });

        // 监听内部状态变化
        watch(dialogVisible, (newVal) => {
            emit('update:modelValue', newVal);
        });

        // 关闭弹窗
        const handleClose = () => {
            dialogVisible.value = false;
        };

        // 章节点击处理
        const handleChapterClick = (chapterId) => {
            emit('chapter-select', chapterId);
            handleClose();
        };

        return {
            dialogVisible,
            handleClose,
            handleChapterClick
        };
    }
};
</script>

<style lang="scss" scoped>
:deep(.catalog-dialog) {
    .el-dialog__header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #eee;
        
        .el-dialog__title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
    }
    
    .el-dialog__body {
        padding: 0;
        max-height: 70vh;
        overflow-y: auto;
    }
    
    .el-dialog__footer {
        background-color: #f8f9fa;
        border-top: 1px solid #eee;
    }
}

.catalog-dialog-content {
    width: 100%;
    min-height: 400px;
    
    // 重写BookCatalog的样式以适配弹窗
    :deep(.book-catalog-container) {
        box-shadow: none;
        border-radius: 0;
        margin-bottom: 0;
        
        .section-header {
            display: none; // 隐藏标题，因为Dialog已经有标题了
        }
        
        .chapter-grid {
            margin-bottom: 10px;
            
            @media (max-width: 768px) {
                grid-template-columns: repeat(2, 1fr);
            }
            
            @media (max-width: 480px) {
                grid-template-columns: 1fr;
            }
        }
        
        .catalog-footer {
            margin-top: 10px;
            padding-top: 10px;
        }
    }
}

.dialog-footer {
    display: flex;
    justify-content: center;
    gap: 10px;
}

// 响应式调整
@media screen and (max-width: 768px) {
    :deep(.catalog-dialog) {
        .el-dialog {
            width: 95% !important;
            margin-top: 5vh !important;
        }
        
        .el-dialog__body {
            max-height: 60vh;
        }
    }
}
</style> 