<template>
  <div class="sessions-page">
    <h2 class="page-title">游戏记录</h2>
    <el-card>
      <el-form inline class="filter-form">
        <el-form-item label="房间号">
          <el-input v-model="filter.roomId" placeholder="房间号" clearable style="width: 140px" />
        </el-form-item>
        <el-form-item label="日期范围">
          <el-date-picker
            v-model="filter.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始"
            end-placeholder="结束"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="分数区间">
          <el-input-number v-model="filter.scoreMin" :min="0" placeholder="最小" style="width: 100px" />
          <span class="sep">-</span>
          <el-input-number v-model="filter.scoreMax" :min="0" placeholder="最大" style="width: 100px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="search">搜索</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="sessionsStore.list" stripe v-loading="loading">
        <el-table-column prop="roomId" label="房间号" width="120" />
        <el-table-column prop="score" label="得分" width="100" />
        <el-table-column prop="duration" label="时长(秒)" width="100">
          <template #default="{ row }">
            {{ row.duration != null ? row.duration : '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="startedAt" label="开始时间" min-width="160">
          <template #default="{ row }">
            {{ formatDateTime(row.startedAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="endedAt" label="结束时间" min-width="160">
          <template #default="{ row }">
            {{ formatDateTime(row.endedAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template #default="{ row }">
            <StatusTag :status="row.status" />
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无游戏记录" />
        </template>
      </el-table>
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.pageSize"
        :total="sessionsStore.total"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next"
        class="pagination"
        @current-change="search"
        @size-change="onSizeChange"
      />
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useSessionsStore } from '../stores/sessions'
import StatusTag from '../components/common/StatusTag.vue'
import { formatDateTime } from '../utils/format'

const sessionsStore = useSessionsStore()
const loading = ref(false)
const filter = reactive({
  roomId: '',
  dateRange: null,
  scoreMin: null,
  scoreMax: null,
})
const pagination = ref({
  page: 1,
  pageSize: 10,
})

function buildParams() {
  const range = filter.dateRange
  const start = Array.isArray(range) ? range[0] : null
  const end = Array.isArray(range) ? range[1] : null
  return {
    page: pagination.value.page,
    pageSize: pagination.value.pageSize,
    roomId: filter.roomId?.trim() || undefined,
    startDate: start || undefined,
    endDate: end || undefined,
    scoreMin: filter.scoreMin != null && filter.scoreMin !== '' ? filter.scoreMin : undefined,
    scoreMax: filter.scoreMax != null && filter.scoreMax !== '' ? filter.scoreMax : undefined,
  }
}

async function search() {
  loading.value = true
  try {
    await sessionsStore.fetchSessions(buildParams())
  } finally {
    loading.value = false
  }
}

function onSizeChange() {
  pagination.value.page = 1
  search()
}

function resetFilter() {
  filter.roomId = ''
  filter.dateRange = null
  filter.scoreMin = null
  filter.scoreMax = null
  pagination.value.page = 1
  search()
}

onMounted(() => {
  search()
})
</script>

<style scoped>
.page-title {
  margin-bottom: 20px;
  font-size: 20px;
}
.filter-form {
  margin-bottom: 16px;
}
.sep {
  margin: 0 8px;
}
.pagination {
  margin-top: 16px;
  justify-content: flex-end;
}
</style>
