<template>
  <div class="error">
    <div class="error__lost"></div>
  </div>
</template>

<script>
export default {
  // you can set a custom layout for the error page
  layout: 'error',
  props: {
    error: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    statusCode() {
      return Number(this.error?.statusCode) || 0
    },
    errorMessage() {
      return this.error?.message || '发生了一些不可预知的错误'
    }
  },
  mounted() {
    // console.log(this.error)
    this.setTitle(404)
  },
  methods: {
    setTitle(type) {
      switch (type) {
        case 404:
          document.title = '抱歉，您的页面迷路了!'
          break
        default:
          document.title = this.errorMessage
          break
      }
    }
  }
}
</script>
<style lang="less" scoped>
.error {
  width: 100%;
  height: 100%;
  &__lost {
    width: 100%;
    height: 100vh;
    background: url('~@/assets/images/404.png') no-repeat;
    background-size: cover;
    background-position: center;
  }
  &__other {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    font-size: 24px;
    color: #666;
    padding: 10px;
    text-align: center;
  }
}
</style>
