<template>
  <div class="predict-records-page">
    <!-- 页面头部 -->
    <el-page-header @back="goBack" class="page-header">
      <template #title>
        返回
      </template>
      <template #content>
        <div class="header-content">
          <el-icon :size="24" style="margin-right: 8px;"><Tickets /></el-icon>
          <span class="header-title">推测记录</span>
        </div>
      </template>
    </el-page-header>

    <!-- 状态筛选 -->
    <div class="filter-container">
      <el-radio-group v-model="currentFilter" @change="handleFilterChange">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="待开奖">待开奖</el-radio-button>
        <el-radio-button label="已中奖">已中奖</el-radio-button>
        <el-radio-button label="未中奖">未中奖</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 主要内容 -->
    <div class="records-container" v-loading="loading" element-loading-text="正在加载记录...">
      <!-- 空状态 -->
      <el-empty v-if="!loading && records.length === 0" :description="getEmptyStateMessage()">
        <el-button type="primary" @click="$router.push('/')">开始推测</el-button>
      </el-empty>

      <!-- 记录列表 -->
      <div v-else class="records-grid">
        <el-card 
          v-for="record in records" 
          :key="record.id"
          class="record-card"
          shadow="hover"
        >
          <template #header>
            <div class="record-card-header">
              <span class="draw-info">第{{ record.drawId }}期</span>
              <el-tag :type="getStatusClass(record.predictStatus)" effect="dark" size="small">
                {{ record.predictStatus }}
              </el-tag>
            </div>
          </template>
          
          <div class="record-body">
            <div class="predicted-numbers">
              <div class="balls-display">
                <div class="red-balls">
                  <span class="ball ball-red">{{ formatNumber(record.redBall1) }}</span>
                  <span class="ball ball-red">{{ formatNumber(record.redBall2) }}</span>
                  <span class="ball ball-red">{{ formatNumber(record.redBall3) }}</span>
                  <span class="ball ball-red">{{ formatNumber(record.redBall4) }}</span>
                  <span class="ball ball-red">{{ formatNumber(record.redBall5) }}</span>
                  <span class="ball ball-red">{{ formatNumber(record.redBall6) }}</span>
                </div>
                <div class="separator">+</div>
                <div class="blue-ball">
                  <span class="ball ball-blue">{{ formatNumber(record.blueBall) }}</span>
                </div>
              </div>
            </div>

            <el-descriptions :column="1" border size="small" class="record-details">
              <el-descriptions-item label="推测时间">{{ formatDateTime(record.predictTime) }}</el-descriptions-item>
              <el-descriptions-item label="推测结果">
                <span class="result-text" :class="getResultClass(record.predictResult)">
                  {{ record.predictResult }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item v-if="record.predictStatus !== '待开奖'" label="奖金">
                <span class="bonus-amount" :class="{ 'zero-bonus': record.bonus === 0 }">
                  {{ isHighPrize(record.predictResult) ? '约' : '' }}¥{{ record.bonus || 0 }}
                </span>
              </el-descriptions-item>
            </el-descriptions>
            <div v-if="isHighPrize(record.predictResult)" class="prize-note">
              一、二等奖奖金随机浮动，请以官方为准
            </div>
          </div>
        </el-card>
      </div>

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

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

export default {
  name: 'PredictRecords',
  components: {
    ElPageHeader,
    ElCard,
    ElButton,
    ElIcon,
    ElEmpty,
    ElTag,
    ElRadioGroup,
    ElRadioButton,
    ElPagination,
    ElDescriptions,
    ElDescriptionsItem,
    Tickets
  },
  data() {
    return {
      loading: false,
      records: [],
      currentPage: 1,
      totalPages: 0,
      total: 0,
      pageSize: 10,
      hasNext: false,
      hasPrevious: false,
      currentFilter: 'all'
    }
  },
  async mounted() {
    await this.loadPredictRecords()
  },
  methods: {
    async loadPredictRecords(page = 1) {
      this.loading = true
      try {
        const userId = userStore.user?.id
        if (!userId) {
          this.$router.push('/login')
          return
        }

        let response
        if (this.currentFilter === 'all') {
          response = await lotteryApi.getPredictRecordsByUserId(Number(userId), page, this.pageSize)
        } else {
          response = await lotteryApi.queryPredictRecords(Number(userId), this.currentFilter, page, this.pageSize)
        }
        
        if (response.success === true) {
          const pageData = response.data
          this.records = pageData.records || []
          this.currentPage = pageData.page || 1
          this.totalPages = pageData.totalPages || 0
          this.total = pageData.total || 0
          this.pageSize = pageData.size || this.pageSize
          this.hasNext = pageData.hasNext || false
          this.hasPrevious = pageData.hasPrevious || false
        } else {
          this.$message.error('获取推测记录失败：' + response.message)
        }
      } catch (error) {
        this.$message.error('获取推测记录失败，请重试')
      } finally {
        this.loading = false
      }
    },

    formatDate(dateString) {
      if (!dateString) return ''
      return new Date(dateString).toLocaleDateString('zh-CN')
    },

    formatDateTime(dateString) {
      if (!dateString) return ''
      return new Date(dateString).toLocaleString('zh-CN')
    },

    formatNumber(num) {
      return String(num).padStart(2, '0')
    },

    getStatusClass(status) {
      switch (status) {
        case '待开奖': return 'warning'
        case '已中奖': return 'success'
        case '未中奖': return 'danger'
        default: return 'info'
      }
    },

    getResultClass(result) {
      if (result && result.includes('中奖')) {
        return 'result-won'
      } else if (result === '待开奖') {
        return 'result-pending'
      } else {
        return 'result-lost'
      }
    },

    async handlePageChange(page) {
      await this.loadPredictRecords(page)
    },
    
    isHighPrize(result) {
        return result && (result.includes('一等奖') || result.includes('二等奖'));
    },

    getEmptyStateMessage() {
      const filterMap = {
        '待开奖': '待开奖',
        '已中奖': '已中奖',
        '未中奖': '未中奖'
      }
      const state = filterMap[this.currentFilter]
      return state ? `您还没有${state}的推测记录` : '您还没有创建任何推测记录'
    },

    handleFilterChange() {
      this.currentPage = 1
      this.loadPredictRecords()
    },

    goBack() {
        this.$router.go(-1);
    }
  }
}
</script>

<style scoped>
.predict-records-page {
  background-color: #f0f2f5;
  padding: 20px;
  min-height: calc(100vh - 70px);
}

.page-header {
  background: linear-gradient(135deg, #3a7bd5, #00d2ff);
  padding: 30px 24px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

:deep(.el-page-header__back .el-icon),
:deep(.el-page-header__back .el-page-header__title) {
  color: white;
}

.header-content {
  display: flex;
  align-items: center;
  color: white;
}

.header-title {
  font-size: 20px;
  font-weight: 600;
}

.filter-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.records-container {
  max-width: 800px;
  margin: 0 auto;
}

.records-grid {
  display: grid;
  gap: 16px;
}

.record-card {
  border-radius: 8px;
}

.record-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.draw-info {
  font-weight: 600;
}

.predicted-numbers {
  margin-bottom: 16px;
}

.balls-display {
  display: flex;
  align-items: center;
  gap: 10px;
}

.red-balls {
  display: flex;
  gap: 5px;
}

.ball {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  color: white;
}

.ball-red {
  background: linear-gradient(135deg, #e53e3e, #ff6b6b);
}

.ball-blue {
  background: linear-gradient(135deg, #2196f3, #64b5f6);
}

.separator {
  color: #999;
  font-weight: bold;
  font-size: 16px;
}

.result-text {
  font-weight: 600;
}

.result-won { color: #67C23A; }
.result-pending { color: #E6A23C; }
.result-lost { color: #F56C6C; }

.bonus-amount {
  font-weight: 600;
  color: #F56C6C;
}

.bonus-amount.zero-bonus {
  color: #909399;
}

.prize-note {
  margin-top: 8px;
  font-size: 12px;
  color: #E6A23C;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
</style> 