class TodoList {
    static renderTodoList(todos, {
        onEditExecutor,
        onEditSchedule,
        onEditTitle,
        onEditDescription,
        onDelete,
        onComplete,
        onToggleDescription
    }) {
        const todosContainer = document.createElement('div');
        todosContainer.className = 'todo-container';
        
        todos.forEach(todo => {
            const todoElement = document.createElement('div');
            todoElement.className = 'todo-item';
            
            // 格式化日期
            const createdDate = new Date(todo.created_at).toLocaleString('zh-CN');
            const scheDate = new Date(todo.sche_time).toLocaleString('zh-CN');
            const completeDate = todo.complete_time ? 
                new Date(todo.complete_time).toLocaleString('zh-CN') : '';

            todoElement.innerHTML = `
                <div class="todo-header">
                    <div class="todo-actions">
                        <button class="complete-button" title="${todo.completed ? '取消完成' : '标记完成'}">
                            <img src="assets/icons/png/${todo.completed ? 'cancel_b.svg' : 'complete_b.svg'}" alt="${todo.completed ? '取消完成' : '标记完成'}" class="action-icon">
                        </button>
                    </div>
                    <h3>${todo.project} - ${todo.subproject} - ${todo.title}</h3>
                    <div class="todo-actions">
                        <button class="edit-button" title="编辑标题">
                            <img src="assets/icons/png/sliders_b.png" alt="编辑" class="action-icon">
                        </button>
                        <button class="delete-button delete-red" title="删除待办">
                            <img src="assets/icons/png/delete_b.png" alt="删除" class="action-icon">
                        </button>
                        <span class="status ${todo.completed ? 'completed' : 'pending'}">
                            ${todo.completed ? '已完成' : '进行中'}
                        </span>
                    </div>
                </div>
                <div class="todo-content">
                    <div class="todo-info">
                        <span class="label">执行人：</span>
                        <a href="#" class="executor-link">${todo.exeuser || '未分配'}</a>
                        <span class="spacer"></span>
                        <span class="label">创建人：</span>
                        <span class="value">${todo.adduser}</span>
                    </div>
                    <div class="todo-info">
                        <span class="label">计划时间：</span>
                        <a href="#" class="schedule-link">${scheDate}</a>
                        <span class="label">创建时间：</span>
                        <span class="value">${createdDate}</span>
                    </div>
                    ${todo.completed ? `
                        <div class="todo-info">
                            <span class="label">完成时间：</span>
                            <span class="value">${completeDate}</span>
                        </div>
                    ` : ''}
                    <div class="todo-description">
                        <div class="description-header">
                            <span>详细描述：</span>
                            <div class="description-actions">
                                <button class="edit-button" title="编辑描述">
                                    <img src="assets/icons/png/sliders_b.png" alt="编辑" class="action-icon">
                                </button>
                                <button class="toggle-button" title="展开/收起">
                                    <img src="assets/icons/png/chevron-down_b.png" alt="展开/收起" class="action-icon toggle-icon">
                                </button>
                            </div>
                        </div>
                        <div class="description-content">${todo.text || '无详细描述'}</div>
                    </div>
                </div>
            `;

            // 添加执行人链接点击事件
            const executorLink = todoElement.querySelector('.executor-link');
            executorLink.addEventListener('click', (e) => {
                e.preventDefault();
                onEditExecutor(todo);
            });

            // 添加计划时间链接点击事件
            const scheduleLink = todoElement.querySelector('.schedule-link');
            scheduleLink.addEventListener('click', (e) => {
                e.preventDefault();
                onEditSchedule(todo);
            });

            // 添加编辑按钮事件
            const editButton = todoElement.querySelector('.edit-button');
            editButton.addEventListener('click', () => {
                onEditTitle(todo);
            });

            // 添加描述编辑按钮事件
            const descriptionEditButton = todoElement.querySelector('.todo-description .edit-button');
            descriptionEditButton.addEventListener('click', () => {
                onEditDescription(todo);
            });

            // 添加删除按钮事件
            const deleteButton = todoElement.querySelector('.delete-button');
            deleteButton.addEventListener('click', () => {
                onDelete(todo);
            });

            // 添加完成/取消完成按钮事件
            const completeButton = todoElement.querySelector('.complete-button');
            completeButton.addEventListener('click', () => {
                onComplete(todo);
            });

            // 添加展开/收起按钮事件
            const toggleButton = todoElement.querySelector('.toggle-button');
            const descriptionContent = todoElement.querySelector('.description-content');
            const toggleIcon = toggleButton.querySelector('.toggle-icon');
            
            // 移除可能存在的旧事件监听器
            const newToggleButton = toggleButton.cloneNode(true);
            toggleButton.parentNode.replaceChild(newToggleButton, toggleButton);
            
            // 添加新的事件监听器
            newToggleButton.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                onToggleDescription(descriptionContent, newToggleButton);
            });

            todosContainer.appendChild(todoElement);
        });

        return todosContainer;
    }
}

export default TodoList;