const productDataMap = {
  "JavaWeb": {
    title: "JavaWeb",
    img: "images/内蒙古工业大学夜晚.jpg",
    content: `
      <div class="product-section">
        <h3>产品特点</h3>
        <ul>
          <li>1.基于SpringBoot的轻量级Web框架，快速搭建企业级应用；</li>
          <li>2.支持RESTful接口设计，适配前后端分离架构；</li>
          <li>3.内置权限管理、日志记录等基础功能，降低开发成本。</li>
        </ul>
      </div>
      <div class="product-section">
        <h3>优势功能</h3>
        <ul>
          <li>1.模块化开发，支持功能插件化扩展；</li>
          <li>2.集成MyBatis-Plus，简化数据库操作；</li>
          <li>3.支持Docker容器化部署，适配云原生环境。</li>
        </ul>
      </div>
    `
  },
  "实验室SaS": {
    title: "实验室SaS",
    img: "images/内蒙古工业大学夜晚.jpg",
    content: `
      <div class="product-section">
        <h3>产品特点</h3>
        <ul>
          <li>1.云原生SaaS服务，无需本地部署，按需订阅；</li>
          <li>2.贴合实验室管理场景，覆盖样品、流程、数据全链路；</li>
          <li>3.支持多终端访问，移动端适配现场作业。</li>
        </ul>
      </div>
      <div class="product-section">
        <h3>优势功能</h3>
        <ul>
          <li>1.样品全生命周期追踪，流转可追溯；</li>
          <li>2.SOP流程自动化，减少人为错误；</li>
          <li>3.数据实时同步，支持多角色协同办公。</li>
        </ul>
      </div>
    `
  },
  "坤班官网": {
    title: "坤班官网",
    img: "images/内蒙古工业大学夜晚.jpg",
    content: `
      <div class="product-section">
        <h3>产品特点</h3>
        <ul>
          <li>1.响应式设计，适配PC/移动端访问；</li>
          <li>2.集成信息展示、活动报名、资源下载等功能；</li>
          <li>3.支持后台内容管理，快速更新信息。</li>
        </ul>
      </div>
      <div class="product-section">
        <h3>优势功能</h3>
        <ul>
          <li>1.模块化布局，可灵活调整页面结构；</li>
          <li>2.内置SEO优化，提升搜索引擎收录效果；</li>
          <li>3.支持访问数据统计，分析用户行为。</li>
        </ul>
      </div>
    `
  },

  "UE5": {
    title: "UE5",
    img: "images/内蒙古工业大学夜晚.jpg",
    content: `
      <div class="product-section">
        <h3>产品特点</h3>
        <ul>
          <li>1.基于虚幻引擎5的3D场景开发服务；</li>
          <li>2.支持高精度模型渲染、虚拟场景搭建；</li>
          <li>3.适配VR/AR设备，打造沉浸式体验。</li>
        </ul>
      </div>
      <div class="product-section">
        <h3>优势功能</h3>
        <ul>
          <li>1.利用Nanite虚拟微多边形几何体，实现超高精度模型；</li>
          <li>2.Lumen全局光照，提升场景真实感；</li>
          <li>3.支持蓝图可视化编程，降低开发门槛。</li>
        </ul>
      </div>
    `
  },
    "其他": {
    title: "其他产品",
    img: "images/内蒙古工业大学夜晚.jpg",
    content: `
      <div class="product-section">
        <h3>产品特点</h3>
        <ul>
          <li>1.基于虚幻引擎5的3D场景开发服务；</li>
          <li>2.支持高精度模型渲染、虚拟场景搭建；</li>
          <li>3.适配VR/AR设备，打造沉浸式体验。</li>
        </ul>
      </div>
      <div class="product-section">
        <h3>优势功能</h3>
        <ul>
          <li>1.利用Nanite虚拟微多边形几何体，实现超高精度模型；</li>
          <li>2.Lumen全局光照，提升场景真实感；</li>
          <li>3.支持蓝图可视化编程，降低开发门槛。</li>
        </ul>
      </div>
    `
  },
};

document.addEventListener('DOMContentLoaded', function() {
  // 从URL获取产品类型
  const urlParams = new URLSearchParams(window.location.search);
  const productType = urlParams.get('type') || "JavaWeb";
  // const other = productType.slice(2,3);
console.log(productType);

  const detailTitle = document.getElementById('detailTitle');
  // const detailImg = document.getElementById('detailImg');
  const detailContent = document.getElementById('detailContent');
  const formProductName = document.getElementById('formProductName');
  const formTip = document.getElementById('formTip');

let product = productDataMap[productType];
  // 填充产品详情
  if(productType.slice(0,2)=='其他'){
    product = productDataMap[productType.slice(0,2)];
    console.log(productType.slice(2,3));
    
    if(product){
    detailTitle.textContent = product.title+productType.slice(2,3);
    detailContent.innerHTML = product.content;
    formProductName.textContent = product.title;      
    
    }
  }else{
    if (product) {
    detailTitle.textContent = product.title;
    detailContent.innerHTML = product.content;
    formProductName.textContent = product.title;       
    }
  }
  
  // console.log(product.title);
  

  // }

  // 预约表单逻辑
  const btnReserve = document.querySelector('.btn-reserve');
  const btnCancel = document.querySelector('.btn-cancel');
  const userName = document.getElementById('user-name');
  const contact = document.getElementById('contact');
  const btnReturn =  document.querySelector('.btn-return');
  btnReserve.addEventListener('click', function() {
    if (!userName.value.trim() || !/^1[3-9]\d{9}$/.test(contact.value)) {
      formTip.style.color = 'red';
      formTip.textContent = '请输入完整且格式正确的信息！';
      return;
    }
    alert("预约成功！我们将尽快与您联系。");
  });

  btnCancel.addEventListener('click', function() {
    userName.value = '';
    contact.value = '';
    formTip.textContent = '';
  });

  btnReturn.addEventListener('click',function(){
      history.back();
  });
});