XNSim/XNSimHtml/components/model-config/datetime.js

/**
 * 日期时间处理模块
 * @type {module}
 */
import { updateElementValue } from './xml-handler.js';

/**
 * 显示日期时间选择对话框
 * @param {HTMLInputElement} inputElement - 输入元素
 * @param {Document} xmlDoc - XML文档对象
 * @param {Function} markEdited - 标记已编辑的回调函数
 * @param {Element} context - 上下文元素，用于访问shadowRoot
 */
export function showDateTimeDialog(inputElement, xmlDoc, markEdited, context) {
    // 解析当前日期和时间
    let currentDate = new Date();
    let currentTime = '00:00:00';
    
    if (inputElement.value) {
        try {
            const parts = inputElement.value.split(' ');
            if (parts.length >= 1) {
                const dateParts = parts[0].split('-');
                if (dateParts.length === 3) {
                    const year = parseInt(dateParts[0]);
                    const month = parseInt(dateParts[1]) - 1; // 月份从0开始
                    const day = parseInt(dateParts[2]);
                    currentDate = new Date(year, month, day);
                }
            }
            
            if (parts.length >= 2) {
                currentTime = parts[1];
            }
        } catch (error) {
            console.error('解析日期时间失败:', error);
            currentDate = new Date();
        }
    }
    
    // 创建模态框
    const modal = document.createElement('div');
    modal.className = 'modal';
    modal.id = 'dateTimeModal';
    
    // 获取年、月、日
    const year = currentDate.getFullYear();
    const month = currentDate.getMonth(); // 0-11
    const day = currentDate.getDate();
    
    // 生成日历
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    const firstDay = new Date(year, month, 1).getDay(); // 0-6，0表示周日
    
    // 生成月份选项
    let monthOptions = '';
    const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
    monthNames.forEach((name, idx) => {
        monthOptions += `<option value="${idx}" ${idx === month ? 'selected' : ''}>${name}</option>`;
    });
    
    // 生成年份选项
    let yearOptions = '';
    const currentYear = new Date().getFullYear();
    for (let y = currentYear - 10; y <= currentYear + 10; y++) {
        yearOptions += `<option value="${y}" ${y === year ? 'selected' : ''}>${y}</option>`;
    }
    
    // 生成日历表格
    let calendarRows = '';
    let dayCount = 1;
    
    // 添加表头
    calendarRows += '<tr>';
    ['日', '一', '二', '三', '四', '五', '六'].forEach(dayName => {
        calendarRows += `<th>${dayName}</th>`;
    });
    calendarRows += '</tr>';
    
    // 计算行数
    const totalCells = firstDay + daysInMonth;
    const rowCount = Math.ceil(totalCells / 7);
    
    // 添加日期行
    for (let i = 0; i < rowCount; i++) {
        calendarRows += '<tr>';
        for (let j = 0; j < 7; j++) {
            if ((i === 0 && j < firstDay) || dayCount > daysInMonth) {
                calendarRows += '<td></td>';
            } else {
                const isToday = dayCount === day;
                calendarRows += `<td class="calendar-day ${isToday ? 'selected' : ''}" data-day="${dayCount}">${dayCount}</td>`;
                dayCount++;
            }
        }
        calendarRows += '</tr>';
    }
    
    modal.innerHTML = `
        <div class="modal-content" style="max-width: 400px;">
            <div class="modal-header">
                <div class="modal-title">选择日期和时间</div>
                <span class="close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="calendar-container">
                    <div class="calendar-header">
                        <select id="calendarMonth">${monthOptions}</select>
                        <select id="calendarYear">${yearOptions}</select>
                    </div>
                    <table class="calendar-table">
                        <thead>
                            ${calendarRows}
                        </thead>
                    </table>
                </div>
                <div class="time-container" style="margin-top: 15px;">
                    <label for="timeInput">时间:</label>
                    <input type="time" id="timeInput" step="1" value="${currentTime}" style="width: 100%; padding: 8px;">
                </div>
            </div>
            <div class="modal-footer">
                <button id="cancelDateTime" class="action-button secondary">取消</button>
                <button id="confirmDateTime" class="action-button">确定</button>
            </div>
        </div>
    `;
    
    // 添加样式
    const style = document.createElement('style');
    style.textContent = `
        .calendar-container {
            width: 100%;
        }
        .calendar-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .calendar-header select {
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .calendar-table {
            width: 100%;
            border-collapse: collapse;
        }
        .calendar-table th,
        .calendar-table td {
            padding: 8px;
            text-align: center;
            border: 1px solid #ddd;
        }
        .calendar-day {
            cursor: pointer;
        }
        .calendar-day:hover {
            background-color: #f0f0f0;
        }
        .calendar-day.selected {
            background-color: #7986E7;
            color: white;
        }
    `;
    
    // 获取shadowRoot
    const shadowRoot = context.shadowRoot;
    
    // 添加到DOM
    shadowRoot.appendChild(style);
    shadowRoot.appendChild(modal);
    modal.style.display = 'block';
    
    // 事件处理
    const closeBtn = modal.querySelector('.close');
    const cancelBtn = modal.querySelector('#cancelDateTime');
    const confirmBtn = modal.querySelector('#confirmDateTime');
    const calendarMonth = modal.querySelector('#calendarMonth');
    const calendarYear = modal.querySelector('#calendarYear');
    const calendarDays = modal.querySelectorAll('.calendar-day');
    const timeInput = modal.querySelector('#timeInput');
    
    // 选择日期事件
    calendarDays.forEach(cell => {
        cell.addEventListener('click', (e) => {
            // 移除所有选中状态
            calendarDays.forEach(day => day.classList.remove('selected'));
            // 添加新选中状态
            e.target.classList.add('selected');
        });
    });
    
    // 月份和年份变化时重新渲染日历
    const updateCalendar = () => {
        const selectedYear = parseInt(calendarYear.value);
        const selectedMonth = parseInt(calendarMonth.value);
        
        // 关闭当前对话框
        closeModal();
        
        // 更新日期参数并重新显示对话框
        currentDate = new Date(selectedYear, selectedMonth, 1);
        showDateTimeDialog(inputElement, xmlDoc, markEdited, context);
    };
    
    calendarMonth.addEventListener('change', updateCalendar);
    calendarYear.addEventListener('change', updateCalendar);
    
    const closeModal = () => {
        modal.style.display = 'none';
        shadowRoot.removeChild(modal);
        if (style.parentNode) {
            shadowRoot.removeChild(style);
        }
    };
    
    closeBtn.addEventListener('click', closeModal);
    cancelBtn.addEventListener('click', closeModal);
    
    confirmBtn.addEventListener('click', () => {
        // 获取选中的日期
        const selectedDay = modal.querySelector('.calendar-day.selected');
        if (!selectedDay) {
            closeModal();
            return;
        }
        
        const day = selectedDay.dataset.day;
        const month = parseInt(calendarMonth.value) + 1; // 月份从0开始，显示时+1
        const year = calendarYear.value;
        
        // 格式化日期
        const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
        
        // 获取时间
        const time = timeInput.value || '00:00:00';
        
        // 更新输入框值
        inputElement.value = `${formattedDate} ${time}`;
        
        // 触发更改事件
        updateElementValue(xmlDoc, inputElement.dataset.field, inputElement.value);
        markEdited(); // 确保触发修改标志
        
        closeModal();
    });
}