<!-- components/QueueTicketDetail/QueueTicketDetail.vue -->
<template>
  <!-- 弹窗遮罩 -->
  <view v-if="show" class="ticket-modal-mask" @click="handleClose">
    <view class="ticket-modal-content" @click.stop>
      <!-- 弹窗头部 -->
      <view class="ticket-modal-header">
        <view class="header-main">
          <text class="modal-title">{{ title }}</text>
          <text class="modal-subtitle">排队取号详情信息</text>
        </view>
        <text class="close-btn" @click="handleClose">×</text>
      </view>
      
      <!-- 弹窗内容 -->
      <scroll-view class="ticket-modal-body" scroll-y :show-scrollbar="true">
        <!-- 票号基本信息卡片 -->
        <view class="info-card">
          <view class="card-header">
            <text class="card-icon">🎫</text>
            <text class="card-title">票号信息</text>
          </view>
          <view class="card-content">
            <view class="info-row">
              <text class="info-label">票号</text>
              <text class="info-value highlight">{{ ticketData.ticketNumber }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">状态</text>
              <view class="status-badge" :class="getStatusClass(ticketData.status)">
                {{ getStatusText(ticketData.status) }}
              </view>
            </view>
          </view>
        </view>

        <!-- 时间信息卡片 -->
        <view class="info-card">
          <view class="card-header">
            <text class="card-icon">⏰</text>
            <text class="card-title">时间信息</text>
          </view>
          <view class="card-content compact">
            <view class="time-grid">
              <view class="time-item">
                <text class="time-label">取号日期</text>
                <text class="time-value">{{ ticketData.queueDate }}</text>
              </view>
              <view class="time-item">
                <text class="time-label">取号时间</text>
                <text class="time-value">{{ ticketData.queueTime }}</text>
              </view>
              <view class="time-item">
                <text class="time-label">等候时长</text>
                <text class="time-value duration">{{ ticketData.waitingDuration }}</text>
              </view>
              <view class="time-item">
                <text class="time-label">办理时长</text>
                <text class="time-value duration">{{ ticketData.processingDuration }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 办理信息卡片 -->
        <view class="info-card">
          <view class="card-header">
            <text class="card-icon">🏢</text>
            <text class="card-title">办理信息</text>
          </view>
          <view class="card-content compact">
            <view class="info-row">
              <text class="info-label">办理窗口</text>
              <text class="info-value accent">{{ ticketData.serviceWindow }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">办理业务</text>
              <text class="info-value">{{ ticketData.businessType }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">工作人员</text>
              <text class="info-value primary">{{ ticketData.staffName }}</text>
            </view>
          </view>
        </view>

        <!-- 评价信息卡片 -->
        <view v-if="ticketData.rating" class="info-card">
          <view class="card-header">
            <text class="card-icon">⭐</text>
            <text class="card-title">服务评价</text>
          </view>
          <view class="card-content">
            <!-- 星级评价 -->
            <view class="rating-display">
              <view class="stars-container">
                <text class="star" v-for="n in 5" :key="n" 
                  :class="{ active: n <= getStarCount(ticketData.rating) }">★</text>
              </view>
              <text class="rating-text">{{ getRatingText(ticketData.rating) }}</text>
            </view>
            
            <!-- 评价详情 -->
            <view class="rating-details">
              <view class="info-row">
                <text class="info-label">评价人</text>
                <text class="info-value">{{ ticketData.ratingPerson }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">联系方式</text>
                <text class="info-value contact">{{ ticketData.ratingContact }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 无评价提示 -->
        <view v-else class="empty-card">
          <text class="empty-icon">💬</text>
          <text class="empty-text">暂未收到评价</text>
          <text class="empty-desc">服务完成后可进行评价</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { 
  QueueTicketDetailProps, 
  QueueTicketDetailEmits, 
  TicketDetail
} from './QueueTicketDetail.type';
import { 
  defaultTicketData, 
  TicketStatus, 
  RatingResult 
} from './QueueTicketDetail.type';

// 组件Props
const props = withDefaults(defineProps<QueueTicketDetailProps>(), {
  title: '票号详情',
  ticketData: () => defaultTicketData
});

// 组件Emits
const emit = defineEmits<QueueTicketDetailEmits>();

// 计算属性
const ticketData = computed(() => props.ticketData);

// 状态文本映射
const getStatusText = (status: TicketStatus): string => {
  const statusMap = {
    [TicketStatus.WAITING]: '等待中',
    [TicketStatus.PROCESSING]: '办理中',
    [TicketStatus.COMPLETED]: '已完成',
    [TicketStatus.CANCELLED]: '已取消'
  };
  return statusMap[status] || '未知状态';
};

// 状态样式类
const getStatusClass = (status: TicketStatus): string => {
  const classMap = {
    [TicketStatus.WAITING]: 'status-waiting',
    [TicketStatus.PROCESSING]: 'status-processing',
    [TicketStatus.COMPLETED]: 'status-completed',
    [TicketStatus.CANCELLED]: 'status-cancelled'
  };
  return classMap[status] || '';
};

// 评价文本映射
const getRatingText = (rating: RatingResult): string => {
  const ratingMap = {
    [RatingResult.EXCELLENT]: '非常满意',
    [RatingResult.GOOD]: '满意',
    [RatingResult.AVERAGE]: '一般',
    [RatingResult.POOR]: '不满意'
  };
  return ratingMap[rating] || '未评价';
};

// 获取星星数量
const getStarCount = (rating: RatingResult): number => {
  const starMap = {
    [RatingResult.EXCELLENT]: 5,
    [RatingResult.GOOD]: 4,
    [RatingResult.AVERAGE]: 3,
    [RatingResult.POOR]: 2
  };
  return starMap[rating] || 0;
};

// 事件处理
const handleClose = () => {
  emit('update:show', false);
  emit('close');
};
</script>

<style scoped>
.ticket-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 40rpx;
}

.ticket-modal-content {
  background: white;
  border-radius: 20rpx;
  width: 100%;
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* 头部样式 */
.ticket-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 32rpx 32rpx 24rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-main {
  flex: 1;
}

.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: white;
  display: block;
  margin-bottom: 8rpx;
  line-height: 1.2;
}

.modal-subtitle {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
  display: block;
  line-height: 1.2;
}

.close-btn {
  font-size: 40rpx;
  color: white;
  padding: 8rpx 16rpx;
  font-weight: 300;
  line-height: 1;
}

/* 主体内容 */
.ticket-modal-body {
  flex: 1;
  padding: 0 24rpx 24rpx;
  max-height: calc(75vh - 120rpx);
}

/* 信息卡片 */
.info-card {
  background: white;
  border-radius: 16rpx;
  margin: 24rpx 0 0;
  border: 1rpx solid #e8e8e8;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.info-card:first-child {
  margin-top: 24rpx;
}

.card-header {
  display: flex;
  align-items: center;
  padding: 24rpx 28rpx;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1rpx solid #f1f5f9;
}

.card-icon {
  font-size: 28rpx;
  margin-right: 16rpx;
}

.card-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1e293b;
}

.card-content {
  padding: 28rpx;
}

.card-content.compact {
  padding: 20rpx 28rpx;
}

/* 信息行 */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  min-height: 40rpx;
}

.info-row:not(:last-child) {
  border-bottom: 1rpx solid #f8fafc;
}

.info-label {
  font-size: 28rpx;
  color: #64748b;
  font-weight: 500;
  min-width: 180rpx;
}

.info-value {
  font-size: 28rpx;
  color: #1e293b;
  font-weight: 600;
  text-align: right;
  flex: 1;
  margin-left: 20rpx;
  line-height: 1.4;
}

/* 特殊样式 */
.info-value.highlight {
  color: #667eea;
  font-size: 32rpx;
  font-weight: bold;
}

.info-value.accent {
  color: #f59e0b;
  font-weight: bold;
}

.info-value.primary {
  color: #10b981;
  font-weight: bold;
}

.info-value.contact {
  color: #667eea;
}

.info-value.duration {
  color: #ef4444;
  font-weight: bold;
}

/* 状态标签 */
.status-badge {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
  min-width: 120rpx;
  text-align: center;
}

.status-waiting {
  background: #fffbeb;
  color: #d97706;
  border: 1rpx solid #fcd34d;
}

.status-processing {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1rpx solid #93c5fd;
}

.status-completed {
  background: #f0fdf4;
  color: #166534;
  border: 1rpx solid #86efac;
}

.status-cancelled {
  background: #fef2f2;
  color: #dc2626;
  border: 1rpx solid #fca5a5;
}

/* 时间网格 */
.time-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.time-item {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.time-label {
  font-size: 24rpx;
  color: #64748b;
  font-weight: 500;
}

.time-value {
  font-size: 26rpx;
  color: #1e293b;
  font-weight: 600;
}

/* 评价显示 */
.rating-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  background: #f8fafc;
  border-radius: 12rpx;
  margin-bottom: 24rpx;
}

.stars-container {
  display: flex;
  gap: 8rpx;
  margin-bottom: 12rpx;
}

.star {
  font-size: 36rpx;
  color: #e2e8f0;
  transition: color 0.3s ease;
}

.star.active {
  color: #f59e0b;
}

.rating-text {
  font-size: 26rpx;
  font-weight: 600;
  color: #1e293b;
}

.rating-details {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

/* 空状态 */
.empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 40rpx;
  background: #f8fafc;
  border-radius: 16rpx;
  border: 2rpx dashed #e2e8f0;
  margin-top: 24rpx;
}

.empty-icon {
  font-size: 64rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 8rpx;
}

.empty-desc {
  font-size: 24rpx;
  color: #94a3b8;
}

/* 响应式设计 */
@media (min-width: 768px) {
  .ticket-modal-content {
    width: 85%;
    max-width: 650px;
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .ticket-modal-mask {
    padding: 20rpx;
  }
  
  .ticket-modal-content {
    max-height: 80vh;
  }
  
  .ticket-modal-body {
    max-height: calc(80vh - 120rpx);
  }
  
  .info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8rpx;
    padding: 16rpx 0;
  }
  
  .info-value {
    text-align: left;
    margin-left: 0;
  }
  
  .time-grid {
    grid-template-columns: 1fr;
    gap: 16rpx;
  }
  
  .status-badge {
    align-self: flex-start;
  }
}

/* 滚动条优化 */
::-webkit-scrollbar {
  width: 4rpx;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2rpx;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2rpx;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>