<template>
  <div class="error">
    <div v-if="statusCode === 404" class="error__lost"></div>
    <div v-else class="error__other">
      <span>{{ errorMessage }}</span>
    </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 +this.error?.statusCode || 0
    },
    errorMessage() {
      return this.error?.message || '发生了一些不可预知的错误'
    }
  },
  mounted() {
    // console.log(this.error)
    this.setTitle(this.statusCode)
  },
  methods: {
    setTitle(type) {
      if (process.client) {
        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>
