<script setup>
import { ref } from 'vue'
import { recordQueryService } from '@/api/reservation'
import BaseLayout from '@/components/BaseLayout.vue'
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const userInfo = ref({ ...userStore.user })
// 模拟后端数据
const bookingRecords = ref([])

// 状态映射
const statusText = {
  '-2': '已过期',
  '-1': '已取消',
  1: '待签到',
  2: '已签到'
}

const statusTagType = {
  '-2': 'danger',
  '-1': 'warning',
  1: 'info',
  2: 'success'
}

// 获取状态文本
const getStatusText = (status) => {
  return statusText[String(status)] || '未知状态'
}

// 获取状态标签类型
const getStatusTagType = (status) => {
  return statusTagType[String(status)] || 'info'
}

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const totalRecords = ref(bookingRecords.value.length)

// 加载预约记录
const loading = ref(false)
const getBookingRecords = async () => {
  loading.value = true
  const {
    data: { data }
  } = await recordQueryService({
    current: currentPage.value,
    size: pageSize.value,
    userId: userInfo.value.id,
    status: 0
  })
  bookingRecords.value = data.list
  totalRecords.value = data.total
  loading.value = false
}
getBookingRecords()
// 详情弹窗相关
const detailDialogVisible = ref(false)
const reserveDetail = ref(null)

const viewDetails = (record) => {
  reserveDetail.value = record
  detailDialogVisible.value = true
}
</script>
<template>
  <BaseLayout>
    <div class="booking-records-container">
      <el-main class="records-content">
        <div class="page-header">
          <h3>我的预约记录</h3>
        </div>

        <el-table
          :data="bookingRecords"
          style="width: 100%"
          border
          v-loading="loading"
        >
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="dateStr" label="预约日期" width="120" />
          <el-table-column prop="venueName" label="场馆名称" width="150" />
          <el-table-column prop="type" label="场地类型" width="120" />
          <el-table-column prop="timeStr" label="预约时间" width="150" />
          <el-table-column prop="price" label="费用(元)" width="100" />
          <el-table-column label="状态" width="120">
            <template #default="scope">
              <el-tag :type="getStatusTagType(scope.row.status)">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                @click="viewDetails(scope.row)"
                >查看详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          layout="prev, pager, next"
          :total="totalRecords"
          :page-size="pageSize"
          v-model:current-page="currentPage"
          @current-change="handlePageChange"
        />
      </el-main>

      <!-- 预约详情弹窗 -->
      <el-dialog v-model="detailDialogVisible" title="预约详情" width="600px">
        <div v-if="reserveDetail">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="预约编号">{{
              reserveDetail.reservationId
            }}</el-descriptions-item>
            <el-descriptions-item label="场馆名称">{{
              reserveDetail.venueName
            }}</el-descriptions-item>
            <el-descriptions-item label="场地类型">{{
              reserveDetail.type
            }}</el-descriptions-item>
            <el-descriptions-item label="预约日期">{{
              reserveDetail.dateStr
            }}</el-descriptions-item>
            <el-descriptions-item label="预约时间">{{
              reserveDetail.timeStr
            }}</el-descriptions-item>
            <el-descriptions-item label="预约金额"
              >{{ reserveDetail.price }} 元</el-descriptions-item
            >
            <el-descriptions-item label="支付单号">{{
              reserveDetail.payStr
            }}</el-descriptions-item>
            <el-descriptions-item label="支付时间">{{
              reserveDetail.payDate
            }}</el-descriptions-item>
            <el-descriptions-item label="预约状态">
              <el-tag :type="getStatusTagType(reserveDetail.status)">
                {{ getStatusText(reserveDetail.status) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="备注"
              >请提前15分钟到达场馆签到</el-descriptions-item
            >
          </el-descriptions>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="detailDialogVisible = false">关闭</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </BaseLayout>
</template>
<style scoped>
.booking-records-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.records-content {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-table {
  margin-bottom: 20px;
}

.el-pagination {
  display: flex;
  justify-content: center;
}
</style>
