XNSim/XNSimHtml/components/todo/todo-modal.js

class TodoModal {
    static createModal(type) {
        // 创建样式
        const style = document.createElement('style');
        style.textContent = `
            .modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999;
            }
            .modal-content {
                background-color: white;
                border-radius: 8px;
                width: 400px;
                max-width: 90%;
                max-height: 90vh;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                position: relative;
                margin: auto;
                display: flex;
                flex-direction: column;
            }
            .modal-header {
                padding: 15px;
                border-bottom: 1px solid #e9ecef;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-shrink: 0;
            }
            .modal-header h3 {
                margin: 0;
                color: #212529;
            }
            .close-button {
                background: none;
                border: none;
                font-size: 1.5em;
                color: #6c757d;
                cursor: pointer;
                padding: 0;
                line-height: 1;
            }
            .modal-body {
                padding: 15px;
                overflow-y: auto;
                flex: 1;
            }
            .modal-footer {
                padding: 15px;
                border-top: 1px solid #e9ecef;
                display: flex;
                justify-content: flex-end;
                gap: 10px;
                flex-shrink: 0;
            }
            .form-group {
                margin-bottom: 15px;
                width: 100%;
                box-sizing: border-box;
            }
            .form-group label {
                display: block;
                margin-bottom: 5px;
                color: #495057;
            }
            .form-group input[type="text"],
            .form-group select,
            .form-group textarea,
            .form-group input[type="datetime-local"] {
                width: 100%;
                padding: 8px 10px;
                border: 1px solid #ddd;
                border-radius: 4px;
                font-size: 14px;
                margin-bottom: 5px;
                background-color: white;
                box-sizing: border-box;
            }
            .form-group input[type="text"]:focus,
            .form-group select:focus,
            .form-group textarea:focus,
            .form-group input[type="datetime-local"]:focus {
                border-color: #7986E7;
                outline: none;
                box-shadow: 0 0 0 2px rgba(121, 134, 231, 0.2);
            }
            .form-group select:disabled {
                background-color: #f8f9fa;
                cursor: not-allowed;
            }
            .form-group select[contenteditable="true"] {
                cursor: text;
            }
            .form-group input[list] {
                width: 100%;
                padding: 8px 10px;
                border: 1px solid #ddd;
                border-radius: 4px;
                font-size: 14px;
                margin-bottom: 5px;
                background-color: white;
            }
            .form-group input[list]:focus {
                border-color: #7986E7;
                outline: none;
                box-shadow: 0 0 0 2px rgba(121, 134, 231, 0.2);
            }
            .form-group datalist {
                width: 100%;
                padding: 8px 10px;
                border: 1px solid #ddd;
                border-radius: 4px;
                font-size: 14px;
                background-color: white;
            }
            .form-group input[list]::-webkit-calendar-picker-indicator {
                display: none;
            }
            .form-group input[list]::-webkit-list-button {
                display: none;
            }
            .form-group input[list]::-webkit-datetime-edit {
                padding: 0;
            }
            .form-group input[list]::-webkit-datetime-edit-fields-wrapper {
                padding: 0;
            }
            .form-group input[list]::-webkit-datetime-edit-text {
                padding: 0 2px;
            }
            .form-group input[list]::-webkit-datetime-edit-hour-field,
            .form-group input[list]::-webkit-datetime-edit-minute-field,
            .form-group input[list]::-webkit-datetime-edit-second-field,
            .form-group input[list]::-webkit-datetime-edit-ampm-field {
                padding: 0 2px;
            }
            .form-group input[list] + datalist {
                position: absolute;
                background: white;
                border: 1px solid #ddd;
                border-radius: 4px;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                max-height: 200px;
                overflow-y: auto;
                z-index: 1000;
            }
            .form-group input[list] + datalist option {
                padding: 8px 10px;
                cursor: pointer;
                font-size: 14px;
                color: #333;
            }
            .form-group input[list] + datalist option:hover {
                background-color: #f5f5f5;
            }
            .save-button, .cancel-button {
                padding: 8px 16px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
                font-size: 14px;
            }
            .save-button {
                background-color: #7986E7;
                color: white;
            }
            .save-button:hover {
                background-color: #6875D6;
            }
            .cancel-button {
                background-color: #6c757d;
                color: white;
            }
            .cancel-button:hover {
                background-color: #5a6268;
            }
            /* 日期时间选择器样式 */
            .form-group input[type="datetime-local"] {
                width: 100%;
                padding: 10px 14px;
                border: 1px solid #d0d5dd;
                border-radius: 8px;
                font-size: 16px;
                background-color: #fff;
                font-family: inherit;
                color: #222;
                box-sizing: border-box;
                box-shadow: 0 1px 2px rgba(16,30,54,0.04);
                transition: border-color 0.2s, box-shadow 0.2s;
            }
            .form-group input[type="datetime-local"]:focus {
                border-color: #7986E7;
                outline: none;
                box-shadow: 0 0 0 2px rgba(121, 134, 231, 0.15);
            }
            .form-group input[type="datetime-local"]::-webkit-calendar-picker-indicator {
                cursor: pointer;
                padding: 4px;
                margin-right: 4px;
                opacity: 0.7;
                transition: opacity 0.2s;
            }
            .form-group input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
                opacity: 1;
            }
            .form-group input[type="datetime-local"]::-webkit-datetime-edit {
                padding: 0;
            }
            .form-group input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
                padding: 0;
            }
            .form-group input[type="datetime-local"]::-webkit-datetime-edit-text {
                padding: 0 2px;
            }
            .form-group input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
            .form-group input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
            .form-group input[type="datetime-local"]::-webkit-datetime-edit-second-field,
            .form-group input[type="datetime-local"]::-webkit-datetime-edit-ampm-field {
                padding: 0 2px;
            }
            .form-group textarea {
                width: 100%;
                min-height: 100px;
                padding: 8px 10px;
                border: 1px solid #ddd;
                border-radius: 4px;
                font-size: 14px;
                resize: vertical;
            }
            .form-group textarea:focus {
                border-color: #7986E7;
                outline: none;
                box-shadow: 0 0 0 2px rgba(121, 134, 231, 0.2);
            }
            .custom-select {
                position: relative;
                width: 100%;
            }
            .select-options {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: white;
                border: 1px solid #7986E7;
                border-radius: 4px;
                box-shadow: 0 4px 8px rgba(121, 134, 231, 0.2);
                max-height: 200px;
                overflow-y: auto;
                z-index: 1000;
                margin-top: 2px;
            }
            .select-option {
                padding: 8px 10px;
                cursor: pointer;
                font-size: 14px;
                color: #333;
                transition: all 0.2s ease;
            }
            .select-option:hover {
                background-color: #7986E7;
                color: white;
            }
            .select-option:active {
                background-color: #6875D6;
            }
            .select-options::-webkit-scrollbar {
                width: 6px;
            }
            .select-options::-webkit-scrollbar-track {
                background: #f1f1f1;
                border-radius: 3px;
            }
            .select-options::-webkit-scrollbar-thumb {
                background: #7986E7;
                border-radius: 3px;
            }
            .select-options::-webkit-scrollbar-thumb:hover {
                background: #6875D6;
            }
            /* 按钮风格优化 */
            .modal-footer .save-button {
                background-color: #7986E7;
                color: #fff;
                border-radius: 6px;
                font-size: 15px;
                padding: 8px 24px;
                font-weight: 500;
                border: none;
                box-shadow: 0 1px 2px rgba(121,134,231,0.08);
                transition: background 0.2s;
            }
            .modal-footer .save-button:hover {
                background-color: #5c6bc0;
            }
            .modal-footer .cancel-button {
                background-color: #f5f5f5;
                color: #333;
                border-radius: 6px;
                font-size: 15px;
                padding: 8px 24px;
                font-weight: 500;
                border: none;
                margin-right: 8px;
                box-shadow: 0 1px 2px rgba(16,30,54,0.04);
                transition: background 0.2s;
            }
            .modal-footer .cancel-button:hover {
                background-color: #e0e0e0;
            }
        `;
        
        const modal = document.createElement('div');
        modal.className = 'modal';
        
        // 根据类型创建不同的模态框内容
        if (type === 'executor') {
            modal.innerHTML = `
                <div class="modal-content">
                    <div class="modal-header">
                        <h3>编辑执行人</h3>
                        <button class="close-button">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="executor">选择执行人：</label>
                            <select id="executor" class="form-control">
                                <option value="">请选择执行人</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="save-button">保存</button>
                        <button class="cancel-button">取消</button>
                    </div>
                </div>
            `;
        } else if (type === 'schedule') {
            modal.innerHTML = `
                <div class="modal-content">
                    <div class="modal-header">
                        <h3>编辑计划时间</h3>
                        <button class="close-button">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="schedule">选择计划时间：</label>
                            <input type="datetime-local" id="schedule" class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="save-button">保存</button>
                        <button class="cancel-button">取消</button>
                    </div>
                </div>
            `;
        } else if (type === 'new-todo') {
            modal.innerHTML = `
                <div class="modal-content">
                    <div class="modal-header">
                        <h3>新增待办</h3>
                        <button class="close-button">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="title">标题：</label>
                            <input type="text" id="title" class="form-control" required placeholder="请输入待办标题">
                        </div>
                        <div class="form-group">
                            <label for="project">项目：</label>
                            <div class="custom-select">
                                <input type="text" id="project" class="form-control" placeholder="请选择或输入项目">
                                <div class="select-options" id="project-options"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="subproject">子项目：</label>
                            <div class="custom-select">
                                <input type="text" id="subproject" class="form-control" placeholder="请选择或输入子项目">
                                <div class="select-options" id="subproject-options"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="text">详细描述：</label>
                            <textarea id="text" class="form-control"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="schedule">计划时间：</label>
                            <input type="datetime-local" id="schedule" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="executor">执行人：</label>
                            <select id="executor" class="form-control" required>
                                <option value="">请选择执行人</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="save-button">保存</button>
                        <button class="cancel-button">取消</button>
                    </div>
                </div>
            `;
        } else if (type === 'edit-title') {
            modal.innerHTML = `
                <div class="modal-content">
                    <div class="modal-header">
                        <h3>编辑标题</h3>
                        <button class="close-button">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="title">标题：</label>
                            <input type="text" id="title" class="form-control" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="save-button">保存</button>
                        <button class="cancel-button">取消</button>
                    </div>
                </div>
            `;
        } else if (type === 'edit-description') {
            modal.innerHTML = `
                <div class="modal-content">
                    <div class="modal-header">
                        <h3>编辑详细描述</h3>
                        <button class="close-button">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="text">详细描述：</label>
                            <textarea id="text" class="form-control" rows="6"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="save-button">保存</button>
                        <button class="cancel-button">取消</button>
                    </div>
                </div>
            `;
        }

        // 添加关闭按钮事件
        const closeButton = modal.querySelector('.close-button');
        closeButton.addEventListener('click', () => {
            modal.remove();
            style.remove();
        });

        // 添加取消按钮事件
        const cancelButton = modal.querySelector('.cancel-button');
        cancelButton.addEventListener('click', () => {
            modal.remove();
            style.remove();
        });

        // 将样式添加到文档头部
        document.head.appendChild(style);

        return { modal, style };
    }
}

export default TodoModal;