<template>
  <div class="con-box" style="width: 1080px;">
    <div class="box-tit">{{$t('ucPassword.changePassword')}}</div>
    <div :class="['box-content','password',this.$store.state.locale == 'en'?'en':'']" v-if="registerStep===1">
      <div class="item">
        <div class="tit">{{$t('ucPassword.verifiedMobile')}}：</div>
        <div class="phone-number">{{mobile}}</div>
      </div>
      <!-- <div class="item" v-if="!mobile">
        <div class="tit">输入手机号：</div>
        <input type="text" v-model="userMobile" class="text" />
      </div>-->
      <div :class="['item',errorTips==2? 'error':'']">
        <div class="tit" :style="this.$store.state.locale == 'en'?'width: 154px;margin-right: 20px;' : ''">{{$t('ucPassword.mobileCode')}}：</div>
        <input type="text" class="text" v-model="validCode" :placeholder="$t('ucPassword.enterCode')" />
        <!-- <a href="JavaScript:;"
           @click="getCode()"
        class="coupon-btn">获取验证码</a>-->
        <a href="javascript:void(0)" class="get-code" v-show="show" @click="getCode()">{{$t('ucPassword.getCode')}}</a>
        <div class="error-text" v-if="errorTips==2">{{$t('ucPassword.pleaseEnter')}}</div>
        <!-- <span v-show="!show"
              class="send-code"
        style="cursor: not-allowed;"></span>-->
        <!-- <div class="error-text">验证码错误</div> -->
      </div>
      <div class="item des-box" v-show="!show">
        <div class="tit">&nbsp;</div>
        <div class="des">
          {{$t('ucPassword.sendCodeTips1')}}
          <span class="time">{{count}}s</span>{{$t('ucPassword.sendCodeTips2')}}
        </div>
      </div>
      <div class="item">
        <div class="tit">&nbsp;</div>
        <a href="JavaScript:;" @click="registerNext" class="btn">{{$t('ucPassword.completed')}}</a>
      </div>
    </div>

    <div :class="['box-content','password',this.$store.state.locale == 'en'?'en':'']" v-if="registerStep===2">
      <div :class="['item',errorTips==4 || errorTips==6 ? 'error':'']">
        <div class="tit">{{$t('ucPassword.enterNewPassword')}}：</div>
        <input type="password" v-model="password" class="text" />
        <div class="error-text" v-if="errorTips==4">{{$t('ucPassword.enterNewPasswordTips1')}}</div>
        <div class="error-text" v-if="errorTips==6">{{$t('ucPassword.enterNewPasswordTips2')}}</div>
        <!-- <div class="error-text"
        v-if="errorTips==3">密码格式错误 账号为4~16位字母、数字或下划线</div>-->
      </div>
      <div class="item des-box">
        <div class="tit">&nbsp;</div>
        <div class="des">{{$t('ucPassword.enterNewPasswordTips3')}}</div>
      </div>
      <div :class="['item',errorTips==5? 'error':'']">
        <div class="tit">{{$t('ucPassword.enterNewPasswordTips4')}}：</div>
        <input class="text" type="password" v-model="confirmPwd" />
        <div class="error-text" v-if="errorTips==5">{{$t('ucPassword.enterNewPasswordTips5')}}</div>
      </div>
      <div class="item">
        <div class="tit">&nbsp;</div>
        <a href="JavaScript:;" @click="registerNext" class="btn">{{$t('ucPassword.completed')}}</a>
      </div>
    </div>

    <div class="box-content password" v-if="registerStep===3">
      <div class="item">
        <div class="tit">&nbsp;</div>
        <div class="tip-box">
          <div class="tip">{{$t('ucPassword.congratulations')}}</div>
          <div class="tip-des">{{$t('ucPassword.jumping')}}</div>
          <nuxt-link to="/login" class="next suc-btn">{{$t('ucPassword.jumpNow')}}</nuxt-link>
          <!-- <a href="JavaScript:;"
          @click="cancelIndex"></a>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import util from '../plugins/util'
import Cookie from 'js-cookie'
import { encrypt } from '~/plugins/crypto.js'
export default {
  data () {
    return {
      registerStep: 1, // 修改密码步骤
      checkRegisterSmsFlag: '', // 校验验证码成功的标识
      userMobile: '',
      mobile: '',
      validCode: '',
      errorTips: 0,
      // 验证码相关
      show: true,
      count: '',
      timer: null,
      hadGotCode: false,
      password: '',
      confirmPwd: '',
      loginErr: false, // 登录错误
    }
  },
  mounted () {
    // 设置网页标题
    document.title = this.$i18n.t('ucPassword.changePassword')
    this.visible = false
    this.getUserInfo()
  },
  methods: {
    getUserInfo () {
      this.$axios.get('/p/user/userInfo', {
      }).then(({ data }) => {
        this.userMobile = data.userMobile
        this.mobile = data.mobile
      })
    },
    /**
      * 获取登录验证码
      */
    getCode () {
      if (this.hadGotCode) {
        return
      }
      this.hadGotCode = true
      let sendSmsParam = {
        mobile: this.userMobile,
      }
      this.$axios.post('/sms/sendUpdatePwdCode', sendSmsParam).then(({ data }) => {
        const timeCount = 60;
        if (!this.timer) {
          this.count = timeCount;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= timeCount) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
              this.hadGotCode = false
            }
          }, 1000)
        }
      })
    },
    /**
    * 下一步按钮
    */
    registerNext () {
      this.errorTips = 0
      // if (!util.checkPhoneNumber(this.mobile)) {
      //   this.errorTips = 1
      //   return
      // }
      if (this.registerStep == 1) {
        if (!this.validCode.trim()) {
          this.errorTips = 2
          return
        } else {
          this.errorTips = 0
          // 校验验证码
          let checkRegisterSmsParam = {
            mobile: this.userMobile,
            validCode: this.validCode
          }
          this.$axios.put('/user/checkUpdatePwdSms', checkRegisterSmsParam)
            .then(({ data }) => {
              this.checkRegisterSmsFlag = data
              this.registerStep += 1;
            })
        }
      } else if (this.registerStep == 2) {
        var reg = new RegExp("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,20}$");
        let result = reg.test(this.password);
        if (!this.password.trim()) {
          this.errorTips = 4
          return
        } else if (!result) {
          console.log('请输入正确的密码！')
          this.errorTips = 6
        } else if (this.password != this.confirmPwd) {
          this.errorTips = 5
          return
        }
        else {
          // 请求注册
          let userRegisterParam = {
            appType: 3, // 应用类型 1小程序 2微信公众号 3 PC
            checkRegisterSmsFlag: this.checkRegisterSmsFlag, // 校验登录注册验证码成功的标识
            mobile: this.userMobile,
            userName: this.userName,
            password: encrypt(this.password),
          }
          this.$axios.put('/user/updatePwd', userRegisterParam)
            .then(({ data }) => {
              this.registerStep += 1;
              this.loginOut()
              setTimeout(() => {
                // window.location.pathname == '/register' ? this.$router.push({ path: '/' }) : window.location.reload();
                this.$router.push('/login')
              }, 3000)
            })
        }
      }
    },
    /**
     * 退出登录
     */
    loginOut () {
      this.$axios.post('/logOut').then(({ data }) => {
        const user = {
          nickName: '',
          userAvatar: ''
        }
        this.$store.commit('user/SET_USER', user)
        Cookie.remove('token')
        window.localStorage.clear()
        this.$route.path == '/' ? location.reload() : this.$router.push({ path: '/' })
      })
    },
  }
}
</script>

<style scoped src='~/assets/css/uc-password.css'></style>
<style scoped src='~/assets/css/uc-edit.css'></style>
<style scoped src='~/assets/css/user-center.css'></style>
