const event_list =  document.querySelector('.event-list');
           const event_item = event_list.querySelectorAll('.event-item');
          const form_area =  document.querySelector('.form-area');
        //   const al = Array.from(event_item);
        //   console.log(al[0]);
          
        //    console.log(event_item);
           

            event_item.forEach(item=>{
                // 表单默认
                 form_area.innerHTML = `
                 <h3 class="form-title" id="formTitle">请在左侧选择报名赛事</h3> 
            `;

                item.addEventListener('click',function(){
                        event_item.forEach(item=>item.classList.remove('active'));
                        // 左侧列表选中
                        item.classList.add('active');
                        // console.log(item.innerHTML);
                        form_area.innerHTML = '';
                        // console.log(item.getAttribute('data-event'));
                        const type = item.getAttribute('data-event');
                        if(type == 'ai-competition'){
                        form_area.innerHTML = 
                        `
     <h3 class="form-title" id="formTitle">${item.innerHTML} - 报名表单</h3> 
             <div class="form-content active" id="ai-competition">
                <div class="form-item">
                    <label for="ai-name">参赛人姓名：</label>
                    <input type="text" id="ai-name" placeholder="请输入姓名" required>
                </div>
                <div class="form-item">
                    <label for="ai-phone">联系电话：</label>
                    <input type="tel" id="ai-phone" placeholder="请输入11位手机号" required>
                </div>
                <div class="form-item">
                    <label for="ai-team">团队名称：</label>
                    <input type="text" id="ai-team" placeholder="个人参赛请填姓名">
                </div>
                <div class="form-item">
                    <label for="ai-direction">开发方向：</label>
                    <select id="ai-direction" required>
                        <option value="">请选择</option>
                        <option value="chatbot">智能问答机器人</option>
                        <option value="image">AI图片生成</option>
                        <option value="voice">语音识别/合成</option>
                    </select>
                </div>
                <button class="submit-btn" onclick="submitForm('${item.innerHTML}')">提交报名</button>
            </div>
                 `;
            }else
             if(type=='3d-model'){
                // item.classList.add('active');
                // console.log('3d');
                
                // form_area.innerHTML = '';
                // console.log(1);
                
                form_area.innerHTML = 
                `
    <h3 class="form-title" id="formTitle">${item.innerHTML} - 报名表单</h3> 
                <div class="form-content" id="3d-model">
                <div class="form-item">
                    <label for="3d-name">参赛人姓名：</label>
                    <input type="text" id="3d-name" placeholder="请输入姓名" required>
                </div>
                <div class="form-item">
                    <label for="3d-phone">联系电话：</label>
                    <input type="tel" id="3d-phone" placeholder="请输入11位手机号" required>
                </div>
                <div class="form-item">
                    <label for="3d-model-type">建模类型：</label>
                    <select id="3d-model-type" required>
                        <option value="">请选择</option>
                        <option value="industrial">工业模型</option>
                        <option value="architectural">建筑模型</option>
                        <option value="character">人物/场景模型</option>
                    </select>
                </div>
               
                <button class="submit-btn" onclick="submitForm('${item.innerHTML}')">提交报名</button>
            </div>`;

            }else if(type=='hardware-dev'){

                form_area.innerHTML = 
                `
     <h3 class="form-title" id="formTitle">${item.innerHTML} - 报名表单</h3> 
            <div class="form-content" id="hardware-dev">
                <div class="form-item">
                    <label for="hardware-name">参赛人姓名：</label>
                    <input type="text" id="hardware-name" placeholder="请输入姓名" required>
                </div>
                <div class="form-item">
                    <label for="hardware-phone">联系电话：</label>
                    <input type="tel" id="hardware-phone" placeholder="请输入11位手机号" required>
                </div>
                <div class="form-item">
                    <label for="hardware-type">硬件类型：</label>
                    <select id="hardware-type" required>
                        <option value="">请选择</option>
                        <option value="embedded">嵌入式设备</option>
                        <option value="iot">物联网设备</option>
                        <option value="sensor">传感器开发</option>
                    </select>
                </div>
                <div class="form-item">
                    <label for="hardware-skill">技术栈：</label>
                    <input type="text" id="hardware-skill" placeholder="如：STM32、Arduino、Python">
                </div>

                <button class="submit-btn" onclick="submitForm('${item.innerHTML}')">提交报名</button>
            </div>

                `;
            }else if(type=='overseas'){
                form_area.innerHTML=
                `
        <h3 class="form-title" id="formTitle">${item.innerHTML} - 报名表单</h3> 
                <div class="form-content" id="overseas">
                <div class="form-item">
                    <label for="overseas-name">参赛人姓名：</label>
                    <input type="text" id="overseas-name" placeholder="请输入姓名" required>
                </div>
                <div class="form-item">
                    <label for="overseas-phone">联系电话：</label>
                    <input type="tel" id="overseas-phone" placeholder="请输入11位手机号" required>
                </div>
                <div class="form-item">
                    <label for="overseas-region">对接地区：</label>
                    <select id="overseas-region" required>
                        <option value="">请选择</option>
                        <option value="japan">日本</option>
                        <option value="usa">美国</option>
                        <option value="europe">欧洲</option>
                    </select>
                </div>
                <div class="form-item">
                    <label for="overseas-lang">语言能力：</label>
                    <input type="text" id="overseas-lang" placeholder="如：日语N2、英语CET6">
                </div>
                <button class="submit-btn" onclick="submitForm('${item.innerHTML}')">提交报名</button>
            </div>
                `;
            }

                 
                        // form_area.innerHTML = form_area.innerHTML+`1`;
                    });
  
            });

 function submitForm(eventName) {
    console.log(eventName);
    
    const activeForm = document.querySelector('.form-content');
    console.log(activeForm);
    
    if (!activeForm) return;
    const nameInput = activeForm.querySelector('input[type="text"]');
    // console.log("1:"+nameInput.value);
    
    const phoneInput = activeForm.querySelector('input[type="tel"]');
    const nameItem = nameInput.closest('.form-item');
    const phoneItem = phoneInput.closest('.form-item');

    const oldNameError = nameItem.querySelector('span[style*="color: red"]');
    const oldPhoneError = phoneItem.querySelector('span[style*="color: red"]');
    if (oldNameError) nameItem.removeChild(oldNameError);
    if (oldPhoneError) phoneItem.removeChild(oldPhoneError);

    // 1. 姓名验证
    if (!nameInput.value.trim()) {
        console.log(1);

        const pay_name_error = document.createElement('span');
        pay_name_error.style.color = 'red';
        pay_name_error.style.fontSize = '12px';
        pay_name_error.style.marginTop = '4px';
        pay_name_error.textContent = '请输入姓名';
        nameItem.appendChild(pay_name_error);
        
        // 动态输入
        nameInput.addEventListener('input', function removeNameError() {
            if (nameInput.value.trim()) {
                nameItem.removeChild(pay_name_error);
                nameInput.removeEventListener('input', removeNameError); // 移除一次性监听
            }
        });
        nameInput.focus();
        return;
    }

    // 2. 手机号验证
    const phoneReg = /^1[3-9]\d{9}$/;
    if (!phoneReg.test(phoneInput.value.trim())) {
        const pay_phone_error = document.createElement('span');
        pay_phone_error.style.color = 'red';
        pay_phone_error.style.fontSize = '12px';
        pay_phone_error.style.marginTop = '4px';
        pay_phone_error.textContent = '请输入正确的联系方式';
        phoneItem.appendChild(pay_phone_error);
        
        // 动态输入
        phoneInput.addEventListener('input', function removePhoneError() {
            if (phoneReg.test(phoneInput.value.trim())) {
                phoneItem.removeChild(pay_phone_error);
                phoneInput.removeEventListener('input', removePhoneError); // 移除一次性监听
            }
        });
        phoneInput.focus();
        return;
    }

    alert(`${eventName}报名成功！我们会尽快联系你。`);
    activeForm.reset();
}