<template>
  <div class="exchange-records-page">
    <!-- 页面头部 -->
    <div class="page-header-modern">
      <div class="header-content">
        <button class="back-btn" @click="goBack">
          <svg viewBox="0 0 24 24" class="back-icon">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
          </svg>
        </button>
        <div class="header-info">
          <div class="header-text">
            <h1 class="header-title">兑换记录</h1>
            <p class="header-subtitle">查看您的会员兑换历史</p>
          </div>
        </div>

      </div>
    </div>

    <!-- 主要内容 -->
    <div class="records-container">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner">
          <div class="spinner"></div>
          <p class="loading-text">正在加载兑换记录...</p>
        </div>
      </div>

      <!-- 错误提示 -->
      <div v-else-if="errorMessage" class="error-container">
        <div class="error-content">
          <div class="error-icon">❌</div>
          <h3 class="error-title">加载失败</h3>
          <p class="error-message">{{ errorMessage }}</p>
          <button class="retry-btn" @click="loadExchangeRecords">
            <span>重新加载</span>
          </button>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else-if="records.length === 0" class="empty-container">
        <div class="empty-content">
          <div class="empty-icon">📋</div>
          <h3 class="empty-title">暂无兑换记录</h3>
          <p class="empty-message">您还没有任何兑换记录，快去兑换会员码吧</p>
          <button class="action-btn primary" @click="goToProfile">
            <span>去兑换会员码</span>
          </button>
        </div>
      </div>

      <!-- 兑换记录列表 -->
      <div v-else class="records-list">
        <div class="list-header">
          <span class="record-count">{{ records.length }}条记录</span>
        </div>

        <div class="records-grid">
          <div 
            v-for="record in paginatedRecords" 
            :key="record.id"
            class="record-card-modern"
          >
            <div class="record-header">
              <div class="status-badge" :class="getStatusClass(record.isUse)">
                <!-- <span class="status-icon">{{ getStatusIcon(record.isUse) }}</span> -->
                <span class="status-text">{{ getStatusText(record.isUse) }}</span>
              </div>
              <div class="record-date">{{ formatDate(record.exchangeTime) }}</div>
            </div>
            
            <div class="record-body">
              <div class="record-info-grid">
                <div class="info-item">
                  <label class="info-label">订单号</label>
                  <span class="info-value">{{ record.orderNo || '-' }}</span>
                </div>
                <div class="info-item">
                  <label class="info-label">兑换类型</label>
                  <span class="info-value type-value">{{ getExchangeTypeText(record.type) }}</span>
                </div>
                <div class="info-item">
                  <label class="info-label">兑换模式</label>
                  <span class="info-value">{{ getExchangeModeText(record.exchangeMode) }}</span>
                </div>
                <div v-if="record.orderAmount" class="info-item">
                  <label class="info-label">订单金额</label>
                  <span class="info-value amount-value">¥{{ record.orderAmount }}</span>
                </div>
              </div>
              
              <!-- 移动端紧凑布局 -->
              <div class="record-info-compact">
                <div class="compact-left">
                  <div class="compact-item">
                    <span class="compact-label">订单号</span>
                    <span class="compact-value">{{ record.orderNo || '-' }}</span>
                  </div>
                  <div class="compact-item">
                    <span class="compact-label">兑换模式</span>
                    <span class="compact-value">{{ getExchangeModeText(record.exchangeMode) }}</span>
                  </div>
                </div>
                <div class="compact-right">
                  <div class="compact-item">
                    <span class="compact-label">兑换类型</span>
                    <span class="compact-value type-value">{{ getExchangeTypeText(record.type) }}</span>
                  </div>
                  <div v-if="record.orderAmount" class="compact-item">
                    <span class="compact-label">订单金额</span>
                    <span class="compact-value amount-value">¥{{ record.orderAmount }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页组件 -->
        <div v-if="totalPages > 1" class="pagination-container">
          <div class="pagination-wrapper">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="records.length"
              :page-size="pageSize"
              v-model:current-page="currentPage"
              @current-change="goToPage"
              :pager-count="5"
              small
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { lotteryApi } from '../api/index.js'
import { userStore } from '../store/user.js'
import {
  ElPageHeader,
  ElCard,
  ElButton,
  ElIcon,
  ElResult,
  ElEmpty,
  ElTag,
  ElDescriptions,
  ElDescriptionsItem,
  ElPagination
} from 'element-plus'
import { ShoppingBag, Refresh } from '@element-plus/icons-vue'

export default {
  name: 'ExchangeRecords',
  components: {
    ElPageHeader,
    ElCard,
    ElButton,
    ElIcon,
    ElResult,
    ElEmpty,
    ElTag,
    ElDescriptions,
    ElDescriptionsItem,
    ElPagination,
    ShoppingBag,
    Refresh
  },
  data() {
    return {
      loading: false,
      errorMessage: '',
      records: [],
      // 分页相关
      currentPage: 1,
      pageSize: 5
    }
  },

  computed: {
    // 总页数
    totalPages() {
      return Math.ceil(this.records.length / this.pageSize)
    },

    // 当前页的记录
    paginatedRecords() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.records.slice(start, end)
    }
  },

  async mounted() {
    await this.loadExchangeRecords()
  },
  methods: {
    // 加载兑换记录
    async loadExchangeRecords() {
      const userId = userStore.getUserId()
      
      if (!userId) {
        this.errorMessage = '请先登录'
        return
      }

      this.loading = true
      this.errorMessage = ''
      
      try {
        const response = await lotteryApi.getExchangeRecordsByUserId(userId)
        
        if (response && response.success) {
          this.records = response.data || []
          // 按兑换时间倒序排列
          this.records.sort((a, b) => new Date(b.exchangeTime) - new Date(a.exchangeTime))
        } else {
          this.errorMessage = response?.message || '获取兑换记录失败'
        }
      } catch (error) {
        console.error('获取兑换记录失败:', error)
        this.errorMessage = error?.response?.data?.message || '网络连接失败，请稍后重试'
      } finally {
        this.loading = false
      }
    },

    // 获取状态样式类
    getStatusClass(isUse) {
      switch (isUse) {
        case 1:
          return 'success'
        case 0:
          return 'failure'
        default:
          return 'pending'
      }
    },

    // 获取状态文本
    getStatusText(isUse) {
      switch (isUse) {
        case 1:
          return '成功'
        case 0:
          return '失败'
        default:
          return '处理中'
      }
    },

    // 获取状态图标
    getStatusIcon(isUse) {
      switch (isUse) {
        case 1:
          return '✅'
        case 0:
          return '❌'
        default:
          return '⏳'
      }
    },

    // 获取兑换类型文本
    getExchangeTypeText(type) {
      switch (type) {
        case '月度会员':
          return '月度会员'
        case '年度会员':
          return '年度会员'
        default:
          return type || '未知类型'
      }
    },

    // 获取兑换模式文本
    getExchangeModeText(mode) {
      switch (mode) {
        case 1:
          return '兑换码兑换'
        case 2:
          return '在线支付'
        default:
          return mode || '未知模式'
      }
    },

    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '-'
      
      const date = new Date(dateStr)
      const formatted = date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
      return formatted.replace(/\//g, '-')
    },

    // 跳转到个人中心
    goToProfile() {
      this.$router.push('/profile')
    },

    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },

    // 跳转到指定页
    goToPage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page
      }
    }
  }
}
</script>

<style scoped>
/* 页面容器 */
.exchange-records-page {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f7fa 100%);
  min-height: 100vh;
  padding: 0;
}

/* 现代化页面头部 */
.page-header-modern {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  box-shadow: 0 8px 32px rgba(79, 172, 254, 0.3);
  position: relative;
  overflow: hidden;
}

.page-header-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><defs><linearGradient id="waveGrad" x1="0%25" y1="0%25" x2="100%25" y2="0%25"><stop offset="0%25" style="stop-color:rgba(255,255,255,0.1);stop-opacity:1" /><stop offset="50%25" style="stop-color:rgba(255,255,255,0.2);stop-opacity:1" /><stop offset="100%25" style="stop-color:rgba(255,255,255,0.1);stop-opacity:1" /></linearGradient></defs><path fill="url(%23waveGrad)" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,165.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path><circle cx="200" cy="60" r="4" fill="rgba(255,255,255,0.3)"><animate attributeName="cy" values="60;80;60" dur="3s" repeatCount="indefinite"/></circle><circle cx="400" cy="100" r="3" fill="rgba(255,255,255,0.25)"><animate attributeName="cy" values="100;120;100" dur="4s" repeatCount="indefinite"/></circle><circle cx="600" cy="70" r="5" fill="rgba(255,255,255,0.2)"><animate attributeName="cy" values="70;90;70" dur="3.5s" repeatCount="indefinite"/></circle><circle cx="800" cy="90" r="3.5" fill="rgba(255,255,255,0.3)"><animate attributeName="cy" values="90;110;90" dur="4.5s" repeatCount="indefinite"/></circle><circle cx="1000" cy="80" r="4" fill="rgba(255,255,255,0.25)"><animate attributeName="cy" values="80;100;80" dur="3.8s" repeatCount="indefinite"/></circle><circle cx="1200" cy="95" r="3" fill="rgba(255,255,255,0.2)"><animate attributeName="cy" values="95;115;95" dur="4.2s" repeatCount="indefinite"/></circle><g opacity="0.15"><rect x="100" y="40" width="60" height="60" fill="none" stroke="white" stroke-width="2" rx="8"><animateTransform attributeName="transform" type="rotate" from="0 130 70" to="360 130 70" dur="20s" repeatCount="indefinite"/></rect><circle cx="900" cy="50" r="25" fill="none" stroke="white" stroke-width="2"><animate attributeName="r" values="25;30;25" dur="3s" repeatCount="indefinite"/></circle><polygon points="1300,60 1320,100 1280,100" fill="none" stroke="white" stroke-width="2"><animateTransform attributeName="transform" type="rotate" from="0 1300 80" to="360 1300 80" dur="15s" repeatCount="indefinite"/></polygon></g></svg>') no-repeat center center;
  background-size: cover;
  pointer-events: none;
  opacity: 0.8;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.back-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-2px);
}

.back-icon {
  width: 20px;
  height: 20px;
  fill: white;
}

.header-info {
  display: flex;
  align-items: center;
  flex: 1;
  margin-left: 20px;
  gap: 16px;
}



.header-text {
  color: white;
}

.header-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 2px 0;
  letter-spacing: -0.5px;
}

.header-subtitle {
  font-size: 12px;
  opacity: 0.8;
  margin: 0;
}



/* 内容容器 */
.records-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px;
}

/* 加载状态 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #e1e8ed;
  border-left: 4px solid #4facfe;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.loading-text {
  color: #666;
  font-size: 16px;
  margin: 0;
}

/* 错误状态 */
.error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.error-content {
  text-align: center;
  max-width: 400px;
}

.error-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.error-title {
  font-size: 24px;
  color: #333;
  margin: 0 0 12px 0;
  font-weight: 600;
}

.error-message {
  color: #666;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 24px 0;
}

.retry-btn {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(79, 172, 254, 0.3);
}

.retry-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(79, 172, 254, 0.4);
}

/* 空状态 */
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.empty-content {
  text-align: center;
  max-width: 400px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.empty-title {
  font-size: 24px;
  color: #333;
  margin: 0 0 12px 0;
  font-weight: 600;
}

.empty-message {
  color: #666;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 24px 0;
}

.action-btn {
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn.primary {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  color: white;
  box-shadow: 0 4px 16px rgba(79, 172, 254, 0.3);
}

.action-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(79, 172, 254, 0.4);
}

/* 记录列表 */
.records-list {
  background: white;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.list-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 12px 24px 12px 24px;
  border-bottom: 1px solid #f0f0f0;
}



.record-count {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  color: white;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

/* 记录网格 */
.records-grid {
  padding: 16px 24px 24px 24px;
  display: grid;
  gap: 12px;
}

/* 现代化记录卡片 */
.record-card-modern {
  background: #fafbfc;
  border: 2px solid #f0f0f0;
  border-radius: 12px;
  padding: 14px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.record-card-modern::before {
  display: none;
}

.record-card-modern:hover {
  border-color: #e0e0e0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}



/* 记录头部 */
.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
}

.status-badge.success {
  background: linear-gradient(135deg, #10ac84, #00d2d3);
  color: white;
}

.status-badge.failure {
  background: linear-gradient(135deg, #ee5a24, #ff3742);
  color: white;
}

.status-badge.pending {
  background: linear-gradient(135deg, #ffeaa7, #fab1a0);
  color: #333;
}

.status-icon {
  font-size: 16px;
}

.record-date {
  font-size: 11px;
  color: #666;
  font-weight: 500;
}

/* 记录信息网格 */
.record-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.info-label {
  font-size: 11px;
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.info-value {
  font-size: 13px;
  color: #333;
  font-weight: 500;
}

.type-value {
  color: #4facfe;
  font-weight: 600;
}

.amount-value {
  color: #e74c3c;
  font-weight: 700;
  font-size: 14px;
}

/* 移动端紧凑布局 */
.record-info-compact {
  display: none; /* 默认隐藏，仅在移动端显示 */
}

.compact-left, .compact-right {
  flex: 1;
  min-width: 0; /* 允许flex项目收缩 */
}

.compact-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
  min-width: 0; /* 防止溢出 */
}

.compact-item:last-child {
  border-bottom: none;
}

.compact-label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
  line-height: 1.2;
}

.compact-value {
  font-size: 13px;
  color: #333;
  font-weight: 600;
  line-height: 1.3;
  word-break: break-all; /* 长文本换行 */
  overflow-wrap: break-word;
}

.compact-value.type-value {
  color: #4facfe;
}

.compact-value.amount-value {
  color: #e74c3c;
  font-weight: 700;
}

/* 分页容器 */
.pagination-container {
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
  background: #fafbfc;
}

.pagination-wrapper {
  display: flex;
  justify-content: center;
}

/* Element Plus 覆盖样式 */
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  border-color: #4facfe;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled):hover) {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    padding: 20px 16px;
  }
  
  .header-info {
    margin-left: 12px;
    gap: 12px;
  }
  
  .header-title {
    font-size: 20px;
  }
  
  .header-subtitle {
    font-size: 13px;
  }
  
  .records-container {
    padding: 24px 16px;
  }
  
  .list-header {
    padding: 10px 20px 10px 20px;
    flex-direction: row;
  }
  
  .records-grid {
    padding: 20px 20px 24px 20px;
    gap: 16px;
  }
  
  .record-info-grid {
    display: none; /* 移动端隐藏原始网格布局 */
  }
  
  /* 移动端显示紧凑布局 */
  .record-info-compact {
    display: flex !important;
    gap: 24px;
    margin-top: 12px;
  }
  
  .pagination-container {
    padding: 20px 16px;
  }
}

/* 中等屏幕尺寸额外优化 */
@media (max-width: 600px) {
  .record-info-grid {
    display: none; /* 在600px以下也隐藏原始网格 */
  }
  
  .record-info-compact {
    display: flex !important;
    gap: 20px;
    margin-top: 10px;
  }
}

@media (max-width: 480px) {
  .header-content {
    padding: 16px 12px;
  }
  
  .header-title {
    font-size: 18px;
  }
  
  .back-btn {
    width: 40px;
    height: 40px;
  }
  
  .back-icon {
    width: 20px;
    height: 20px;
  }
  
  .records-container {
    padding: 20px 12px;
  }
  
  .records-list {
    border-radius: 16px;
  }
  
  .list-header {
    padding: 8px 16px 8px 16px;
    flex-direction: row;
  }
  

  
  .record-count {
    font-size: 11px;
    padding: 4px 8px;
  }
  
  .records-grid {
    padding: 16px 16px 20px 16px;
  }
  
  .record-card-modern {
    padding: 14px;
  }
  
  /* 小屏幕进一步优化紧凑布局 */
  .record-info-compact {
    gap: 18px;
  }
  
  .compact-item {
    padding: 6px 0;
  }
  
  .compact-label {
    font-size: 11px;
  }
  
  .compact-value {
    font-size: 12px;
    line-height: 1.4;
  }
  
  /* 状态徽章和日期在小屏幕上调整 */
  .record-header {
    margin-bottom: 8px;
  }
  
  .status-badge {
    padding: 4px 10px;
    font-size: 12px;
  }
  
  .record-date {
    font-size: 12px;
  }
  
  .pagination-container {
    padding: 16px 12px;
  }
}
</style> 