<template>
  <div class="queue-page">
    <nav-bar/>
    
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      class="queue-container"
    >
      <!-- 空状态 -->
     <div class="custom-empty" v-if="!loading && list.length === 0">
  <div class="empty-text">暂无挂号排队信息</div>
</div>
      
      <!-- 排队记录卡片 -->
      <div 
        v-for="(item, index) in list" 
        :key="item.ID" 
        class="queue-card"
      >
        <!-- 状态与序号区域 -->
        <div class="status-bar">
          <!-- 就诊状态 -->
          <div class="status-badge" :class="getStatusClass(item.DiagnosticStatus)">
            <van-icon :name="getStatusIcon(item.DiagnosticStatus)" class="status-icon" />
            <span class="status-text">{{ getStatusText(item.DiagnosticStatus) }}</span>
          </div>
          
          <!-- 挂号序号 -->
          <div class="serial-number">
            <span class="serial-label">挂号序号：</span>
            <span class="serial-value">{{ item.ADiagnosticNO }}</span>
          </div>
        </div>
        
        <!-- 核心信息区域 -->
        <div class="core-info">
          <div class="dept-doctor">
            <div class="info-item">
            <van-icon name="wap-home-o" class="info-icon" />
              <span class="info-label">挂号科室：</span>
              <span class="info-value">{{ item.RoomName || item.DepartmentName }}</span>
            </div>
            <div class="info-item">
              <van-icon name="user-o" class="info-icon" />
              <span class="info-label">挂号医生：</span>
              <span class="info-value">{{ item.DoctorName }}</span>
            </div>
            <div class="info-item">
              <van-icon name="service-o" class="info-icon" />
              <span class="info-label">呼叫诊室：</span>
              <span class="info-value">{{ item.CallRoomName || '暂无呼叫' }}</span>
            </div>
          </div>
        </div>
        
        <!-- 时间信息区域 -->
        <div class="time-info">
          <div class="time-item">
            <van-icon name="clock-o" class="time-icon" />
            <span class="time-label">签到时间：</span>
            <span class="time-value">{{ item.DiagnosticOrderTime }}</span>
          </div>
          
          <div class="time-item" v-if="item.CallTime">
            <van-icon name="volume-o" class="time-icon" />
            <span class="time-label">呼叫时间：</span>
            <span class="time-value">{{ item.CallTime }}</span>
          </div>
        </div>
        
        <!-- 正在呼叫提示（仅状态为2时显示） -->
        <div v-if="item.DiagnosticStatus === '2'" class="calling-notice">
          <van-icon name="warning" class="notice-icon" />
          <span class="notice-text">正在呼叫您的序号，请尽快前往{{ item.CallRoomName }}就诊</span>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { getQueuing } from "@/request/api.js";
import { Empty, Icon } from "vant";


export default {
  components: {
    [Empty.name]: Empty,
    [Icon.name]: Icon
  },
  data() {
    return {
      loading: false,
      finished: false,
      list: [],
      patientId: '',
      patientName: '',
      intervalId: null // 添加定时器ID
    };
  },

  mounted() {
    this.patientId = this.$route.query.patientId;
    this.patientName = this.$route.query.patientName;
    this.onLoad();

    // 设置每20秒执行一次onLoad方法
    this.intervalId = setInterval(() => {
      this.onLoad();
    }, 20000);
  },
beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  },
  
  methods: {
    onLoad() {
      this.loading = true;
      const params = {
        PatName: this.patientName,
        PatID: this.patientId
      };

     getQueuing(params).then(res => {
  this.loading = false;
  console.log(res.ResultCode);
  if (res.ResultCode === "0") {
    this.list = res.DiagnosticInfos || [];
    // 按签到时间倒序排列（最新的在前面）
    this.list.sort((a, b) => {
      return new Date(`2025-10-29 ${b.DiagnosticOrderTime}`) - new Date(`2025-10-29 ${a.DiagnosticOrderTime}`);
    });
    this.finished = true;
  } else {
    // 移除 Toast 显示，只在控制台记录错误
    console.log('获取排队信息失败:', res.ResultMsg);
    this.finished = true;
  }
}).catch(err => {
  console.error('获取排队信息失败:', err);
  // Toast('获取信息失败，请重试');
  this.loading = false;
  this.finished = true;
});
    },

    // 就诊状态文本映射
    getStatusText(status) {
      const statusMap = {
        '1': '候诊中',
        '2': '正在呼叫',
        '3': '候诊中',
        '4': '已就诊',
        '5': '已过号',
        '6': '已挂起'
      };
      return statusMap[status] || '未知状态';
    },

    // 就诊状态图标映射
    getStatusIcon(status) {
      const iconMap = {
        '1': 'friends-o',       // 候诊-等待图标
        '2': 'volume-o',      // 呼叫-音量图标
        '3': 'underway-o',       // 候诊-等待图标
        '4': 'passed',// 已就诊-对勾图标
        '5': 'close',// 过号-叉号图标
        '6': 'pause-circle-o' // 挂起-暂停图标
      };
      return iconMap[status] || 'clock-o';
    },

    // 就诊状态样式类（颜色区分）
    getStatusClass(status) {
      const classMap = {
        '1': 'status-waiting',   // 候诊-蓝色
        '2': 'status-calling',   // 呼叫-橙色
        '3': 'status-waiting',   // 候诊-蓝色
        '4': 'status-completed', // 已就诊-绿色
        '5': 'status-missed',    // 过号-红色
        '6': 'status-suspended'  // 挂起-灰色
      };
      return classMap[status] || 'status-unknown';
    }
  }
};
</script>

<style scoped lang="scss">
.custom-empty {
  padding: 2rem 0;
  text-align: center;
  
  .empty-text {
    font-size: 0.32rem;
    color: #86909c;
  }
}
.queue-page {
  background-color: #f7f8fa;
  min-height: 100vh;
  padding-top: 1rem; // 适配导航栏高度
}

.queue-container {
  padding: 0.2rem 0.3rem;
}

.empty-view {
  padding: 3rem 0;
  text-align: center;
}

// 排队记录卡片
.queue-card {
  background-color: #fff;
  border-radius: 0.15rem;
  padding: 0.35rem;
  margin-bottom: 0.25rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

// 状态与序号区域
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #f5f5f5;
}

// 状态徽章
.status-badge {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.1rem 0.25rem;
  border-radius: 0.2rem;
  font-size: 0.5rem;
  font-weight: 500;

  .status-icon {
    font-size: 0.6rem;
  }
}

// 状态颜色样式
.status-waiting {
  background-color: #e8f3ff;
  color: #4285f4;
}
.status-calling {
  background-color: #fff8e6;
  color: #ff7d00;
  animation: pulse 1.5s infinite; // 呼吸动画强调
}
.status-completed {
  background-color: #e6f7ee;
  color: #00b42a;
}
.status-missed {
  background-color: #fee;
  color: #f53f3f;
}
.status-suspended {
  background-color: #f2f3f5;
  color: #86909c;
}

// 挂号序号
.serial-number {
  display: flex;
  align-items: center;
  gap: 0.1rem;

  .serial-label {
    font-size: 0.32rem;
    color: #86909c;
  }
  .serial-value {
    font-size: 0.5rem;
    color: #333;
    font-weight: 600;
  }
}

// 核心信息区域
.core-info {
  margin-bottom: 0.3rem;
}

.dept-doctor {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 0.15rem;

  .info-icon {
    font-size: 0.4rem;
    color: #4285f4;
    width: 0.4rem; // 固定宽度，保证对齐
  }
  .info-label {
    font-size: 0.4rem;
    color: #86909c;
    width: 2.2rem; // 固定宽度，保证内容对齐
  }
  .info-value {
    font-size: 0.4rem;
    color: #333;
    flex: 1;
  }
}

// 时间信息区域
.time-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-top: 0.2rem;
  border-top: 1px dashed #f0f0f0;
}

.time-item {
  display: flex;
  align-items: center;
  gap: 0.15rem;

  .time-icon {
    font-size: 0.4rem;
    color: #86909c;
    width: 0.4rem;
  }
  .time-label {
    font-size: 0.4rem;
    color: #86909c;
    width: 2.2rem;
  }
  .time-value {
    font-size: 0.4rem;
    color: #333;
    flex: 1;
  }
}

// 正在呼叫提示
.calling-notice {
  margin-top: 0.25rem;
  padding: 0.2rem;
  background-color: #fff8e6;
  border-left: 3px solid #ff7d00;
  border-radius: 0.05rem;
  display: flex;
  align-items: center;
  gap: 0.15rem;

  .notice-icon {
    font-size: 0.36rem;
    color: #ff7d00;
  }
  .notice-text {
    font-size: 0.32rem;
    color: #ff7d00;
    flex: 1;
    line-height: 1.4;
  }
}

// 动画效果
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}
</style>