<template>
    <div>
      <div class="input_content">
        <div class="input_item">
          <label>手机号</label>
          <input type="text" class="input_text" v-model="form.phone" placeholder="请输入手机号">
        </div>
        <div class="input_item">
          <label>验证码</label>
          <input type="text" class="input_text has_r" v-model="form.code" placeholder="请输入验证码">
          <span class="getCode" @click="sendCode" :class="{color2:isSend }">{{count | second}}</span>
        </div>
        <div class="input_item">
          <label>新密码</label>
          <input type="password" class="input_text" v-model="form.password" placeholder="请输入新密码">
        </div>
        <div class="input_item">
          <label>确认新密码</label>
          <input type="password" class="input_text" v-model="form.newPassword" placeholder="请确认新密码">
        </div>
        <div class="btn default-btn" @click="submitBtn">确认</div>
      </div>
    </div>
</template>
<script>
    export default {
        name: '',
        data () {
            return {
              form:{
                phone:'',
                code:'',
                password:'',
                newPassword:''
              },
              isSend:false,
              count:'获取验证码'
            }
        },
        methods:{
           submitBtn(){
               if(this.isVerify()){

               }
           },

          /*
           * 确认验证
           * */
          isVerify(){
            if(!this.form.phone || !reg.PhoneReg.test(this.form.phone)){
              Toast('请输入正确的手机号');
              return false;
            }
            if(!this.form.code){
              Toast('请输入验证码');
              return false;
            }
            if(!this.form.password){
              Toast('请输入新密码');
              return false;
            }
            if(!this.form.newPassword){
              Toast('请确认新密码');
              return false;
            }
            return true;
          },
          /*
           * 获取验证码
           * */
          sendCode(){
            if(!this.isSend){
              if(!this.form.phone || !reg.PhoneReg.test(this.form.phone)){
                Toast('请输入正确的手机号');
                return false;
              }
              this.isSend = true;
              this.count = 60;
              this.countDown();
            }
          },
          countDown(){
            var _this=this;
            if(_this.count > 0){
              _this.count--;
              setTimeout(_this.countDown, 1000);
            }else{
              _this.count = '获取验证码';
              _this.isSend = false;
            }
          },
        },
        filters: {
          second(val){
            if(typeof val == 'number'){
              return val + 's后重发';
            }
            return val;
          }
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import "./login.styl"
</style>
