appointment-detail.html 33.7 KB

Edit Raw Blame History

<!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 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .back-btn {
      background: #fff;
      border: none;
      border-radius: 12px;
      padding: 8px 12px;
      color: #388e3c;
      font-size: 0.9em;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(76, 175, 80, 0.15);
      transition: all 0.2s ease;
    }

    .back-btn:hover {
      box-shadow: 0 4px 16px rgba(76, 175, 80, 0.25);
      transform: translateY(-1px);
    }

    h2 {
      text-align: center;
      color: #388e3c;
      margin: 10px 0;
      letter-spacing: 2px;
      flex: 1;
    }

    .detail-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(76, 175, 80, 0.1);
      overflow: hidden;
      margin-bottom: 20px;
    }

    .detail-header {
      background: linear-gradient(120deg, #43e97b 0%, #38f9d7 100%);
      padding: 20px;
      color: #fff;
      text-align: center;
    }

    .customer-name {
      font-size: 1.3em;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .customer-phone {
      font-size: 1em;
      opacity: 0.9;
    }

    .detail-content {
      padding: 20px;
    }

    .detail-section {
      margin-bottom: 24px;
    }

    .detail-section:last-child {
      margin-bottom: 0;
    }

    .section-title {
      font-size: 1.1em;
      font-weight: 600;
      color: #2e7d32;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 2px solid #e8f5e9;
      letter-spacing: 1px;
    }

    .detail-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
    }

    .detail-row:last-child {
      border-bottom: none;
    }

    .detail-label {
      color: #6a9c6a;
      font-weight: 500;
      font-size: 0.95em;
      min-width: 80px;
    }

    .detail-value {
      color: #2e7d32;
      font-weight: 500;
      text-align: right;
      flex: 1;
      margin-left: 16px;
    }

    .status-badge {
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 0.85em;
      font-weight: 500;
    }

    .status-badge.success {
      background: #e8f5e9;
      color: #2e7d32;
    }

    .status-badge.failed {
      background: #ffebee;
      color: #c62828;
    }

    .status-badge.pending {
      background: #fff3e0;
      color: #ef6c00;
    }

    .contact-record {
      background: #f8fff8;
      border: 1px solid #e8f5e9;
      border-radius: 8px;
      padding: 16px;
      margin-top: 8px;
      line-height: 1.6;
      color: #2e7d32;
    }

    .loading {
      text-align: center;
      padding: 60px 20px;
      color: #6a9c6a;
      font-size: 1.1em;
    }

    .loading::after {
      content: '';
      display: inline-block;
      width: 24px;
      height: 24px;
      border: 3px solid #c8e6c9;
      border-radius: 50%;
      border-top-color: #43a047;
      animation: spin 1s linear infinite;
      margin-left: 12px;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .error-state {
      text-align: center;
      padding: 60px 20px;
      color: #c62828;
    }

    .retry-btn {
      background: #43a047;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 12px 24px;
      margin-top: 16px;
      cursor: pointer;
      font-size: 1em;
      transition: all 0.2s ease;
    }

    .retry-btn:hover {
      background: #388e3c;
    }

    .action-buttons {
      display: flex;
      gap: 12px;
      margin-top: 20px;
    }

    .action-btn {
      flex: 1;
      padding: 12px 16px;
      border: none;
      border-radius: 10px;
      font-size: 1em;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .action-btn.primary {
      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      color: #fff;
      box-shadow: 0 4px 16px rgba(67, 233, 123, 0.3);
    }

    .action-btn.primary:hover {
      box-shadow: 0 6px 24px rgba(67, 233, 123, 0.4);
      transform: translateY(-2px);
    }

    .action-btn.secondary {
      background: #f5f5f5;
      color: #666;
      border: 1px solid #ddd;
    }

    .action-btn.secondary:hover {
      background: #e8e8e8;
    }

    /* 自定义提示弹窗样式 */
    .custom-alert {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .custom-alert.show {
      opacity: 1;
      visibility: visible;
    }

    .alert-content {
      background: #fff;
      border-radius: 16px;
      padding: 30px;
      max-width: 320px;
      width: 90%;
      text-align: center;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      transform: scale(0.8);
      transition: transform 0.3s ease;
    }

    .custom-alert.show .alert-content {
      transform: scale(1);
    }

    .alert-icon {
      width: 60px;
      height: 60px;
      margin: 0 auto 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
    }

    .alert-icon.success {
      background: #e8f5e9;
      color: #43a047;
    }

    .alert-icon.error {
      background: #ffebee;
      color: #c62828;
    }

    .alert-icon.warning {
      background: #fff3e0;
      color: #ef6c00;
    }

    .alert-title {
      font-size: 1.2em;
      font-weight: 600;
      color: #333;
      margin-bottom: 12px;
    }

    .alert-message {
      color: #666;
      line-height: 1.5;
      margin-bottom: 24px;
    }

    .alert-buttons {
      display: flex;
      gap: 12px;
      justify-content: center;
    }

    .alert-btn {
      padding: 10px 24px;
      border: none;
      border-radius: 8px;
      font-size: 1em;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      min-width: 80px;
    }

    .alert-btn.primary {
      background: #43a047;
      color: #fff;
    }

    .alert-btn.primary:hover {
      background: #388e3c;
    }

    .alert-btn.secondary {
      background: #f5f5f5;
      color: #666;
      border: 1px solid #ddd;
    }

    .alert-btn.secondary:hover {
      background: #e8e8e8;
    }

    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 999;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .loading-overlay.show {
      opacity: 1;
      visibility: visible;
    }

    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #e8f5e9;
      border-radius: 50%;
      border-top-color: #43a047;
      animation: spin 1s linear infinite;
    }

    @media (max-width: 520px) {
      .container { max-width: 100%; }
      .detail-content { padding: 16px; }
      .action-buttons { flex-direction: column; }
      .alert-content { padding: 24px; }
      .alert-buttons { flex-direction: column; }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <button class="back-btn" onclick="goBack()">← 返回</button>
      <div></div>
    </div>
    <h2>预约详情</h2>

    <div id="detailContent">
      <div class="loading">正在加载详情...</div>
    </div>
  </div>

  <!-- 自定义提示弹窗 -->
  <div id="customAlert" class="custom-alert">
    <div class="alert-content">
      <div id="alertIcon" class="alert-icon"></div>
      <div id="alertTitle" class="alert-title"></div>
      <div id="alertMessage" class="alert-message"></div>
      <div id="alertButtons" class="alert-buttons"></div>
    </div>
  </div>

  <!-- 加载遮罩 -->
  <div id="loadingOverlay" class="loading-overlay">
    <div class="loading-spinner"></div>
  </div>

  <script>
    let appointmentDetail = null;
    let userInfo = {};
    let storeData = {}; // 存储门店数据
    let projectData = {}; // 存储项目数据
    let customerData = {}; // 存储客户数据
    let healthWorkerData = {}; // 存储健康师数据
    let userData = {}; // 存储用户数据

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
      initializePage();
    });

    // 初始化页面
    async function initializePage() {
      try {
        // 检查登录状态
        await checkLoginStatus();

        // 获取URL参数中的ID
        const urlParams = new URLSearchParams(window.location.search);
        const appointmentId = urlParams.get('id');

        if (!appointmentId) {
          showErrorState('缺少预约ID参数');
          return;
        }

        // 加载预约详情
        await loadAppointmentDetail(appointmentId);
      } catch (error) {
        console.error('页面初始化失败:', error);
        showErrorState('页面初始化失败，请刷新重试');
      }
    }

    // 检查登录状态
    async function checkLoginStatus() {
      userInfo =  JSON.parse(localStorage.getItem('userInfo'));
      if (!userInfo || Object.keys(userInfo).length === 0) {
        window.location.href = 'login.html';
        return;
      }
    }

    // 获取用户信息
    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 {};
      }
    }

    // 加载预约详情
    async function loadAppointmentDetail(appointmentId) {
      try {
        showLoading();

        // 尝试通过单个详情API获取
        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqYyjl/${appointmentId}`;

        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) {
            appointmentDetail = result.data;
            // 加载相关数据
            await loadRelatedData();
            renderDetail();
          } else {
            // 如果单个详情API失败，尝试从列表API中查找
            await loadFromListAPI(appointmentId);
          }
        } else {
          // 如果单个详情API失败，尝试从列表API中查找
          await loadFromListAPI(appointmentId);
        }

      } catch (error) {
        console.error('加载预约详情失败:', error);
        // 尝试从列表API中查找
        await loadFromListAPI(appointmentId);
      }
    }

    // 从列表API中查找详情
    async function loadFromListAPI(appointmentId) {
      try {
        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqYyjl?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 && result.data.list) {
            // 从列表中查找对应的预约记录
            const appointment = result.data.list.find(item => item.id == appointmentId);
            if (appointment) {
              appointmentDetail = appointment;
              // 加载相关数据
              await loadRelatedData();
              renderDetail();
            } else {
              showErrorState('未找到对应的预约记录');
            }
          } else {
            showErrorState('获取预约列表失败');
          }
        } else {
          showErrorState('网络请求失败');
        }

      } catch (error) {
        console.error('从列表API加载详情失败:', error);
        showErrorState('加载详情失败，请重试');
      }
    }

    // 加载相关数据（门店、项目、客户）
    async function loadRelatedData() {
      try {
        // 并行加载所有相关数据，传递预约详情中的ID
        await Promise.all([
          loadStoreData(appointmentDetail.djmd),
          loadProjectData(appointmentDetail.yytyxm),
          loadCustomerData(appointmentDetail.gkxm),
          loadHealthWorkerData(appointmentDetail.yyjks),
          loadUserData(appointmentDetail.yyr) // 添加用户数据加载
        ]);
      } catch (error) {
        console.error('加载相关数据失败:', error);
      }
    }

    // 加载门店数据
    async function loadStoreData(storeId) {
      try {
        let apiUrl;
        if (storeId) {
          // 如果有门店ID，使用单个查询接口
          apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqMdxx/${storeId}`;
        } else {
          // 如果没有门店ID，获取所有门店数据
          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) {
            // 将门店数据转换为以ID为键的对象
            storeData = {};
            if (storeId && result.data) {
              // 单个查询结果
              storeData[result.data.id] = result.data.dm;
            } else if (result.data.list) {
              // 列表查询结果
              result.data.list.forEach(item => {
                storeData[item.id] = item.dm;
              });
            }
          }
        }
      } catch (error) {
        console.error('获取门店数据出错:', error);
      }
    }

    // 加载项目数据
    async function loadProjectData(projectId) {
      try {
        let apiUrl;
        if (projectId) {
          // 如果有项目ID，使用单个查询接口
          apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqXmzl/${projectId}`;
        } else {
          // 如果没有项目ID，获取所有项目数据
          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) {
            // 将项目数据转换为以ID为键的对象
            projectData = {};
            if (projectId && result.data) {
              // 单个查询结果
              projectData[result.data.id] = result.data.xmmc;
            } else if (result.data.list) {
              // 列表查询结果
              result.data.list.forEach(item => {
                projectData[item.id] = item.xmmc;
              });
            }
          }
        }
      } catch (error) {
        console.error('获取项目数据出错:', error);
      }
    }

    // 加载客户数据
    async function loadCustomerData(customerId) {
      customerId= ''
      try {
        let apiUrl;
        if (customerId) {
          // 如果有客户ID，使用单个查询接口
          apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/LqKhxx/${customerId}`;
        } else {
          // 如果没有客户ID，获取所有客户数据
          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) {
            // 将客户数据转换为以ID为键的对象
            customerData = {};
            if (customerId && result.data) {
              // 单个查询结果
              customerData[result.data.id] = {
                name: result.data.khmc,
                type: result.data.khlx
              };
            } else if (result.data.list) {
              // 列表查询结果
              result.data.list.forEach(item => {
                customerData[item.id] = {
                  name: item.khmc,
                  type: item.khlx
                };
              });
            }
          }
        }
      } catch (error) {
        console.error('获取客户数据出错:', error);
      }
    }

    // 加载健康师数据
    async function loadHealthWorkerData(healthWorkerId) {
      try {
        let apiUrl;
        if (healthWorkerId) {
          // 如果有健康师ID，使用单个查询接口
          apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/permission/Users/${healthWorkerId}`;
        } else {
          // 如果没有健康师ID，获取所有健康师数据
          apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/permission/Users?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) {
            // 将健康师数据转换为以ID为键的对象
            healthWorkerData = {};
            if (healthWorkerId && result.data) {
              // 单个查询结果
              healthWorkerData[result.data.id] = result.data.realName;
            } else if (result.data.list) {
              // 列表查询结果
              result.data.list.forEach(item => {
                healthWorkerData[item.id] = item.realName;
              });
            }
          }
        }
      } catch (error) {
        console.error('获取健康师数据出错:', error);
      }
    }

    // 加载用户数据
    async function loadUserData(userId) {
      console.log('加载用户数据:', userId);
      try {
        if (!userId) {
          console.log('没有用户ID，跳过用户数据加载');
          return;
        }

        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/permission/Users/${userId}`;

        console.log('查询用户信息:', apiUrl);

        const response = await authenticatedFetch(apiUrl, {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json'
          }
        });

        if (response.ok) {
          const result = await response.json();
          console.log('用户信息查询结果:', result);

          if (result.code === 200 && result.data) {
            userData = result.data;

            console.log('用户数据已加载:', userData);
          } else {
            console.warn('用户信息查询失败:', result.message || '未知错误');
          }
        } else {
          console.error('用户信息查询请求失败:', response.status, response.statusText);
        }
      } catch (error) {
        console.error('获取用户数据出错:', error);
      }
    }

    // 显示加载状态
    function showLoading() {
      const detailContent = document.getElementById('detailContent');
      detailContent.innerHTML = '<div class="loading">正在加载详情...</div>';
    }

    // 显示加载遮罩
    function showLoadingOverlay() {
      const loadingOverlay = document.getElementById('loadingOverlay');
      loadingOverlay.classList.add('show');
    }

    // 隐藏加载遮罩
    function hideLoadingOverlay() {
      const loadingOverlay = document.getElementById('loadingOverlay');
      loadingOverlay.classList.remove('show');
    }

    // 自定义提示弹窗
    function showCustomAlert(options) {
      const {
        type = 'info', // success, error, warning, info
        title = '',
        message = '',
        confirmText = '确定',
        cancelText = '取消',
        showCancel = false,
        onConfirm = null,
        onCancel = null
      } = options;

      const alert = document.getElementById('customAlert');
      const icon = document.getElementById('alertIcon');
      const titleEl = document.getElementById('alertTitle');
      const messageEl = document.getElementById('alertMessage');
      const buttonsEl = document.getElementById('alertButtons');

      // 设置图标
      icon.className = `alert-icon ${type}`;
      const icons = {
        success: '✓',
        error: '✕',
        warning: '⚠',
        info: 'ℹ'
      };
      icon.textContent = icons[type] || icons.info;

      // 设置标题和消息
      titleEl.textContent = title;
      messageEl.textContent = message;

      // 设置按钮
      buttonsEl.innerHTML = '';

      if (showCancel) {
        const cancelBtn = document.createElement('button');
        cancelBtn.className = 'alert-btn secondary';
        cancelBtn.textContent = cancelText;
        cancelBtn.onclick = () => {
          hideCustomAlert();
          if (onCancel) onCancel();
        };
        buttonsEl.appendChild(cancelBtn);
      }

      const confirmBtn = document.createElement('button');
      confirmBtn.className = 'alert-btn primary';
      confirmBtn.textContent = confirmText;
      confirmBtn.onclick = () => {
        hideCustomAlert();
        if (onConfirm) onConfirm();
      };
      buttonsEl.appendChild(confirmBtn);

      // 显示弹窗
      alert.classList.add('show');
    }

    // 隐藏自定义弹窗
    function hideCustomAlert() {
      const alert = document.getElementById('customAlert');
      alert.classList.remove('show');
    }

    // 成功提示
    function showSuccessAlert(message, title = '操作成功') {
      showCustomAlert({
        type: 'success',
        title: title,
        message: message,
        confirmText: '确定'
      });
    }

    // 错误提示
    function showErrorAlert(message, title = '操作失败') {
      showCustomAlert({
        type: 'error',
        title: title,
        message: message,
        confirmText: '确定'
      });
    }

    // 确认对话框
    function showConfirmAlert(message, title = '确认操作', onConfirm = null) {
      showCustomAlert({
        type: 'warning',
        title: title,
        message: message,
        showCancel: true,
        confirmText: '确定',
        cancelText: '取消',
        onConfirm: onConfirm
      });
    }

    // 渲染详情
    function renderDetail() {
      if (!appointmentDetail) return;

      const detailContent = document.getElementById('detailContent');

      // 格式化时间
      const formatDateTime = (timestamp) => {
        if (!timestamp) return '未设置';
        try {
          return new Date(timestamp).toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
          });
        } catch (error) {
          return timestamp;
        }
      };

      // 获取状态样式
      const getStatusInfo = (fStatus) => {
        if (fStatus === '已确认') return { class: 'success', text: '已确认' };
        if (fStatus === '已取消') return { class: 'failed', text: '已取消' };
        if (fStatus === '已预约') return { class: 'pending', text: '已预约' };
        return { class: 'pending', text: fStatus || '待确认' };
      };

      const statusInfo = getStatusInfo(appointmentDetail.F_Status);

      // 获取显示名称
      const getStoreName = (storeId) => {
        return storeData[storeId] || appointmentDetail.dm || '未知门店';
      };

      const getProjectName = (projectId) => {
        return projectData[projectId] || appointmentDetail.xmmc || '未知项目';
      };

      const getCustomerName = (customerId) => {
        return customerData[customerId]?.name || appointmentDetail.khmc || '未知客户';
      };

      const getCustomerType = (customerId) => {
        return customerData[customerId]?.type || appointmentDetail.khlx || '普通';
      };

      const getHealthWorkerName = (healthWorkerId) => {
        return healthWorkerData[healthWorkerId] || appointmentDetail.yyjks || '未分配';
      };

      // 获取用户显示名称
      const getUserDisplayName = (userId) => {
        if (!userId) return '未知';

        const user = userData;
        if (user) {
          return user.realName || user.account || '未知';
        }

        // 如果没有找到用户数据，返回原始值
        return '未知';
      };

      // 格式化开始和结束时间
      const formatAppointmentTime = (startTime, endTime) => {
        if (!startTime || !endTime) return '未设置';
        try {
          const start = new Date(startTime);
          const end = new Date(endTime);
          const startStr = start.toLocaleString('zh-CN', {
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
          });
          const endStr = end.toLocaleString('zh-CN', {
            hour: '2-digit',
            minute: '2-digit'
          });
          return `${startStr} - ${endStr}`;
        } catch (error) {
          return `${startTime} - ${endTime}`;
        }
      };

      detailContent.innerHTML = `
        <div class="detail-card">
          <div class="detail-header">
            <div class="customer-name">${appointmentDetail.gkxm}</div>
            <div class="customer-phone">${getProjectName(appointmentDetail.yytyxm)}</div>
          </div>
          <div class="detail-content">
            <div class="detail-section">
              <div class="section-title">基本信息</div>
              <div class="detail-row">
                <span class="detail-label">门店</span>
                <span class="detail-value">${getStoreName(appointmentDetail.djmd)}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">项目名称</span>
                <span class="detail-value">${getProjectName(appointmentDetail.yytyxm)}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">客户姓名</span>
                <span class="detail-value">${appointmentDetail.gkxm}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">客户类型</span>
                <span class="detail-value">${appointmentDetail.gklx}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">预约健康师</span>
                <span class="detail-value">${getHealthWorkerName(appointmentDetail.yyjks)}</span>
              </div>
            </div>
            <div class="detail-section">
              <div class="section-title">预约信息</div>
              <div class="detail-row">
                <span class="detail-label">预约时间</span>
                <span class="detail-value">${formatAppointmentTime(appointmentDetail.yysj, appointmentDetail.yyjs)}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">操作时间</span>
                <span class="detail-value">${formatDateTime(appointmentDetail.czsj)}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">预约人</span>
                <span class="detail-value">${getUserDisplayName(appointmentDetail.yyr)}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">预约状态</span>
                <span class="detail-value">
                  <span class="status-badge ${statusInfo.class}">${statusInfo.text}</span>
                </span>
              </div>
            </div>
            ${appointmentDetail.F_Status === '已预约' ? `
            <div class="action-buttons">
              <button class="action-btn secondary" onclick="cancelAppointment()">取消预约</button>
              <button class="action-btn primary" onclick="confirmAppointment()">确认预约</button>
            </div>
            ` : ''}
          </div>
        </div>
      `;
    }

    // 编辑预约
    function editAppointment() {
      if (appointmentDetail && appointmentDetail.id) {
        // 跳转到编辑页面，传递ID参数
        window.location.href = `appointment.html?edit=true&id=${appointmentDetail.id}`;
      } else {
        showErrorAlert('无法获取预约ID', '操作失败');
      }
    }

    // 取消预约
    async function cancelAppointment() {
      if (!appointmentDetail || !appointmentDetail.id) {
        showErrorAlert('无法获取预约ID', '操作失败');
        return;
      }

      showConfirmAlert('确定要取消这个预约吗？', '取消预约', async () => {
        await performCancelAppointment();
      });
    }

    // 执行取消预约操作
    async function performCancelAppointment() {
      try {
        showLoadingOverlay();

        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/lqyyjl/${appointmentDetail.id}`;

        const response = await fetch(apiUrl, {
          method: 'PUT',
          headers: {
            'Authorization': `${getAuthToken()}`,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            f_Status: "已取消",
            id: appointmentDetail.id
          })
        });

        hideLoadingOverlay();

        if (response.ok) {
          const result = await response.json();
          if (result.code === 200) {
            showSuccessAlert('预约已成功取消', '操作成功');
            // 重新加载详情
            await loadAppointmentDetail(appointmentDetail.id);
          } else {
            showErrorAlert(result.message || '取消预约失败', '操作失败');
          }
        } else {
          showErrorAlert('网络请求失败，请重试', '操作失败');
        }
      } catch (error) {
        hideLoadingOverlay();
        console.error('取消预约失败:', error);
        showErrorAlert('取消预约失败，请重试', '操作失败');
      }
    }

    // 确认预约
    async function confirmAppointment() {
      if (!appointmentDetail || !appointmentDetail.id) {
        showErrorAlert('无法获取预约ID', '操作失败');
        return;
      }

      showConfirmAlert('确定要确认这个预约吗？', '确认预约', async () => {
        await performConfirmAppointment();
      });
    }

    // 执行确认预约操作
    async function performConfirmAppointment() {
      try {
        showLoadingOverlay();

        const apiUrl = `${APP_CONFIG.getApiBaseUrl()}/api/Extend/lqyyjl/${appointmentDetail.id}`;

        const response = await fetch(apiUrl, {
          method: 'PUT',
          headers: {
            'Authorization': `${getAuthToken()}`,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            f_Status: "已确认",
            id: appointmentDetail.id
          })
        });

        hideLoadingOverlay();

        if (response.ok) {
          const result = await response.json();
          if (result.code === 200) {
            showSuccessAlert('预约已成功确认', '操作成功');
            // 重新加载详情
            await loadAppointmentDetail(appointmentDetail.id);
          } else {
            showErrorAlert(result.message || '确认预约失败', '操作失败');
          }
        } else {
          showErrorAlert('网络请求失败，请重试', '操作失败');
        }
      } catch (error) {
        hideLoadingOverlay();
        console.error('确认预约失败:', error);
        showErrorAlert('确认预约失败，请重试', '操作失败');
      }
    }

    // 返回上一页
    function goBack() {
      if (window.history.length > 1) {
        window.history.back();
      } else {
        window.location.href = 'appointment-list.html';
      }
    }
  </script>
</body>
</html>