<template>
  <div class="error">
    <template v-if="error === '403'">
      <span class="code-403">403</span>
      <img
        src="~@/assets/error-icons/403.svg"
        alt=""
        class="error-img"
      >
      <h2 class="title">您无权访问此页面</h2>
    </template>
    <template v-else-if="error === '500'">
      <img
        src="~@/assets/error-icons/500.svg"
        alt=""
        class="error-img"
      >
      <h2 class="title">服务器出错了</h2>
    </template>
    <template v-else-if="error === '404'">
      <img
        src="~@/assets/error-icons/404.svg"
        alt=""
        class="error-img"
      >
      <h2 class="title">您访问的页面不存在</h2>
    </template>

    <router-link to="/">
      <el-button type="primary">返回首页</el-button>
    </router-link>

  </div>
</template>

<script>
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
  props: ["error"],
  setup({ error }) {
    const store = useStore();
    const router = useRouter();
    if (!!store.state.account.userinfo) {
      router.replace(`/error/${error}`);
    }
  },
});
</script>


<style lang="scss" scoped>
.error {
  position: relative;
  text-align: center;
  padding-top: 48px;
  .code-403 {
    position: absolute;
    font-size: 50px;
    top: 148px;
    left: 50%;
    transform: translateX(32px);
    font-family: arial;
    color: #ee5c42;
  }
  .error-img {
    width: 320px;
    pointer-events: none;
  }
  .title {
    font-size: 20px;
    margin: 32px 0;
  }
}
</style>