<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 模拟的错误信息
const errorData = {
  subtitle: '很抱歉，您的预约未能成功提交',
  reason: '您选择的时间段已被其他用户抢先预约，请选择其他时间段。',
  solution: '建议您选择其他时间段或日期进行预约，或稍后再试。',
  contact: '如需帮助，请联系场馆管理处：0791-12345678'
}

// 暴露错误信息数据
const errorSubTitle = ref(errorData.subtitle)
const errorInfo = ref({
  reason: errorData.reason,
  solution: errorData.solution,
  contact: errorData.contact
})

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

// 修改预约信息
const retryBooking = () => {
  router.push('/booking')
}

// 返回首页
const goBack = () => {
  router.push('/')
}
</script>
<template>
  <div class="booking-error-container">
    <el-header class="header">
      <el-row justify="space-between" align="middle">
        <h2>校园 e 站通・华交场馆管控一体化平台</h2>
        <el-dropdown>
          <img
            class="user-avatar"
            src="https://cube.elemecdn.com/3/7c/3ea6beec24aa581799c9dec44b590jpeg.jpeg"
            alt="用户头像"
          />
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>我的订单</el-dropdown-item>
              <el-dropdown-item divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-row>
    </el-header>

    <el-main class="error-content">
      <el-result icon="error" title="预约失败" :sub-title="errorSubTitle">
        <template #extra>
          <el-button type="primary" @click="retryBooking"
            >修改预约信息</el-button
          >
          <el-button @click="goBack">返回首页</el-button>
        </template>
      </el-result>

      <el-card class="error-details" v-if="errorInfo">
        <template #header>
          <div class="card-header">
            <span>问题详情</span>
          </div>
        </template>
        <div class="detail-item">
          <span class="label">错误原因：</span>
          <span class="value">{{ errorInfo.reason }}</span>
        </div>
        <div class="detail-item" v-if="errorInfo.solution">
          <span class="label">解决建议：</span>
          <span class="value">{{ errorInfo.solution }}</span>
        </div>
        <div class="detail-item" v-if="errorInfo.contact">
          <span class="label">联系支持：</span>
          <span class="value">{{ errorInfo.contact }}</span>
        </div>
      </el-card>
    </el-main>
  </div>
</template>

<style scoped>
.booking-error-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

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

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

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

.error-details {
  max-width: 600px;
  width: 100%;
}

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

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

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

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