html/appointment.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绿纤协同平台 - 添加预约</title>
  <!-- 引入配置文件 -->
  <script src="config.js"></script>
  <!-- 引入认证工具 -->
  <script src="auth-utils.js"></script>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body {
      font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
      margin: 0;
      min-height: 100vh;
      background: linear-gradient(135deg, #e8f5e9 0%, #b2dfdb 100%);
      padding: 20px;
    }
    
    .container {
      width: 100%;
      max-width: 480px;
      margin: 0 auto;
    }
    
    .header {
      background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
      border-radius: 18px;
      padding: 24px;
      text-align: center;
      margin-bottom: 24px;
      box-shadow: 0 4px 24px 0 rgba(76, 175, 80, 0.10);
    }
    
    .header-title {
      color: #fff;
      font-size: 1.3em;
      font-weight: bold;
      letter-spacing: 2px;
      margin: 0;
    }
    
    .form-card {
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 4px 24px 0 rgba(76, 175, 80, 0.10);
      border: 1.5px solid #c8e6c9;
      overflow: hidden;
    }
    
    .form-content {
      padding: 24px;
    }
    
    .form-group {
      margin-bottom: 20px;
    }
    
    .form-group:last-child {
      margin-bottom: 0;
    }
    
    label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
      color: #388e3c;
      letter-spacing: 1px;
      font-size: 0.95em;
    }
    
    .input-wrapper {
      position: relative;
    }
    
    .input-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      color: #6a9c6a;
    }
    
    input, .select-input {
      width: 100%;
      padding: 12px 12px 12px 12px;
      border: 1.5px solid #c8e6c9;
      border-radius: 10px;
      font-size: 1em;
      transition: all 0.2s ease;
      background: #f9fff9;
      color: #2e7d32;
    }
    
    input:focus, .select-input:focus {
      outline: none;
      border-color: #43a047;
      box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
      background: #fff;
    }
    
    input:disabled {
      background: #f5f5f5;
      color: #666;
      cursor: not-allowed;
    }
    
    .select-input {
      cursor: pointer;
      position: relative;
    }
    
    .select-input::after {
      content: '▼';
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #6a9c6a;
      font-size: 0.8em;
    }
    
    .btn-group {
      display: flex;
      gap: 12px;
      margin-top: 24px;
    }
    
    .btn {
      flex: 1;
      padding: 14px 20px;
      border: none;
      border-radius: 10px;
      font-size: 1em;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s ease;
      letter-spacing: 1px;
    }
    
    .btn-primary {
      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      color: #fff;
      box-shadow: 0 2px 8px rgba(67, 233, 123, 0.3);
    }
    
    .btn-primary:hover {
      box-shadow: 0 4px 16px rgba(67, 233, 123, 0.4);
      transform: translateY(-1px);
    }
    
    .btn-secondary {
      background: #f5f5f5;
      color: #666;
      border: 1.5px solid #ddd;
    }
    
    .btn-secondary:hover {
      background: #e8e8e8;
      border-color: #ccc;
    }
    
    /* 弹窗样式 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      padding: 20px;
    }
    
    .modal-content {
      background: #fff;
      border-radius: 18px;
      width: 100%;
      max-width: 400px;
      max-height: 80vh;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }
    
    .modal-header {
      background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
      padding: 20px;
      text-align: center;
    }
    
    .modal-title {
      color: #fff;
      font-size: 1.2em;
      font-weight: bold;
      margin: 0;
      letter-spacing: 1px;
    }
    
    .modal-body {
      padding: 20px;
    }
    
    .search-input {
      width: 100%;
      padding: 12px;
      border: 1.5px solid #c8e6c9;
      border-radius: 10px;
      font-size: 1em;
      margin-bottom: 16px;
      background: #f9fff9;
    }
    
    .search-input:focus {
      outline: none;
      border-color: #43a047;
      box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
    }
    
    .option-list {
      max-height: 300px;
      overflow-y: auto;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
    }
    
    .option-item {
      padding: 12px 16px;
      border-bottom: 1px solid #f0f0f0;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    
    .option-item:hover {
      background: #f5f5f5;
    }
    
    .option-item:last-child {
      border-bottom: none;
    }
    
    .option-item.selected {
      background: #e8f5e9;
      color: #2e7d32;
      font-weight: bold;
    }
    
    .loading-message {
      text-align: center;
      padding: 40px 20px;
      color: #666;
      font-size: 0.95em;
    }
    
    .loading-spinner {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 2px solid #e0e0e0;
      border-top: 2px solid #43a047;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-right: 8px;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .modal-footer {
      padding: 16px 20px;
      border-top: 1px solid #e0e0e0;
      display: flex;
      gap: 12px;
    }
    
    .modal-btn {
      flex: 1;
      padding: 10px 16px;
      border: none;
      border-radius: 8px;
      font-size: 0.95em;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .modal-btn-primary {
      background: #43a047;
      color: #fff;
    }
    
    .modal-btn-primary:hover {
      background: #388e3c;
    }
    
    .modal-btn-secondary {
      background: #f5f5f5;
      color: #666;
      border: 1px solid #ddd;
    }
    
    .modal-btn-secondary:hover {
      background: #e8e8e8;
    }
    
    @media (max-width: 520px) {
      .container { max-width: 100%; }
      .header { border-radius: 12px; padding: 20px; }
      .form-card { border-radius: 12px; }
      .form-content { padding: 20px; }
      .btn-group { flex-direction: column; }
    }
    h2 {
      text-align: center;
      color: #388e3c;
      margin-bottom: 18px;
      letter-spacing: 2px;
    }
    
    /* 消息提示样式 */
    .message-toast {
      position: fixed;
      top: 20px;
      right: 20px;
      max-width: 300px;
      padding: 16px 20px;
      border-radius: 10px;
      color: #fff;
      font-weight: 500;
      z-index: 2000;
      transform: translateX(200%);
      transition: all 0.3s ease;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
      text-align: center;
    }
    
    .message-toast.show {
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-100%);
    }
    
    .message-toast.success {
      background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
    }
    
    .message-toast.error {
      background: linear-gradient(135deg, #f44336 0%, #ef5350 100%);
    }
    
    .message-toast.warning {
      background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%);
    }
    
    .message-toast.info {
      background: linear-gradient(135deg, #2196f3 0%, #42a5f5 100%);
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>绿纤预约</h2>
    
    <div class="form-card">
      <div class="form-content">
        <form id="appointmentForm">
          <!-- <div class="form-group">
            <label for="djmd">门店</label>
            <div class="input-wrapper">
              <input type="text" id="djmd" class="select-input" placeholder="请选择门店" readonly>
            </div>
          </div> -->
          
          <!-- <div class="form-group">
            <label for="yyr">预约人员</label>
            <div class="input-wrapper">
              <div class="input-icon">👤</div>
              <input type="text" id="yyr" placeholder="当前登录用户" disabled>
            </div>
          </div> -->
          
          <div class="form-group">
            <label for="yytyxm">预约体验项目</label>
            <div class="input-wrapper">
              <!-- <div class="input-icon">🎯</div> -->
              <input type="text" id="yytyxm" class="select-input" placeholder="请选择体验项目" readonly>
            </div>
          </div>
          
          <div class="form-group">
            <label for="gkxm">顾客姓名</label>
            <div class="input-wrapper">
              <!-- <div class="input-icon">👥</div> -->
              <input type="text" id="gkxm" class="select-input" placeholder="请选择顾客姓名" readonly>
            </div>
          </div>
          
          <div class="form-group">
            <label for="yyjks">预约健康师</label>
            <div class="input-wrapper">
              <!-- <div class="input-icon">👨‍⚕️</div> -->
              <input type="text" id="yyjks" class="select-input" placeholder="请选择健康师" readonly>
            </div>
          </div>
          
          <div class="form-group">
            <label for="yyrq">预约日期</label>
            <div class="input-wrapper">
              <!-- <div class="input-icon">📅</div> -->
              <input type="text" id="yyrq" class="select-input" placeholder="请选择预约日期" readonly>
            </div>
          </div>
          
          <div class="form-group">
            <label for="yysj">预约时间</label>
            <div class="input-wrapper">
              <!-- <div class="input-icon">🕐</div> -->
              <input type="text" id="yysj" class="select-input" placeholder="请选择预约时间" readonly>
            </div>
          </div>
          
          <div class="btn-group">
            <button type="button" class="btn btn-secondary" onclick="cancelAppointment()">取消预约</button>
            <button type="submit" class="btn btn-primary">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  
  <!-- 消息提示 -->
  <div id="messageToast" class="message-toast"></div>
  
  <!-- 弹窗选择器 -->
  <div class="modal-overlay" id="selectModal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="modalTitle">选择</h3>
      </div>
      <div class="modal-body">
        <input type="text" class="search-input" id="searchInput" placeholder="请输入搜索内容">
        <div class="option-list" id="optionList">
          <!-- 选项列表将通过JavaScript动态生成 -->
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="modal-btn modal-btn-secondary" onclick="closeModal()">取消</button>
        <button type="button" class="modal-btn modal-btn-primary" onclick="confirmSelection()">确定</button>
      </div>
    </div>
  </div>
  
  <script>
    // 全局变量
    let currentSelectField = null;
    let currentOptions = [];
    let selectedOption = null;
    let userInfo = null;
    
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      initializePage();
      bindEvents();
    });
    
    // 初始化页面
    async function initializePage() {
      // 获取当前登录用户 通过接口获取
      userInfo = JSON.parse(localStorage.getItem('userInfo'));
      if (!userInfo || Object.keys(userInfo).length === 0) {
        // 没有登录，跳转到登录页面
        window.location.href = 'login.html';
        return;
      }
      console.log(userInfo);
      // 设置预约日期默认为今天
      setDefaultDate();
    }
    // 设置默认日期为今天
    function setDefaultDate() {
      const today = new Date();
      const year = today.getFullYear();
      const month = (today.getMonth() + 1).toString().padStart(2, '0');
      const day = today.getDate().toString().padStart(2, '0');
      
      const dateString = `${year}-${month}-${day}`;
      const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      const weekDay = weekDays[today.getDay()];
      
      const label = `${month}月${day}日 ${weekDay} (今天)`;
      
      // 设置输入框显示值和数据
      const dateInput = document.getElementById('yyrq');
      dateInput.value = label;
      dateInput.dataset.selectedValue = dateString;
    }
    async function getUserInfo() {
      try {
        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/oauth/CurrentUser`;
        const response = await fetch(apiUrl, {
          method: 'GET',
          headers: {
            'Authorization': `${getAuthToken()}`,
            'Content-Type': 'application/json'
          },
        });
        
        if (response.ok) {
          const result = await response.json();
          if (result.code == 200 && result.data) {
            return result.data.userInfo
          }
        }
        return {};
        
      } catch (error) {
        console.error('获取门店列表出错:', error);
        return {};
      }
    }
    
    // 绑定事件
    function bindEvents() {
      // 绑定选择输入框点击事件
      const selectInputs = document.querySelectorAll('.select-input');
      selectInputs.forEach(input => {
        input.addEventListener('click', function() {
          openSelectModal(this);
        });
      });
      
      // 绑定表单提交事件
      document.getElementById('appointmentForm').addEventListener('submit', handleFormSubmit);
      
      // 绑定搜索输入框事件
      document.getElementById('searchInput').addEventListener('input', handleSearch);
    }
    
    // 打开选择弹窗
    async function openSelectModal(inputField) {
      currentSelectField = inputField;
      const fieldId = inputField.id;
      
      // 显示加载状态
      showModal('加载中...', []);
      
      try {
        let options = [];
        
        // 根据字段类型获取不同的选项数据
        switch(fieldId) {
          case 'djmd':
            options = await getStoreOptions();
            showModal('选择门店', options);
            break;
          case 'yytyxm':
            options = await getProjectOptions();
            showModal('选择体验项目', options);
            break;
          case 'gkxm':
            options = await getCustomerOptions();
            showModal('选择顾客姓名', options);
            break;
          case 'yyjks':
            options = await getHealthWorkerOptions();
            showModal('选择健康师', options);
            break;
          case 'yyrq':
            options = getDateOptions();
            showModal('选择预约日期', options);
            break;
          case 'yysj':
            options = getTimeSlotOptions();
            showModal('选择预约时间', options);
            break;
        }
      } catch (error) {
        console.error('获取选项数据失败:', error);
        showModal('加载失败', []);
        // 显示错误提示
        setTimeout(() => {
          showMessage('数据加载失败，请检查网络连接或联系管理员', 'error');
        }, 500);
      }
    }
    
    // 显示弹窗
    function showModal(title, options) {
      currentOptions = options;
      document.getElementById('modalTitle').textContent = title;
      document.getElementById('searchInput').value = '';
      
      // 如果是加载状态，隐藏搜索框
      const searchInput = document.getElementById('searchInput');
      if (title === '加载中...' || title === '加载失败') {
        searchInput.style.display = 'none';
      } else {
        searchInput.style.display = 'block';
      }
      
      renderOptions(options);
      document.getElementById('selectModal').style.display = 'flex';
    }
    
    // 关闭弹窗
    function closeModal() {
      document.getElementById('selectModal').style.display = 'none';
      currentSelectField = null;
      currentOptions = [];
      selectedOption = null;
    }
    
    // 渲染选项列表
    function renderOptions(options) {
      const optionList = document.getElementById('optionList');
      optionList.innerHTML = '';
      
      if (!options || options.length === 0) {
        const emptyMessage = document.createElement('div');
        emptyMessage.className = 'loading-message';
        emptyMessage.innerHTML = '<span class="loading-spinner"></span>暂无数据';
        optionList.appendChild(emptyMessage);
        return;
      }
      
      options.forEach(option => {
        const optionItem = document.createElement('div');
        optionItem.className = 'option-item';
        optionItem.textContent = option.label;
        optionItem.dataset.value = option.value;
        
        // 存储额外的属性到dataset中
        Object.keys(option).forEach(key => {
          if (key !== 'value' && key !== 'label') {
            optionItem.dataset[key] = option[key];
          }
        });
        
        optionItem.addEventListener('click', function() {
          // 移除之前的选中状态
          document.querySelectorAll('.option-item').forEach(item => {
            item.classList.remove('selected');
          });
          
          // 设置当前选中状态
          this.classList.add('selected');
          selectedOption = {
            value: this.dataset.value,
            label: this.textContent,
            khlx: this.dataset.khlx,
            khmc: this.dataset.khmc
          };
        });
        
        optionList.appendChild(optionItem);
      });
    }
    
    // 处理搜索
    function handleSearch() {
      const searchTerm = document.getElementById('searchInput').value;
      if (!searchTerm) {
        // 如果搜索词为空，显示所有选项
        renderOptions(currentOptions);
        return;
      }
      
      const filteredOptions = currentOptions.filter(option => 
        option.label && option.label.toLowerCase().includes(searchTerm.toLowerCase())
      );
      renderOptions(filteredOptions);
    }
    
    // 确认选择
    function confirmSelection() {
      if (selectedOption && currentSelectField) {
        currentSelectField.value = selectedOption.label;
        currentSelectField.dataset.selectedValue = selectedOption.value;
        
        // 设置额外的属性到输入框的dataset中
        Object.keys(selectedOption).forEach(key => {
          if (key !== 'value' && key !== 'label') {
            currentSelectField.dataset[key] = selectedOption[key];
          }
        });
        
        closeModal();
      } else {
        showMessage('请先选择一个选项', 'warning');
      }
    }
    
    // 获取门店选项（从API获取）
    async function getStoreOptions() {
      try {
        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqMdxx?page=1&pageSize=1000`;
        const response = await fetch(apiUrl, {
          method: 'GET',
          headers: {
            'Authorization': `${getAuthToken()}`,
            'Content-Type': 'application/json'
          },
        });
        
        if (response.ok) {
          const result = await response.json();
          if (result.code == 200 && result.data) {
            return result.data.list.map(item => ({
              value: item.id,
              label: item.dm
            }));
          }
        }
        
        // 如果API调用失败，返回空数组
        console.warn('获取门店列表失败，使用默认数据');
        return getDefaultStoreOptions();
      } catch (error) {
        console.error('获取门店列表出错:', error);
        return getDefaultStoreOptions();
      }
    }
    
    // 获取体验项目选项（从API获取）
    async function getProjectOptions() {
      try {
        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqXmzl?page=1&pageSize=1000`;
        const response = await fetch(apiUrl, {
          method: 'GET',
          headers: {
            'Authorization': `${getAuthToken()}`,
            'Content-Type': 'application/json'
          }
        });
        
        if (response.ok) {
          const result = await response.json();
          if (result.code == 200 && result.data) {
            return result.data.list.map(item => ({
              value: item.id,
              label: item.xmmc
            }));
          }
        }
        
        // 如果API调用失败，返回默认数据
        console.warn('获取项目列表失败，使用默认数据');
        return getDefaultProjectOptions();
      } catch (error) {
        console.error('获取项目列表出错:', error);
        return getDefaultProjectOptions();
      }
    }
    
    // 获取顾客姓名选项（从API获取）
    async function getCustomerOptions() {
      try {
        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqKhxx?page=1&pageSize=1000`;
        const response = await fetch(apiUrl, {
          method: 'GET',
          headers: {
            'Authorization': `${getAuthToken()}`,
            'Content-Type': 'application/json'
          }
        });
        
        if (response.ok) {
          const result = await response.json();
          if (result.code == 200 && result.data) {
            return result.data.list.map(item => ({
              value: item.id,
              label: item.khmc,
              khlx: item.khlx,
              khmc: item.khmc  // 添加这一行，将客户名称也保存
            }));
          }
        }
        
        // 如果API调用失败，返回默认数据
        console.warn('获取顾客列表失败，使用默认数据');
        return getDefaultCustomerOptions();
      } catch (error) {
        console.error('获取顾客列表出错:', error);
        return getDefaultCustomerOptions();
      }
    }
    
    // 获取健康师选项（从API获取）
    async function getHealthWorkerOptions() {
      try {
        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/user?page=1&pageSize=1000&mdid=${userInfo.mdid}&gw=健康师`;
        const response = await fetch(apiUrl, {
          method: 'GET',
          headers: {
            'Authorization': `${getAuthToken()}`,
            'Content-Type': 'application/json'
          }
        });
        
        if (response.ok) {
          const result = await response.json();
          if (result.code == 200 && result.data) {
            return result.data.list.map(item => ({
              value: item.id,
              label: item.realName
            }));
          }
        }
        
        // 如果API调用失败，返回默认数据
        console.warn('获取健康师列表失败，使用默认数据');
        return getDefaultHealthWorkerOptions();
      } catch (error) {
        console.error('获取健康师列表出错:', error);
        return getDefaultHealthWorkerOptions();
      }
    }
    
    // 生成时间段选项（9:00-21:00，每半小时一个间隔）
    function getTimeSlotOptions() {
      const timeSlots = [];
      const startHour = 9;
      const endHour = 21;
      
      for (let hour = startHour; hour < endHour; hour++) {
        for (let minute = 0; minute < 60; minute += 30) {
          const timeString = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
          const nextMinute = minute + 30;
          const nextHour = nextMinute >= 60 ? hour + 1 : hour;
          const nextMinuteStr = nextMinute >= 60 ? '00' : nextMinute.toString().padStart(2, '0');
          const nextTimeString = `${nextHour.toString().padStart(2, '0')}:${nextMinuteStr}`;
          
          const timeRange = `${timeString}-${nextTimeString}`;
          
          timeSlots.push({
            value: timeRange,
            label: timeRange
          });
        }
      }
      
      return timeSlots;
    }
    
    // 生成日期选项（从今天开始，未来30天）
    function getDateOptions() {
      const dateOptions = [];
      const today = new Date();
      
      for (let i = 0; i < 30; i++) {
        const date = new Date(today);
        date.setDate(today.getDate() + i);
        
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        
        const dateString = `${year}-${month}-${day}`;
        const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
        const weekDay = weekDays[date.getDay()];
        
        let label = `${month}月${day}日 ${weekDay}`;
        if (i === 0) {
          label += ' (今天)';
        } else if (i === 1) {
          label += ' (明天)';
        }
        
        dateOptions.push({
          value: dateString,
          label: label
        });
      }
      
      return dateOptions;
    }
    
    // 默认健康师选项（API失败时的备用数据）
    function getDefaultHealthWorkerOptions() {
      return [
        { value: 'jks001', label: '张健康师' },
        { value: 'jks002', label: '李健康师' },
        { value: 'jks003', label: '王健康师' },
        { value: 'jks004', label: '赵健康师' },
        { value: 'jks005', label: '钱健康师' }
      ];
    }
    
    // 默认门店选项（API失败时的备用数据）
    function getDefaultStoreOptions() {
      return [
        { value: 'store001', label: '绿纤旗舰店' },
        { value: 'store002', label: '绿纤体验店' },
        { value: 'store003', label: '绿纤服务中心' },
        { value: 'store004', label: '绿纤直营店' }
      ];
    }
    
    // 默认项目选项（API失败时的备用数据）
    function getDefaultProjectOptions() {
      return [
        { value: 'proj001', label: '基础护理' },
        { value: 'proj002', label: '深度清洁' },
        { value: 'proj003', label: '美白护理' },
        { value: 'proj004', label: '抗衰护理' },
        { value: 'proj005', label: '补水保湿' }
      ];
    }
    
    // 默认顾客选项（API失败时的备用数据）
    function getDefaultCustomerOptions() {
      return [
        { value: 'cust001', label: '张三', khlx: 'VIP' },
        { value: 'cust002', label: '李四', khlx: '普通' },
        { value: 'cust003', label: '王五', khlx: 'VIP' },
        { value: 'cust004', label: '赵六', khlx: '普通' },
        { value: 'cust005', label: '钱七', khlx: 'VIP' }
      ];
    }
    
    // 处理表单提交
    function handleFormSubmit(event) {
      event.preventDefault();
      if(!document.getElementById('yytyxm').dataset.selectedValue){
        showMessage('请选择体验项目', 'error');
        return;
      }
      if(!document.getElementById('gkxm').dataset.selectedValue){
        showMessage('请选择顾客姓名', 'error');
        return;
      }
      if(!document.getElementById('yyjks').dataset.selectedValue){
        showMessage('请选择健康师', 'error');
        return;
      }
      if(!document.getElementById('yyrq').dataset.selectedValue){
        showMessage('请选择预约日期', 'error');
        return;
      }
      if(!document.getElementById('yysj').dataset.selectedValue){
        showMessage('请选择预约时间', 'error');
        return;
      }
      // 收集表单数据
      const selectedDate = document.getElementById('yyrq').dataset.selectedValue;
      const selectedTimeRange = document.getElementById('yysj').dataset.selectedValue;
      
      // 解析时间段，获取开始时间和结束时间
      const [startTime, endTime] = selectedTimeRange.split('-');
      
      // 组合成完整的开始时间和结束时间
      const startDateTime = `${selectedDate} ${startTime}`;
      const endDateTime = `${selectedDate} ${endTime}`;
      
      const formData = {
        djmd: userInfo.mdid || "",
        yyr: userInfo.userId || "",
        yytyxm: document.getElementById('yytyxm').dataset.selectedValue,
        gk: document.getElementById('gkxm').dataset.selectedValue,
        gklx: document.getElementById('gkxm').dataset.khlx,
        gkxm: document.getElementById('gkxm').dataset.khmc,
        yyjks: document.getElementById('yyjks').dataset.selectedValue,
        yysj: startDateTime,  // 开始时间：2025-10-09 19:00
        yyjs: endDateTime,    // 结束时间：2025-10-09 19:30
        f_Status:"已预约"
      };
      console.log(formData);
      // 提交数据到API
      submitAppointment(formData);
    }
    
    // 提交预约数据
    function submitAppointment(data) {
      const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqYyjl`;
      
      fetch(apiUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `${getAuthToken()}`
        },
        body: JSON.stringify(data)
      })
      .then(response => response.json())
      .then(result => {
        if (result.code == 200) {
          // 显示成功提示
          showMessage('预约添加成功！', 'success');
          clearForm();
        } else {
          // 显示失败提示
          showMessage(`添加失败：${result.message || '未知错误'}`, 'error');
        }
      })
      .catch(error => {
        console.error('提交失败:', error);
        // 显示网络错误提示
        showMessage('网络错误，请稍后重试', 'error');
      });
    }
    
    // 清空表单
    function clearForm() {
      document.getElementById('appointmentForm').reset();
      
      // 清空选择字段的数据
      const selectInputs = document.querySelectorAll('.select-input');
      selectInputs.forEach(input => {
        input.value = '';
        delete input.dataset.selectedValue;
        delete input.dataset.khlx;
        delete input.dataset.khmc;
      });
      
      // 重新设置默认日期
      setDefaultDate();
    }
    
    // 返回上一页
    function goBack() {
      if (window.history.length > 1) {
        window.history.back();
      } else {
        window.location.href = 'index.html';
      }
    }
    
    // 点击弹窗外部关闭弹窗
    document.getElementById('selectModal').addEventListener('click', function(e) {
      if (e.target === this) {
        closeModal();
      }
    });
    
    // 显示消息提示
    function showMessage(message, type = 'info') {
      const toast = document.getElementById('messageToast');
      toast.textContent = message;
      toast.className = `message-toast ${type}`;
      
      // 显示提示
      setTimeout(() => {
        toast.classList.add('show');
      }, 100);
      
      // 自动隐藏
      setTimeout(() => {
        toast.classList.remove('show');
      }, 3000);
    }
    
    // 取消预约
    function cancelAppointment() {
      // 清空表单
      clearForm();
      // // 显示取消提示
      // showMessage('已取消预约', 'info');
      window.location.href = 'index.html';
    }
  </script>
</body>
</html>