<template>
  <view class='login'>
    <form @submit="formSubmit" @reset="formReset">
      <div class="form-title">登录</div>
      <view class="form-group">
        <view class="form-group-item flex align-center">
          <input class="uni-input" v-model="form.phone" name="phone" maxlength="11" placeholder="手机号" @input="phoneInput" />
          <view :class="[{ 'disabled': sentDisable }, 'sent-btn block']" @tap.stop="send"> {{ disabled === true ? `${timeNum}s后重发` : '获取验证码' }} </view>
        </view>
      </view>
      <view class="form-group">
        <view class="form-group-item flex align-center">
          <input class="uni-input" v-model="form.code" name="code" maxlength="4" placeholder="验证码" @input="codeInput"/>
        </view>
      </view>
      <view class="uni-btn-v">
        <button :class="[{ 'disabled': submitDisable },'cu-btn submit-btn']" form-type="submit">登录</button>
      </view>
    </form>
  </view>
</template>

<script>
import { smsCode, loginByPhone } from '@/api/login';

export default {
  data() {
    return {
      disabled: false,
      sentDisable: true,
      submitDisable: true,
      timer: null,
      timeNum: 60,
      form: {
        phone: '',
        code: '',
      }
    }
  },

  onLoad() {},

  onShow() {},

  methods: {
    async send() {
      if (this.disabled) {
        return false;
      }
      if (this.sentDisable) {
        return false;
      }
      // 发送短信验证码
      this.$http
          .get(`${smsCode}/${this.form.phone}`)
          .then(res => {
            this.$mHelper.toast('发送成功');
            this.disabled = true;
            this.sentDisable = true;
            this.timer = setInterval(() => {
              this.codeMsg();
            }, 1000);
          })
          .catch(err => {
            console.log(err);
          })
      // const data = await getPhoneCode(this.garden.principalPhone);
      // if (data.status === 200) {
      //   this.disabled = true;
      //   this.timer = setInterval(() => {
      //     this.codeMsg();
      //   }, 1000);
      //   this.$once('hook:beforeDestroy', () => {
      //     clearInterval(this.timer);
      //   });
      // }
    },
    codeMsg() {
      this.timeNum--;
      if (this.timeNum <= 0) {
        clearInterval(this.timer);
        this.disabled = false;
        this.sentDisable = false;
        this.timeNum = 60;
      }
    },
    phoneInput(e) {
      let code = this.form.code;
      let phone = e.detail.value;
      let reg1 = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
      let reg2 = new RegExp('^.{4}$');
      if (reg1.test(phone)) {
        this.sentDisable = false;
      } else {
        this.sentDisable = true;
      }
      if (!reg1.test(phone) || !reg2.test(code)) {
        this.submitDisable = true;
      } else {
        this.submitDisable = false;
      }
    },
    codeInput(e) {
      let phone = this.form.phone;
      let code = e.detail.value;
      let reg1 = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
      let reg2 = new RegExp('^.{4}$');
      if (!reg1.test(phone) || !reg2.test(code)) {
        this.submitDisable = true;
      } else {
        this.submitDisable = false;
      }
    },
    formSubmit(e) {
      if(this.submitDisable) return false;
      // 表单验证
      const rule = [
        { name: 'phone', checkType: 'phoneno', checkRule: '', errorMsg: '手机号不正确'},
        { name: 'code', checkType: 'string', checkRule: '4', errorMsg: '请输入4位验证码'}
      ]
      //进行表单检查
      let formData = e.detail.value;
      var checkRes = this.$mGraceChecker.check(formData, rule);
      if(checkRes){
        this.submitDisable = true;
        //显示消息提示框
        this.$http
          .get(`${loginByPhone}`, {
            phone: e.detail.value.phone,
            code: e.detail.value.code
          })
          .then(res => {
            this.submitDisable = false;
  				  this.$mHelper.toast('登录成功', 1500);
  					this.$mStore.commit('login', res.data);
            const backToPage = uni.getStorageSync('backToPage');
            uni.removeStorageSync('backToPage');
            if (backToPage) {
							this.$mRouter.reLaunch(JSON.parse(backToPage));
            } else {
  						this.$mRouter.reLaunch({ route: '/pages/index/index' });
            }
          })
          .catch(err => {
            console.log('err', err)
          })
      }else{
				this.$mHelper.toast(this.$mGraceChecker.error);
      }
    }
  },
  beforeDestroy() {

  }
}
</script>

<style lang="scss">
page {
  background: $color-white;
}
.login {
  padding-top: 218upx;
  .form-title {
    margin-bottom: 80upx;
    text-align: center;
    font-size: 48upx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #3C6E3B;
    line-height: 48upx;
  }
  .form-group {
    margin: 0 auto 24upx;
    width: 568upx;
    background: #F7F7F7;
    border-radius: 200upx;
    .form-group-item {
      position: relative;
      height: 96upx;
      line-height: 96upx;
      padding-left: 32upx;
      padding-right: 8upx;
    }
    .sent-btn {
      position: absolute;
      right: 8upx;
      top: 50%;
      transform: translateY(-50%);
      height: 80upx;
      line-height: 80upx;
      text-align: center;
      background: #4ED84C;
      border-radius: 200upx;
      font-size: 32upx;
      padding: 0 28upx;
      // margin-right: 8upx;
      color: #FFFFFF;
    }
  }
  .uni-btn-v {
    text-align: center;
    .submit-btn {
      margin-top: 56upx;
      padding: 0upx;
      width: 592upx;
      height: 84upx;
      line-height: 84upx;
      background: #4ED84C;
      box-shadow: 0upx 4upx 20upx 0upx #4ED84C;
      border-radius: 200upx;
      font-size: 32upx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
    }
  }
  .disabled {
    background: #4ED84C;
    border-radius: 200px;
    opacity: 0.5;
  }
}
</style>
