// main.js
const { createApp, ref, defineComponent } = Vue;
// 在你的组件中

const TextAuditComponent = defineComponent({
    template: `
            <!-- 搜索框 -->
            <div class="search-bar">
                <input v-model="searchKeyword" placeholder="搜索公文" />
                <button @click="search">查询</button>
            </div>
            
            <!-- 公文审核表格 -->
            <div class="document-table-container">
                <table class="document-table">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>公文名称</th>
                            <th>密级</th>
                            <th>发文机关</th>
                            <th>发送时间</th>
                            <th>公文状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(document, index) in documents" :key="document.id">
                            <td>{{ index + 1 }}</td>
                            <td>{{ document.title }}</td>
                            <td>{{ document.securityLevel }}</td>
                            <td>{{ document.office }}</td>
                            <td>{{ document.sendTime }}</td>
                            <td>{{ document.is_pass === 1 ? '已通过' : '未通过' }}</td>
                            <td>
                                <button @click="downloadDocument(document)">下载</button>
                                <button @click="deleteDocument(document)">删除</button>
                                <button @click="approveDocument(document)">通过</button>
                                <button @click="rejectDocument(document)">不通过</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
    `,
    setup() {
        // 数据
        const searchKeyword = ref('');
        const documents = ref([]);

        // 查询函数
        function search() {
            fetch('/get_documents_in_docjudge/')
                .then(response => response.json()) // 将响应转换为JSON格式
                .then(data => {
                    // 将获取到的文档赋值给 documents 变量
                    documents.value = data;
                })
                .catch(error => {
                    // 处理错误
                    console.error('获取文档时出错：', error);
                });
        }

        function getCookie(name) {
            const value = `; ${document.cookie}`;
            const parts = value.split(`; ${name}=`);
            if (parts.length === 2) {
                return parts.pop().split(';').shift();
            }
        }
        const csrftoken = getCookie('csrftoken');

        // 操作函数
        function downloadDocument(document) {
            const fileAddress = document.file_address.replace('.docx', ''); // 去除 .docx 后缀
            const filename = `${fileAddress}.enc`; // 替换为 .enc 后缀
            console.log('document:', filename);
            //window.open(fileURL, '_blank');
            // 向后端发送解密文件的请求
            fetch('/decrypt_document/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrftoken, // 设置 CSRF 令牌
                },
                body: JSON.stringify({ file_title: fileAddress, file_name: filename }), // 传递修改后的文件地址
            })
            .then(response => {
                // 处理响应
                if (response.ok) {
                // 解密成功
                    response.json().then(data => {
                        const newFileURL = data.decrypted_file_address;
                        console.log('新的下载链接:', newFileURL);
                        window.open(newFileURL, '_blank'); // 下载新的解密文件
                    });
                    console.log('文件解密成功');
                } else {
                    // 解密失败或其他错误
                    console.error('文件解密失败');
                }
            })
            .catch(error => {
                console.error('请求出错:', error);
            });
        }

        function deleteDocument(document) {
            // 获取要删除的文档的 ID 或其他唯一标识符
            const documentname = document.title; // 假设 ID 是文档的唯一标识符

            const confirmation = confirm(`确定要删除文档 ${documentname} 吗？`);
            if (confirmation) {
                // 发送删除请求
                fetch(`/delete_document/${documentname}/`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRFToken': csrftoken, // 如果你的后端需要 CSRF 令牌
                        'Content-Type': 'application/json'
                    },
                })
                .then(response => {
                    if (response.ok) {
                        // 如果删除成功，更新前端页面中的文档列表
                        documents.value = documents.value.filter(doc => doc.title !== documentname);
                        console.log('删除成功');
                    } else {
                        console.error('删除失败');
                    }
                })
                .catch(error => {
                    console.error('删除文档时出错：', error);
                });
            } else {
                // 用户取消了删除操作
                console.log('取消删除');
            }
        }

        function approveDocument(document) {
            // 通过公文的操作
            const requestData = {
                documentName: document.title,
            };

            fetch('/approveDocument/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrftoken,
                },
                body: JSON.stringify(requestData),
            })
            .then(response => {
                if (response.ok) {
                    return response.json(); // 解析 JSON 数据
                }
                throw new Error('Network response was not ok.');
            })
            .then(data => {
                console.log('Document status updated:', data);
                // 可以在这里执行其他操作，例如更新界面或显示成功消息
            })
            .catch(error => {
                console.error('Error updating document status:', error);
            });

            //3秒后重新加载当前页面
            setTimeout(() => {
                window.location.reload(); // 重新加载当前页面
            }, 3000); // 3秒后重新加载
        }

        function rejectDocument(document) {
            // 不通过公文的操作
            const requestData = {
                documentName: document.title,
            };

            fetch('/rejectDocument/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrftoken,
                },
                body: JSON.stringify(requestData),
            })
            .then(response => {
                if (response.ok) {
                    return response.json(); // 解析 JSON 数据
                }
                throw new Error('Network response was not ok.');
            })
            .then(data => {
                console.log('Document status updated:', data);
                // 可以在这里执行其他操作，例如更新界面或显示成功消息
            })
            .catch(error => {
                console.error('Error updating document status:', error);
            });

            //3秒后重新加载当前页面
            setTimeout(() => {
                window.location.reload(); // 重新加载当前页面
            }, 3000); // 3秒后重新加载
        }

        // 初始化数据
        search();

        // 返回给模板使用的数据和方法
        return {
            searchKeyword,
            documents,
            search,
            downloadDocument,
            deleteDocument,
            approveDocument,
            rejectDocument
        };
    }
});

// 定义 UserManagerComponent 组件
const UserManagerComponent = defineComponent({
    data() {
        return {
            accessLevel: window.accessLevel || 0,
        };
    },

    template: `
            <!-- 搜索框和查询按钮 -->
            <div class="search-bar" v-show="accessLevel === 1">
                <input v-model="searchKeyword" placeholder="请输入用户关键字" />
                <button @click="search">查询</button>
            </div>
            
            <div class="user-table-container" v-show="accessLevel !== 1">
                <p>对不起，你不是管理员，没有权限进行用户管理操作！</p>
            </div>
            <!-- 用户表格 -->
            <div class="user-table-container" v-show="accessLevel === 1">
                <table class="user-table">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>学号</th>
                            <th>用户名</th>
                            <th>邮箱</th>
                            <th>密码</th>
                            <th>访问权限</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(user, index) in users" :key="user.id">
                            <td>{{ index + 1 }}</td>
                            <td>{{ user.id }}</td>
                            <td>{{ user.username_up }}</td>
                            <td>{{ user.email }}</td>
                            <td>{{ user.password_up }}</td>
                            <td>{{ user.access_level }}</td>
                            <td>
                                <button @click="editUser(user)">修改</button>
                                <button @click="deleteUser(user)">删除</button>
                                <button @click="managePermissions(user)">管理权限</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            
            <!-- 操作按钮 -->
            <div class="button-bar">
                <button @click="createUser">新增用户</button>
            </div>
        </div>
    `,
    setup() {
        // 数据
        const searchKeyword = ref('');
        const users = ref([]);
    
        // 查询函数
        function search() {
        // 发送请求到后端接口，获取符合搜索关键字的用户列表
            fetch('/get_users/')  // 替换为实际的后端接口地址
                .then(response => response.json())
                .then(data => {
                    users.value = data; // 将后端返回的用户信息赋值给 users
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }
    
        // 操作函数
        function createUser() {
            // 新增用户的操作

            window.location.href = '/create_user'; // 替换为您要跳转的页面 URL
        }
    
        function editUser(user) {
            // 修改用户的操作
            // 获取特定用户的 ID
            const userId = user.id;

            // 跳转到修改用户信息的页面，并携带用户 ID
            window.location.href = `/change_userinfo/${userId}`;
        }

        function getCookie(name) {
            const value = `; ${document.cookie}`;
            const parts = value.split(`; ${name}=`);
            if (parts.length === 2) {
                return parts.pop().split(';').shift();
            }
        }

        function deleteUser(user) {
                const userId = user.id;
                const user_accessLevel = user.access_level;
                const loggedInUserId = document.getElementById('loggedInUserId').value;

                if (userId === loggedInUserId || user_accessLevel === 1) {
                    if (userId === loggedInUserId){
                        alert('你不能删除自己的用户信息');
                        return;
                    }
                    else if (user_accessLevel === 1){
                        alert('该用户为管理员，无法删除');
                        return;
                    }
                }

                const confirmation = confirm('确认删除用户吗？');

                if (confirmation) {
                    const csrftoken = getCookie('csrftoken'); // 获取 CSRF 令牌

                    fetch(`/delete_user/${userId}/`, {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRFToken': csrftoken, // 使用获取到的 CSRF 令牌
                        },
                    })
                    .then(response => {
                        if (response.ok) {
                            location.reload();
                        }
                    })
                    .catch(error => console.error('Error:', error));
                }
        }
    
        function managePermissions(user) {
            // 管理权限的操作
            // 获取特定用户的 ID
            const userId = user.id;

            // 跳转到修改用户信息的页面，并携带用户 ID
            window.location.href = `/manage_permission/${userId}`;
        }
    
        // 初始化数据
        search();
    
        // 返回给模板使用的数据和方法
        return {
            searchKeyword,
            users,
            search,
            createUser,
            editUser,
            deleteUser,
            managePermissions,
        };
    }    
});

// 定义 TextManagerComponent 组件
const TextManagerComponent = defineComponent({
    template: `
            <!-- 搜索框和查询按钮 -->
            <div class="search-bar">
                <input v-model="searchKeyword" placeholder="请输入公文关键字" />
                <button @click="search">查询</button>
            </div>
            
            <!-- 公文表格 -->
            <div class="document-table-container">
                <table class="document-table">
                    <thead>
                        <tr>
                            <th>公文</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="document in documents" :key="document.id">
                            <td>{{ document.title }}</td>
                            <td>{{ document.is_sent === 1 ? '已发送' : '未发送' }}</td>
                            <td>
                                <button @click="deleteDocument(document)">删除</button>
                                <button @click="downloadDocument(document)">下载</button>
                                <button @click="sendDocument(document)">发送</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
    `,
    mounted() {
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        if (csrfToken) {
            console.log('CSRF Token能够找到');
        } else {
            console.error('CSRF Token未找到或未加载完成');
        }
    },

    setup() {
        // 数据
        const searchKeyword = ref('');
        const documents = ref([]);
        const csrfToken = ref('');

        // 查询函数
        function search() {
            // 发送请求到后端接口，获取符合搜索关键字的公文列表
                fetch('/get_documents_in_docmanager/')
                .then(response => response.json()) // 将响应转换为JSON格式
                .then(data => {
                    // 将获取到的文档赋值给 documents 变量
                    documents.value = data;
                })
                .catch(error => {
                    // 处理错误
                    console.error('获取文档时出错：', error);
                });
        }

        // 操作函数
        function getCookie(name) {
            const value = `; ${document.cookie}`;
            const parts = value.split(`; ${name}=`);
            if (parts.length === 2) {
                return parts.pop().split(';').shift();
            }
        }
        const csrftoken = getCookie('csrftoken');

        function deleteDocument(document) {
            // 获取要删除的文档的 ID 或其他唯一标识符
            const documentname = document.title; // 假设 ID 是文档的唯一标识符

            const confirmation = confirm(`确定要删除文档 ${documentname} 吗？`);
            if (confirmation) {
                // 发送删除请求
                fetch(`/delete_document/${documentname}/`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRFToken': csrftoken, // 如果你的后端需要 CSRF 令牌
                        'Content-Type': 'application/json'
                    },
                })
                .then(response => {
                    if (response.ok) {
                        // 如果删除成功，更新前端页面中的文档列表
                        documents.value = documents.value.filter(doc => doc.title !== documentname);
                        console.log('删除成功');
                    } else {
                        console.error('删除失败');
                    }
                })
                .catch(error => {
                    console.error('删除文档时出错：', error);
                });
            } else {
                // 用户取消了删除操作
                console.log('取消删除');
            }
        }

        function downloadDocument(document) {
            const fileAddress = document.file_address.replace('.docx', ''); // 去除 .docx 后缀
            const filename = `${fileAddress}.enc`; // 替换为 .enc 后缀
            console.log('document:', filename);
            //window.open(fileURL, '_blank');
            // 向后端发送解密文件的请求
            fetch('/decrypt_document/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrftoken, // 设置 CSRF 令牌
                },
                body: JSON.stringify({file_title: fileAddress, file_name: filename}), // 传递修改后的文件地址
            })
                .then(response => {
                    // 处理响应
                    if (response.ok) {
                        // 解密成功
                        response.json().then(data => {
                            const newFileURL = data.decrypted_file_address;
                            console.log('新的下载链接:', newFileURL);
                            window.open(newFileURL, '_blank'); // 下载新的解密文件
                        });
                        console.log('文件解密成功');
                    } else {
                        // 解密失败或其他错误
                        console.error('文件解密失败');
                    }
                })
                .catch(error => {
                    console.error('请求出错:', error);
                });
        }

        function sendDocument(document) {
            const token = csrfToken.value;
            // 发送公文的操作
            const requestData = {
                documentName: document.title,
                ccOffice: document.cc_office
            };

            fetch('/update_document_status/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': token,
                },
                body: JSON.stringify(requestData),
            })
            .then(response => {
                if (response.ok) {
                    return response.json(); // 解析 JSON 数据
                }
                throw new Error('Network response was not ok.');
            })
            .then(data => {
                console.log('Document status updated:', data);
                // 可以在这里执行其他操作，例如更新界面或显示成功消息
            })
            .catch(error => {
                console.error('Error updating document status:', error);
            });

            //3秒后重新加载当前页面
            setTimeout(() => {
                window.location.reload(); // 重新加载当前页面
            }, 3000); // 3秒后重新加载
        }

        search();

        // 返回给模板使用的数据和方法
        return {
            searchKeyword,
            documents,
            search,
            csrfToken,
            sendDocument,
            downloadDocument,
            deleteDocument,
        };
    }
});

const TextEditorComponent = defineComponent({
    template: `
            <input type="text" v-model="title" placeholder="请输入标题" class="title-input">
            <input type="text" v-model="cc_office" placeholder="抄送机关" class="other-input">
            <input type="text" v-model="securityLevel" placeholder="密级" class="other-input">
            <input type="text" v-model="file_address" placeholder="文件名称" class="other-input">
            <div id="editor"></div>
            <div class="editor-buttons">
                <button @click="save">保存</button>
                <button @click="cancel">取消</button>
            </div>
    `,
    data() {
        return {
            title: '', // 绑定标题的数据属性
            securityLevel: '',
            file_address: '',
            cc_office: '',
        };
    },
    mounted() {
        const quill = new Quill('#editor', {
            theme: 'snow',
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline'],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    ['link', 'image'],
                    ['clean']
                ]
            }
        });
    },
    methods: {
        save() {
            const title = this.title;
            const content = document.querySelector('.ql-editor').innerHTML;
            const securityLevel = this.securityLevel;
            const file_address = this.file_address;
            const cc_office = this.cc_office;
            console.log('Title:', title);
            console.log('Content:', content);
            console.log('cc_office:', cc_office);
            console.log('securityLevel:', securityLevel);
            console.log('file_address:', file_address);

            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            console.log('CSRF Token:', csrfToken);

            const requestData = {
                title: title,
                content: content,
                securityLevel: securityLevel,
                file_address: file_address,
                cc_office: cc_office,
            };

            fetch('/save_document/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': csrfToken,
                },
                body: JSON.stringify(requestData),
            })
            .then(response => {
                console.log('response:', response.ok);
                if (response.ok) {
                    return response.text(); // 解析 JSON 数据
                }
                throw new Error('Network response was not ok.');
            })
            .then(data => {
                console.log('Data:', data);
            })
            .catch(error => {
                console.error('Error:', error);
            });

            //3秒后重新加载当前页面
            setTimeout(() => {
                window.location.reload(); // 重新加载当前页面
            }, 3000); // 3秒后重新加载
        },
        cancel() {
            // 取消按钮的点击事件处理逻辑
            // 例如，关闭当前标签页
            // 3秒后重新加载当前页面
            setTimeout(() => {
                window.location.reload(); // 重新加载当前页面
            }, 3000); // 3秒后重新加载
        },
    }
});

// 在每次打开“公文草拟”标签页时初始化Quill富文本编辑器
function initializeQuill() {
    const editorContainer = document.getElementById('editor');
    if (editorContainer) {
        new Quill(editorContainer, {
            theme: 'snow',
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline'],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    ['link', 'image'],
                    ['clean']
                ]
            }
        });
    }
}

const WelcomeComponent = defineComponent({
    template: `
        <div class="tab-content homepage">
            <h1>欢迎使用公文传输系统</h1>
            <p>如果需要帮助请点击上方帮助文档</p>
        </div>
    `
});

const LogManagerComponent = defineComponent({
    template: `
        <button @click="fetchLogs">检查日志</button>
        <div class="tab-content">
            <h2>用户部分日志</h2>
            <div v-for="(log, index) in userLogs" :key="index">
                <!-- 根据日志的具体字段展示 -->
                <p>{{ log.operation }}</p>
                <!-- 其他日志字段展示 -->
            </div>
 
            <h2>公文操作部分日志</h2>
            <div v-for="(log, index) in documentLogs" :key="index">
                <!-- 根据日志的具体字段展示 -->
                <p>{{ log.operation }}</p>
                <!-- 其他日志字段展示 -->
            </div>
        </div>
    `,
    data() {
        return {
            userLogs: [],
            documentLogs: []
        };
    },
    methods: {
        fetchUserLogs() {
            fetch('/get_user_logs/')   // 替换为实际的后端接口地址
                .then(response => response.json())
                .then(data => {
                    this.userLogs = data;
                })
                .catch(error => {
                    console.error('Error fetching user logs:', error);
                });
        },
        fetchDocumentLogs() {
            fetch('/get_document_logs/')  // 替换为实际的后端接口地址
                .then(response => response.json())
                .then(data => {
                    this.documentLogs = data;
                })
                .catch(error => {
                    console.error('Error fetching document logs:', error);
                });
        },
        fetchLogs() {
            this.fetchUserLogs();
            this.fetchDocumentLogs();
        }
    },
    mounted() {
        // 在组件加载时获取日志数据
        this.fetchLogs();
    }
});

const sidebarApp = createApp({
    // ...其他代码
    setup() {
        const activeTab = ref(1);
        const tabs = ref([
            { id: 1, label: '首页', component: WelcomeComponent, closable: false }
        ]);

        function switchTab(tabId) {
            activeTab.value = tabId;
            tabs.value.forEach(tab => {
                tab.active = tab.id === tabId;
            });
        }

        function addNewTab(page) {
            const existingTab = tabs.value.find(tab => tab.label === page);
            if (existingTab) {
                switchTab(existingTab.id);
            } else {
                const newTabId = tabs.value.length + 1;
                let contentComponent = null;
        
                if (page === '首页') {
                    contentComponent = WelcomeComponent;
                } else if (page === '公文草拟') {
                    contentComponent = TextEditorComponent;
                    initializeQuill(); // 在每次打开“公文草拟”标签页时初始化Quill富文本编辑器
                } else if (page === '公文管理') {
                    contentComponent = TextManagerComponent;
                } else if (page === '用户管理') {
                    contentComponent = UserManagerComponent;
                } else if (page === '公文审核'){
                    contentComponent = TextAuditComponent;
                } else if (page === '日志管理') {
                    contentComponent = LogManagerComponent;
                }
                else{
                    contentComponent = defineComponent({
                        template: `<div class="tab-content">这是${page}的内容</div>`
                    });
                }
        
                const newTab = { id: newTabId, label: page, component: contentComponent };
                tabs.value.push(newTab);
                switchTab(newTabId);
            }
        }

        function closeTab(tabId) {
            const tabIndex = tabs.value.findIndex(tab => tab.id === tabId);
            if (tabIndex !== -1) {
                tabs.value.splice(tabIndex, 1);
                if (activeTab.value === tabId) {
                    activeTab.value = tabs.value.length > 0 ? tabs.value[0].id : null;
                }
            }
        }

        return {
            tabs,
            activeTab,
            switchTab,
            addNewTab,
            closeTab
        };
    },
    template: `
        <div class="sidebar">
            <div class="tabs">
                <div v-for="tab in tabs" :key="tab.id" :class="{ 'tab': true, 'active': tab.active }" @click="switchTab(tab.id)">
                    {{ tab.label }}
                    <button v-if="tab.label !== '首页'" class="close-button" @click.stop="closeTab(tab.id)">&times;</button>
                </div>
            </div>
            <div class="tab-content">
                <component :is="activeTab ? tabs.find(tab => tab.id === activeTab).component : 'div'"></component>
            </div>
        </div>
    `
});

const sidebarContainer = sidebarApp.mount('#sidebarContainer');


const navbarApp = createApp({
    methods: {
        handleTabClick(page) {
            sidebarContainer.addNewTab(page);
        }
    }
}).mount('.navbar-left');app.component('navbar-left', {
    template: `
        <div class="navbar-left">
            <div class="nav-links">
                <a href="#" class="tab-button" @click="changePage('homePage')">首页</a>
                <a href="#" class="tab-button" @click="changePage('documentManagementPage')">公文管理</a>
                <a href="#" class="tab-button" @click="changePage('documentReviewPage')">公文审核</a>
                <a href="#" class="tab-button" @click="changePage('documentDraftPage')">公文草拟</a>
                <a href="#" class="tab-button" @click="changePage('userManagementPage')">用户管理</a>
                <a href="#" class="tab-button" @click="changePage('logManagementPage')">日志管理</a>
            </div>
        </div>
    `
});

app.mount('#navbar-left');