<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useInfoStore } from '@/stores'
import { toTimestamp } from '@/utils/format'
import BaseLayout from '@/components/BaseLayout.vue'
const infoStore = useInfoStore()
// 预约数据
const bookingInfo = ref({ ...infoStore.responseInfo })
// 订单数据
const payment = ref({ ...infoStore.paymentInfo })
console.log('payment', payment.value)
console.log('bookingInfo', bookingInfo.value)

// 路由对象
const router = useRouter()

// 查看订单详情
const viewOrder = () => {}
</script>

<template>
  <BaseLayout>
    <div class="booking-result-container">
      <el-main class="result-content">
        <el-result
          icon="success"
          title="预约成功！"
          sub-title="您的预约信息已确认，我们期待您的光临"
        >
          <template #extra>
            <el-button type="primary" @click="router.push('/mobile/index')"
              >返回首页</el-button
            >
            <el-button @click="viewOrder">查看预约记录</el-button>
          </template>
        </el-result>

        <el-row class="details-container" gutter="20">
          <!-- 左侧：预约详情 -->
          <el-col :span="12">
            <el-card class="details-card">
              <template #header>
                <div class="card-header">
                  <span>预约详情</span>
                </div>
              </template>
              <div class="detail-item">
                <span class="label">用户：</span>
                <span class="value">{{ bookingInfo.user }} </span>
              </div>
              <div class="detail-item">
                <span class="label">场馆：</span>
                <span class="value">{{ bookingInfo.venue }}</span>
              </div>
              <div class="detail-item">
                <span class="label">场地：</span>
                <span class="value">{{ bookingInfo.site }}</span>
              </div>
              <div class="detail-item">
                <span class="label">预约日期：</span>
                <span class="value">{{ bookingInfo.date }}</span>
              </div>
              <div class="detail-item">
                <span class="label">预约时间段：</span>
                <span class="value">{{ bookingInfo.timeSlots }}</span>
              </div>
              <div class="detail-item">
                <span class="label">预约时长：</span>
                <span class="value">{{ bookingInfo.cost }} 小时</span>
              </div>
            </el-card>
          </el-col>

          <!-- 右侧：订单详情 -->
          <el-col :span="12">
            <el-card class="details-card">
              <template #header>
                <div class="card-header">
                  <span>订单详情</span>
                </div>
              </template>
              <div class="detail-item">
                <span class="label">订单号：</span>
                <span class="value"
                  >{{ toTimestamp(payment.time) }} - {{ payment.id }}</span
                >
              </div>
              <div class="detail-item">
                <span class="label">预约费用：</span>
                <span class="value">{{ payment.amount }} 元</span>
              </div>
              <div class="detail-item">
                <span class="label">支付状态：</span>
                <span class="value status paid">已支付</span>
              </div>
              <div class="detail-item">
                <span class="label">订单创建时间：</span>
                <span class="value">{{ payment.time }}</span>
              </div>
              <div class="detail-item">
                <span class="label">预约状态：</span>
                <span class="value status confirmed">余额支付</span>
              </div>
              <div class="detail-item">
                <span class="label">备注：</span>
                <span class="value">至多只能提前15分钟到达场馆签到</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </div>
  </BaseLayout>
</template>
<style scoped>
.booking-result-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

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

.result-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}

.el-result {
  margin-bottom: 30px;
  width: 100%;
}

.details-container {
  width: 100%;
  margin-top: 20px;
}

.details-card {
  height: 100%;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding: 10px 0;
  border-bottom: 1px dashed #ebeef5;
}

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

.detail-item .label {
  color: #909399;
  width: 120px;
  flex-shrink: 0;
}

.detail-item .value {
  color: #303133;
  font-weight: 500;
}

.status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px;
}

.status.paid {
  background-color: #f0f9eb;
  color: #67c23a;
}

.status.confirmed {
  background-color: #e8f4fc;
  color: #1890ff;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}
</style>
