<template>
  <div class="prize-statistics">
    <el-card class="filter-card">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="用户ID">
          <el-input v-model="queryForm.userId" placeholder="请输入用户ID" clearable @input="handleInputChange" />
        </el-form-item>
        <el-form-item label="奖项等级">
          <div class="custom-select-wrapper">
            <select v-model="queryForm.prizeGrade" class="custom-select" @change="handleSelectChange">
              <option value="">全部奖项</option>
              <option value="一等奖">一等奖</option>
              <option value="二等奖">二等奖</option>
              <option value="三等奖">三等奖</option>
              <option value="四等奖">四等奖</option>
              <option value="五等奖">五等奖</option>
              <option value="六等奖">六等奖</option>
            </select>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="table-card">
      <el-table :data="tableData" style="width: 100%" v-loading="loading" border stripe>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="userId" label="用户ID" width="180" />
        <el-table-column prop="drawId" label="期号" width="100" />
        <el-table-column label="红球" min-width="200">
          <template #default="scope">
            <div class="ball-container">
              <span class="red-ball">{{ scope.row.redBall1 }}</span>
              <span class="red-ball">{{ scope.row.redBall2 }}</span>
              <span class="red-ball">{{ scope.row.redBall3 }}</span>
              <span class="red-ball">{{ scope.row.redBall4 }}</span>
              <span class="red-ball">{{ scope.row.redBall5 }}</span>
              <span class="red-ball">{{ scope.row.redBall6 }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="蓝球" width="80">
          <template #default="scope">
            <span class="blue-ball">{{ scope.row.blueBall }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="predictResult" label="中奖等级" width="120">
           <template #default="scope">
            <el-tag :type="getPredictResultType(scope.row.predictResult)">{{ scope.row.predictResult }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="bonus" label="奖金" width="120">
          <template #default="scope">
            <span style="color: #f56c6c; font-weight: bold;">{{ scope.row.bonus > 0 ? `¥${scope.row.bonus}` : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="predictTime" label="推测时间" width="180">
          <template #default="scope">
            {{ formatDate(scope.row.predictTime) }}
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { lotteryApi } from '../../api/index.js'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'

const route = useRoute()
const loading = ref(false)
const tableData = ref([])
let searchTimer = null

const queryForm = reactive({
  userId: '',
  prizeGrade: ''
})

const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

const getPredictResultType = (result) => {
  if (result === '未中奖') return 'info'
  if (result === '待开奖') return 'warning'
  return 'success'
}

const formatDate = (timestamp) => {
  if (!timestamp) return '-'
  const date = new Date(timestamp)
  return date.toLocaleString()
}

const loadData = async () => {
  loading.value = true
  try {
    const params = {
      userId: queryForm.userId,
      prizeGrade: queryForm.prizeGrade,
      current: pagination.currentPage,
      pageSize: pagination.pageSize
    }
    const res = await lotteryApi.getAdminPrizeStatistics(params)
    if (res.success) {
      tableData.value = res.data.records
      pagination.total = res.data.total
    } else {
      ElMessage.error(res.message || '获取数据失败')
    }
  } catch (error) {
    console.error('获取奖金统计失败:', error)
    ElMessage.error('获取数据失败')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  pagination.currentPage = 1
  loadData()
}

const resetQuery = () => {
  queryForm.userId = ''
  queryForm.prizeGrade = ''
  handleSearch()
}

const handleSizeChange = (val) => {
  pagination.pageSize = val
  loadData()
}

const handleCurrentChange = (val) => {
  pagination.currentPage = val
  loadData()
}

// 输入框变化时防抖搜索
const handleInputChange = () => {
  if (searchTimer) {
    clearTimeout(searchTimer)
  }
  searchTimer = setTimeout(() => {
    pagination.currentPage = 1
    loadData()
  }, 500) // 500ms 防抖
}

// 筛选框变化时立即搜索
const handleSelectChange = () => {
  pagination.currentPage = 1
  loadData()
}

onMounted(() => {
  if (route.query.userId) {
    queryForm.userId = route.query.userId
  }
  loadData()
})
</script>

<style scoped>
.prize-statistics {
  padding: 20px;
}
.filter-card {
  margin-bottom: 20px;
}
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.ball-container {
  display: flex;
  gap: 5px;
}
.red-ball {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background-color: #f56c6c;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
}
.blue-ball {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background-color: #409eff;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
}

/* 自定义下拉框样式 */
.custom-select-wrapper {
  position: relative;
  display: inline-block;
}

.custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23606266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  outline: none;
  padding: 0 30px 0 15px;
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  width: 180px;
  cursor: pointer;
}

.custom-select:hover {
  border-color: #c0c4cc;
}

.custom-select:focus {
  border-color: #409eff;
}

.custom-select option {
  padding: 5px;
  color: #606266;
  background-color: #fff;
}
</style>
