<template>
  <div class="records-modal-overlay" v-if="visible" @click="handleOverlayClick">
    <div class="records-modal-container" @click.stop>
      <!-- 头部 -->
      <div class="modal-header">
        <h2 class="modal-title">充值记录</h2>
        <button class="close-btn" @click="handleClose">
          <span class="close-icon">x</span>
        </button>
      </div>

      <!-- 内容区域 -->
      <div class="modal-content">
        <!-- 加载状态 -->
        <div class="loading-state" v-if="loading">
          <div class="loading-spinner"></div>
          <p>加载中...</p>
        </div>

        <!-- 错误状态 -->
        <div class="error-state" v-else-if="error">
          <div class="error-icon">⚠️</div>
          <p>{{ error }}</p>
          <button class="retry-btn" @click="fetchRecords">重试</button>
        </div>

        <!-- 空状态 -->
        <div class="empty-state" v-else-if="records.length === 0">
          <div class="empty-icon">📋</div>
          <p>暂无充值记录</p>
        </div>

        <!-- 记录列表 -->
        <div class="records-list" v-else>
          <div 
            class="record-item" 
            v-for="record in records" 
            :key="record.orderNo"
          >
            <div class="record-main">
              <div class="record-left">
           
                <div class="order-info">
                  <span class="order-no">订单号: {{ record.orderNo }}</span>
                  <span class="payment-method">{{ record.paymentMethodName }}</span>
                </div>
                <div class="time-info">
                  <span class="create-time">创建时间: {{ formatTime(record.createTime) }}</span>
                  <span class="paid-time" v-if="record.paidAt">支付时间: {{ formatTime(record.paidAt) }}</span>
                </div>
              </div>
              <div class="record-right">
                <div class="amount">¥{{ record.amount }}</div>
                <div class="points">+{{ record.pointsAmount }} 积分</div>
                <div class="status" :class="getStatusClass(record.statusName)">
                  {{ record.statusName }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 - 固定在底部 -->
      <div class="pagination" v-if="records.length > 0">
        <button 
          class="page-btn" 
          :disabled="currentPage === 1"
          @click="prevPage"
        >
          上一页
        </button>
        <span class="page-info">第 {{ currentPage }} 页</span>
        <button 
          class="page-btn" 
          :disabled="records.length < pageSize"
          @click="nextPage"
        >
          下一页
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getRechargeRecords } from '../api/package'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close'])

const loading = ref(false)
const error = ref('')
const records = ref([])
const currentPage = ref(1)
const pageSize = ref(10)

// 获取充值记录
const fetchRecords = async () => {
  try {
    loading.value = true
    error.value = ''
    
    const response = await getRechargeRecords({
      page: currentPage.value,
      size: pageSize.value
    })
    
    if (response.code === 200) {
      records.value = response.data || []
    } else {
      error.value = response.message || '获取充值记录失败'
      ElMessage.error(error.value)
    }
  } catch (err) {
    console.error('获取充值记录失败:', err)
    error.value = '网络错误，请稍后重试'
    ElMessage.error(error.value)
  } finally {
    loading.value = false
  }
}

// 格式化时间
const formatTime = (timeStr) => {
  if (!timeStr) return '-'
  const date = new Date(timeStr)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const seconds = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 获取状态样式类
const getStatusClass = (status) => {
  const statusMap = {
    '已完成': 'status-success',
    '已关闭': 'status-pending',
    '已取消': 'status-cancelled',
    '已退款': 'status-refund',
    '支付失败': 'status-failed'
  }
  return statusMap[status] || 'status-default'
}

// 上一页
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    fetchRecords()
  }
}

// 下一页
const nextPage = () => {
  if (records.value.length >= pageSize.value) {
    currentPage.value++
    fetchRecords()
  }
}

// 关闭弹窗
const handleClose = () => {
  emit('close')
}

// 点击遮罩关闭
const handleOverlayClick = () => {
  handleClose()
}

// 监听弹窗显示状态
watch(() => props.visible, (newVisible) => {
  if (newVisible) {
    currentPage.value = 1
    fetchRecords()
  } else {
    // 重置状态
    records.value = []
    error.value = ''
    loading.value = false
  }
})

// 组件挂载时如果弹窗可见则获取数据
onMounted(() => {
  if (props.visible) {
    fetchRecords()
  }
})
</script>

<style scoped>
.records-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.records-modal-container {
  width: 800px;
  max-height: 90vh;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  backdrop-filter: blur(74px);
  background: rgba(198, 208, 219, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-title {
  color: rgba(255, 255, 255, 1);
  font-family: PingFang SC;
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0%;
  margin: 0;
}

.close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 1);
}

.modal-content {
  flex: 1;
  padding: 24px 32px;
  overflow-y: auto;
  /* 美化滚动条 */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
}

/* Webkit浏览器滚动条样式 */
.modal-content::-webkit-scrollbar {
  width: 8px;
}

.modal-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  transition: background 0.2s ease;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* 加载状态 */
.loading-state,
.error-state,
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: rgba(255, 255, 255, 0.8);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-icon,
.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.retry-btn {
  margin-top: 16px;
  padding: 8px 24px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.retry-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

/* 记录列表 */
.records-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.record-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s ease;
}

.record-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.record-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.record-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.package-name {
  font-size: 18px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  margin-bottom: 4px;
}

.order-info,
.time-info {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

.order-no {
  font-family: monospace;
}

.record-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.amount {
  font-size: 24px;
  font-weight: 600;
  color: rgba(26, 195, 255, 1);
}

.points {
  font-size: 14px;
  color: rgba(16, 185, 129, 1);
  font-weight: 500;
}

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

.status-success {
  background: rgba(16, 185, 129, 0.2);
  color: rgba(16, 185, 129, 1);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-pending {
  background: rgba(245, 158, 11, 0.2);
  color: rgba(245, 158, 11, 1);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-cancelled,
.status-failed {
  background: rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 1);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-refund {
  background: rgba(139, 92, 246, 0.2);
  color: rgba(139, 92, 246, 1);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

.status-default {
  background: rgba(180, 184, 187, 0.2);
  color: rgba(180, 184, 187, 1);
  border: 1px solid rgba(180, 184, 187, 0.3);
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 20px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(198, 208, 219, 0.1);
  backdrop-filter: blur(10px);
}

.page-btn {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.page-info {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .records-modal-container {
    width: 95vw;
    max-height: 90vh;
  }
  
  .modal-header,
  .modal-content {
    padding: 20px;
  }
  
  .record-main {
    flex-direction: column;
    gap: 16px;
  }
  
  .record-right {
    align-items: flex-start;
  }
  
  .order-info,
  .time-info {
    flex-direction: column;
    gap: 4px;
  }
}
</style>

