<template>
  <div class="reset-result">
    <div v-if="result === 'NetworkError'">
      <div class="result-text">服务器异常，请重试</div>
      <img :src="require('@/assets/img/reset-network-error.svg')" alt="network-error" class="result-ico">
      <el-button type="primary" class="result-btn" @click="toReset">重试</el-button>
    </div>
    <div v-if="result === 'success'">
      <div class="result-text">恭喜，重置密码成功</div>
      <img :src="require('@/assets/img/reset-success.svg')" alt="success" class="result-ico">
      <el-button type="primary" class="result-btn" @click="toLogin">去登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResetResult',
  props: {
    result: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
    }
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    toReset() {
      location.reload()
    },
    toLogin() {
      this.$router.push({ name: 'Login' })
    }
  }
}
</script>

<style lang="scss">
.reset-result {
  text-align: center;
  padding-top: 140px;
  .result-text {
    height: 28px;
    font-size: 20px;
    font-weight: 600;
    color: #212026;
    line-height: 28px;
    margin-bottom: 48px;
  }
  .result-ico {
    width: 72px;
    height: 72px;
    margin: 0 auto 156px;
    display: block;
  }
  .result-btn {
    width: 286px;
    height: 44px;
    background: #3269FF;
    border-radius: 4px;
    font-size: 16px;
  }
}

</style>
