<template>
  <div class="home-page">
    <img src="../assets/login_bg.png" alt class="login-bg" />
    <div class="main-container">
      <p class="login-title">验证码登陆</p>
      <div class="main-input">
        <van-field
          v-model="tel"
          type="tel"
          :left-icon="telIcon"
          placeholder="请输入您在盒马APP的下单手机号"
          clearable
          maxlength="11"
        />
        <van-field
          v-model="code"
          type="digit"
          :left-icon="codeIcon"
          placeholder="请输入您的验证码"
          maxlength="6"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              :disabled="codeDisabled"
              @click="sendCode"
            >{{codeLabel}}</van-button>
          </template>
        </van-field>
      </div>
      <div class="btn-wrapper">
        <van-button type="primary" block @click="login" :disabled="loginDisabled">开启</van-button>
      </div>
      <p class="support">本服务由鲸致生活提供安心包相关服务及功能</p>
    </div>
  </div>
</template>

<script>
import Service from "../script/api/service";

export default {
  name: "qyb",
  data() {
    return {
      telIcon: require("../assets/icon_tel.png"),
      codeIcon: require("../assets/icon_code.png"),
      tel: "",
      code: "",
      codeLabel: "获取验证码",
      codeDisabled: false,
      // loginDisabled:true,
      totolTime: 60,
      timer: ""
    };
  },
  computed: {
    loginDisabled: function() {
      return !(this.tel.length == 11 && this.code.length == 6);
    }
  },
  watch: {
    //  tel(newName, oldName) {
    //     if (newName.length==11){
    //       this.codeDisabled=false;
    //     }else{
    //       this.codeDisabled=true;
    //     }
    //   },
    // code(newName, oldName) {
    //   if (newName.length==6&&this.tel.length==11){
    //     this.loginDisabled=false;
    //   }else{
    //     this.loginDisabled=true;
    //   }
    // }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    sendCode: function() {
      if (this.tel == "") {
        this.$toast("手机号不能为空");
        return false;
      } else if (!/^1\d{10}$/.test(this.tel)) {
        this.$toast("请输入正确的手机号码");
        return false;
      } else {
        this.codeTimer();
        let params = { phoneNumber: this.tel };
        Service.$axiosSendMessage(params).then(res => {
          if (res.data.errno == "-1") {
            // this.$toast("您的账号还没领取保姆安心包  快去盒马app领取吧");
            this.$dialog.alert({
              message: "您的账号还没领取保姆安心包  快去盒马app领取吧"
            }).then(() => {
              // on close
            });
          } else if (res.data.errno == "0") {
            this.$toast("验证码已发送到您的手机");
          }
        });
      }
    },
    codeTimer: function() {
      this.codeDisabled = true;
      this.codeLabel = this.totolTime + " S";
      this.timer = setInterval(() => {
        this.totolTime--;
        this.codeLabel = this.totolTime + " S";
        if (this.totolTime == 0) {
          this.codeLabel = "发送验证码";
          this.totolTime = 60;
          this.codeDisabled = false;
          clearInterval(this.timer);
        }
      }, 1000);
    },
    login: function() {
      let params = { phoneNumber: this.tel, messageCode: this.code };
      Service.$axioslogin(params).then(res => {
        if (res.data.errno == "-1") {
          this.$toast(res.data.data);
        } else if (res.data.errno == "0") {
          let token = res.data.data.token;
          let userInfo = res.data.data.user;
          localStorage.setItem("token", token);
          localStorage.setItem("userInfo", JSON.stringify(userInfo));
          this.$router.push("/bx");
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login-bg {
  width: 100%;
  min-height: 4rem;
}
.main-container {
  transform: translateY(-0.44rem);
  border-radius: 18px 18px 0px 0px;
  overflow: hidden;
  padding: 0.72rem 0.48rem;
  background: #fff;
}
.login-title {
  font-size: 0.32rem;
  font-weight: bold;
  margin: 0 0 0.5rem 0;
}

.btn-wrapper {
  margin: 1rem 0 3.2rem;
}
.support {
  text-align: center;
  font-size: 0.26rem;
}
</style>
