<template>
  <el-main class="error-page !flex flex-col justify-center items-center">
    <div class="error-page__reason">{{ descriptionMap[type] }}</div>
    <div class="flex">
      <router-link custom v-slot="{ navigate }" to="/">
        <el-button type="primary" @click="$router.back()">返回上页</el-button>
        <el-button type="primary" @click="navigate">返回首页</el-button>
      </router-link>
    </div>
  </el-main>
</template>

<style lang="scss" scoped>
.error-page {
  gap: 10px;
  &__reason {
    font-size: 30px;
    font-weight: bold;
  }
}
</style>
<script lang="ts">
export enum PageErrorType {
  NOT_FOUND,
  NETWORK_ERROR,
  NO_PERMISSION,
  NOT_LOGIN,
}
</script>
<script lang="ts" setup>
export type PageErrorReason = {
  type: PageErrorType;
};
const descriptionMap: Record<PageErrorType, string> = {
  [PageErrorType.NOT_FOUND]: '页面找不到了',
  [PageErrorType.NETWORK_ERROR]: '网络错误',
  [PageErrorType.NO_PERMISSION]: '没有权限',
  [PageErrorType.NOT_LOGIN]: '你需要登录才能访问此页面',
};
defineProps<PageErrorReason>();
</script>
