<template>
  <div class="check">
    <h1>验证旧手机号</h1>
    <div class="line"></div>
    <div class="contents">
      <div class="old-mobile">{{mobile}}</div>
      <ver-code @click="sendVer" @change="changeAuthCode"></ver-code>
    </div>
    <div class="sub-container">
      <el-button class="next-btn" type="primary" @click="clickNext">下一步</el-button>
      <section>
        <h2>说明</h2>
        <p>1.修改手机号需要先验证旧手机号</p>
        <p>
          2.若旧手机号已注销，请通过
          <nuxt-link to="/setting/check/real_info">实名认证验证</nuxt-link>
        </p>
      </section>
    </div>
  </div>
</template>

<script>
import VerCode from '@/components/ver_code'

export default {
  components: {
    VerCode,
  },
  computed: {
    mobile() {
      let userMobile = this.userinfo.mobile
      return `${userMobile.slice(0, 3)}****${userMobile.slice(7, 11)}`
    }
  },
  data() {
    return {
      authCode: '',
    }
  },
  mounted() { },
  methods: {
    async sendVer() {
      let res = await this.$post('/api/user/sendMobileAuthCode', {
        mobile: this.userinfo.mobile
      })
      if(res) {
        this.$message({
          message: '发送成功，请查收',
          type: 'success'
        })
      }
    },
    changeAuthCode(val) {
      this.authCode = val
    },
    async clickNext() {
      if(!this.authCode.length) {
        this.$message('请输入验证码')
        return
      }
      let res = await this.$post('/api/user/checkMobileAuthCode', {
        mobile: this.userinfo.mobile,
        auth_code: this.authCode,
      })
      if(res) {
        this.$router.push('/setting/check/change_mobile')
      }
    }
  }
}
</script>

<style scoped>
.check {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1000px;
  height: 588px;
  background: white;
  margin-top: 20px;
}
h1 {
  margin: 27px 0 25px;
}
.line {
  width: 960px;
  height: 2px;
  background: rgba(0, 0, 0, 0.06);
}
.old-mobile {
  margin: 102px 0 5px;
}
.sub-container {
  width: 311px;
}
.next-btn {
  width: 125px;
  margin: 20px 0 41px;
}
p {
  line-height: 28px;
  color: #919aa7;
  font-size: 13px;
}
p a {
  color: var(--mainColor);
}
</style>
