<!--
  @description:完成注册登录
  @Modifier:徐媛媛
  @routerPath:/register/registerFinishReg
  @date:2020/8/3-19：34
-->
<template>
  <div class="registerFinishReg">
    <div class="registerFinishReg-content">
      <div style="margin-top:calc((530px - 52px - 347px) / 2)">
        <div class="colorOrange">
          <i class="el-icon-success registerFinishReg-icon" />
          <p style="margin:24px 0px" class="success">
            恭喜您，注册成功！
          </p>
        </div>
        <div class="info">
          <table class="tableData">
            <tr>
              <td>用户名</td>
              <td>{{ registerData.certificateCode }}</td>
            </tr>
            <tr>
              <td>密码</td>
              <td>{{ passwordSee }}</td>
            </tr>
          </table>
        </div>
        <div class="colorOrange">
          <p style="margin:24px 0px">
            请妥善保管!
          </p>
          <p v-if="count">
            <span>{{ count }}</span>秒后自动登入系统
          </p>
        </div>
      </div>
    </div>
    <div class="no_wrap">
      <el-button :loading="loading" type="primary" @click="getToken">
        登录系统继续完善注册信息
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ExpertRegisterFinishReg',
  data() {
    return {
      loading: false, // 登录按钮Loading
      count: 3, // 自动登录倒计时 3秒
      setInterval: '', // 定时器-自动登录倒计时
      iconPassWordYanjing: true, // 密码展示状态
      registerData: {}, // 注册信息
      passwordSee: '', // 查看中的密码
      password: ''
    }
  },
  watch: {
    // 监听-密码展示状态
    iconPassWordYanjing(val) {
      if (val) { // 展示
        this.passwordSee = this.password// 页面展示的密码
      } else { // 隐藏
        this.passwordSee = this.password.replace(/./g, '*')// 页面展示的密码
      }
    }
  },
  mounted() {
    this.getUser()// 获取用户信息
  },
  destroyed() {
    clearInterval(this.setInterval)// 清除定时器
  },
  methods: {
    // 获取用户信息
    getUser() {
    // 获取注册信息
      this.registerData = JSON.parse(sessionStorage.getItem('registerData'))
      // 获取密码
      this.passwordSee = this.$Base64.decode(this.registerData.password) // 页面展示的密码
      // 3秒后自动登录跳转
      this.setInterval = setInterval(() => {
        this.count--
        if (this.count === 0) {
          clearInterval(this.setInterval)// 清除定时器
          this.getToken()// 登陆
        }
      }, 1000)
    },
    // 登陆
    async getToken() {
      await this.$store.dispatch('setToken', this.registerData.token)
      this.$router.push({ path: '/expert/perfectInfo/expertEssentialInfo' })// 进入首页
    }
  }
}
</script>

<style lang="less" scoped>
  @import url("~@/assets/style/common/public.less");
  .colorOrange {
    color: @hyacinthine;
  }
.registerFinishReg {
  .registerFinishReg-content{
    border: 1px solid @border-gray;
    box-sizing: border-box;
    height: 530px;
    padding: 26px 0px 10px;
    text-align: center;
    .registerFinishReg-icon{
      font-size: 100px;
    }
  }
}
.info {
      width: 45%;
      margin: 0 auto;
      text-align: left;
  }
.no_wrap {
  white-space: nowrap;
  width: 100%;
  text-align: center;
  margin-top: 16px;
}
</style>
