<template>
  <div class="error-page">
    <div class="error-container">
      <div class="error-icon">
        <el-icon :size="80" color="#F56C6C">
          <WarningFilled />
        </el-icon>
      </div>
      <h1 class="error-title">{{ title }}</h1>
      <p class="error-message">{{ message }}</p>
      <div class="error-actions">
        <el-button type="primary" @click="goHome">返回首页</el-button>
        <el-button @click="refresh">刷新页面</el-button>
        <el-button v-if="showDetails" @click="toggleDetails">
          {{ showErrorDetails ? '隐藏详情' : '显示详情' }}
        </el-button>
      </div>
      <div v-if="showErrorDetails && errorDetails" class="error-details">
        <el-collapse>
          <el-collapse-item title="错误详情" name="details">
            <pre>{{ errorDetails }}</pre>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { WarningFilled } from '@element-plus/icons-vue'

const props = defineProps({
  errorCode: {
    type: Number,
    default: 500
  },
  errorMessage: {
    type: String,
    default: '服务器错误'
  },
  errorDetails: {
    type: String,
    default: ''
  }
})

const router = useRouter()
const showErrorDetails = ref(false)

const title = computed(() => {
  switch (props.errorCode) {
    case 404:
      return '页面未找到'
    case 403:
      return '访问被拒绝'
    case 500:
      return '服务器错误'
    default:
      return '发生错误'
  }
})

const message = computed(() => {
  if (props.errorMessage) {
    return props.errorMessage
  }
  
  switch (props.errorCode) {
    case 404:
      return '抱歉，您访问的页面不存在或已被移除'
    case 403:
      return '抱歉，您没有权限访问此页面'
    case 500:
      return '抱歉，服务器遇到了问题，请稍后再试'
    default:
      return '抱歉，应用遇到了未知错误'
  }
})

const showDetails = computed(() => {
  return props.errorDetails && process.env.NODE_ENV === 'development'
})

const goHome = () => {
  router.push('/')
}

const refresh = () => {
  window.location.reload()
}

const toggleDetails = () => {
  showErrorDetails.value = !showErrorDetails.value
}
</script>

<style scoped>
.error-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

.error-container {
  text-align: center;
  max-width: 600px;
  background-color: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.error-icon {
  margin-bottom: 20px;
}

.error-title {
  font-size: 28px;
  color: #303133;
  margin-bottom: 16px;
}

.error-message {
  font-size: 16px;
  color: #606266;
  margin-bottom: 30px;
  line-height: 1.6;
}

.error-actions {
  margin-bottom: 20px;
}

.error-actions .el-button {
  margin: 0 10px 10px 0;
}

.error-details {
  margin-top: 20px;
  text-align: left;
}

.error-details pre {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: #606266;
  overflow-x: auto;
  max-height: 300px;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .error-container {
    padding: 20px;
  }
  
  .error-title {
    font-size: 24px;
  }
  
  .error-message {
    font-size: 14px;
  }
  
  .error-actions .el-button {
    margin: 0 5px 10px 0;
  }
}
</style>