<template>
  <div class="base_error_page">
    <div class="base_error_container">
      <img
        :src="loadImageUrl"
        alt="errorPage.png"
        class="base_error_img"
      />
      <span class="error_title">{{ errorTitle }}</span>
      <span class="error_text">{{ errorText }}</span>
      <div class="btn_content">
        <el-button type="primary" size="small" v-if="type == 'network'" @click="reload">重新加载</el-button>
        <el-button :type="type == 'network' ? '' : 'primary'" size="small" @click="back">返回首页</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "fireflyErrorPage",
  props: {
    type: {
      type: String,
      default: '404'
    },
    // 是否是自定义返回首页
    customizeBack: {
      type: Boolean,
      default: false
    },
    // 是否定义刷新
    customizeReload: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      loadImageUrl: require('../../../image/fireflyErrorPage/404_new.png')
    }
  },

  watch: {
    type(newValue) {
      this.loadImageUrl = require(`../../../image/fireflyErrorPage/${newValue}_new.png`)
    }
  },

  computed: {
    errorTitle() {
      const errorTitleMessage = {
        'network': '网络异常',
        '403': '403 Forbidden',
        '404': '404 Not Fount',
        '500': '500 Internal Server Error'
      }
      return errorTitleMessage[this.type]
    },

    errorText() {
      const errorTextMessage = {
        'network': '当前网络异常，请稍后再试',
        '403': '抱歉，您无权限访问此页面，请联系创建者',
        '404': '抱歉，您访达的页面不存在',
        '500': '抱歉，服务器出错啦'
      }
      return errorTextMessage[this.type]
    }
  },

  methods: {
    reload() {
      if(!this.customizeReload) return window.location.reload()
      this.$emit('reload')
    },

    back() {
      if(!this.customizeBack) return window.location.href = '/'
      this.$emit('back')
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../css/fireflyErrorPage.scss";
</style>
