<template>
  <div class="el-bio-error">
    <div class="box" v-if="code === '401'">
      <img src="../../../bioImages/401.png" class="png" alt="">
      <h1>{{ t('bio.bioError.m1') }}</h1>
      <el-button class="btn" round @click="back">
        {{ t('bio.bioError.back') }}
      </el-button>
    </div>

    <div class="box" v-else-if="code === '404'">
      <img class="pic-404__parent" src="../../../bioImages/404.png" alt="">

      <h1>{{ t('bio.bioError.m2') }}</h1>
      <p>{{ t('bio.bioError.m3') }}</p>
      <el-button class="btn" round @click="home">
        {{ t('bio.bioError.backHome') }}
      </el-button>
    </div>

    <div class="box" v-else-if="code === 'testAuthority'">
      <img class="pic-404__parent" src="../../../bioImages/401.png" alt="">

      <p class="mt-15">{{ t('bio.bioError.m4') }}</p>
    </div>

    <div class="box" v-else-if="code === '500'">
      <img class="pic-404__parent" src="../../../bioImages/401.png" alt="">

      <p class="mt-15">{{ msgShow }}</p>
    </div>
  </div>
</template>

<script>
import Locale from 'bio-ui-vue2/src/mixins/locale';

export default {
  name: 'BioError',
  props: {
    code: {
      type: String,
      default: '401'
    }
  },
  mixins: [Locale],

  data() {
    return {
      errorMsg: {
        '600': this.t('bio.bioError.logout600'),
        '601': this.t('bio.bioError.logout601'),
        '602': this.t('bio.bioError.logout602')
      },

      msgShow: ''
    };
  },

  created() {
    const code = this.$route.query.code;
    if (code && this.errorMsg[code]) this.msgShow = this.errorMsg[code];
  },

  methods: {
    back() {
      this.$emit('back');
    },

    home() {
      this.$emit('home');
    }
  }
};
</script>
