<template>
  <div class="register unregister">
    <login-top></login-top>
    <div class="registerMain">
      <h2>
        <span>
          <img src="../../../../assets/img/login/圆形图标.png" alt />
        </span> 电梯管家管理后台
      </h2>
      <h5>中国电梯行业维保服务标准化执行工具</h5>
      <div class="unreisterMainInput">
        <div>
          <h4>找回登陆密码</h4>
          <el-form :model="RegData" :rules="formRule" ref="RegData">
            <el-form-item prop="mobile">
              <el-input v-model="RegData.mobile" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-row type="flex" justify="space-between">
              <el-col :span="18">
                <el-form-item prop="inputSmsCode">
                  <el-input v-model="RegData.inputSmsCode" placeholder="输入验证码"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <div class="getNum" @click="GetVCode">{{dateSecond}}</div>
              </el-col>
            </el-row>
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="RegData.password"
                autocomplete="off"
                placeholder="8- 16 位密码，区分大小写"
              ></el-input>
            </el-form-item>
            <el-form-item prop="passwords">
              <el-input
                type="password"
                v-model="RegData.passwords"
                autocomplete="off"
                placeholder="确认密码"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-row type="flex" justify="space-between" class="unregiterButton">
            <el-col :span="8">
              <el-button type="primary" plain round @click="userLogin">重置密码</el-button>
            </el-col>
            <el-col :span="10">
              <router-link to="login">使用已有帐户登录</router-link>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <login-bottom></login-bottom>
  </div>
</template>

<script>
import logintop from "../../components/common/logintop.vue";
import loginbottom from "../../components/common/loginbottom.vue";
import { setInterval } from "timers";
import md5 from "js-md5";
export default {
  components: {
    loginTop: logintop,
    loginBottom: loginbottom
  },
  name: "login",
  beforeCreate: function() {
    document.getElementsByTagName("body")[0].className = "body_back";
  },
  created() {},
  mounted() {
    // var regHeight = document.querySelector("div.register");
    // var html = document.querySelector("html");
    // var height = html.getBoundingClientRect().height;
    // regHeight.style.height = height + "px";
  },
  data() {
    var checkpass = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("密码不能为空"));
      } else if (value.length < 8) {
        return callback(new Error("密码长度不能低于八位数"));
      } else {
        return callback();
      }
    };
    var checkPasss = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.RegData.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var checkphone = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("手机号码不能为空"));
      } else if (!/^1[3,4,5,7,8,9]\d{9}$/.test(value)) {
        return callback(new Error("手机号码格式不对"));
      } else {
        return callback();
      }
    };
    var checkStr = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("验证码不能为空"));
      } else {
        return callback();
      }
    };
    return {
      RegData: {
        mobile: "",
        password: "",
        passwords: "",
        inputSmsCode: "",
        UserName: ""
      },
      canClick: true,
      dateSecond: "获取验证码",
      formRule: {
        password: [{ validator: checkpass, trigger: "blur" }],
        passwords: [{ validator: checkPasss, trigger: "blur" }],
        mobile: [{ validator: checkphone, trigger: "blur" }],
        inputSmsCode: [{ validator: checkStr, trigger: "blur" }]
      }
    };
  },
  methods: {
    // 获取验证码
    GetVCode() {
      var _this = this;
      var num = 60;
      var ismobile;
      this.$refs.RegData.validateField("mobile", error => {
        ismobile = error;
      });
      if (this.canClick && !ismobile) {
        _this.setIn = window.setInterval(() => {
          if (num > 0 && num <= 60) {
            num--;
            _this.dateSecond = num + "s";
          } else {
            window.clearInterval(_this.setIn);
            _this.dateSecond = "获取验证码";
            _this.canClick = true;
          }
        }, 1000);
        var url =
          "system/login/smsCode?mobile=" +
          this.RegData.mobile;

        this.axios.get(url).then(result => {
          if (result.statusCode !== "1") {
            // 弹框
            _this.$alert(result.message, {
              confirmButtonText: "确定",
              callback: action => {
                window.clearInterval(_this.setIn);
                _this.dateSecond = "获取验证码";
                _this.canClick = true;
              }
            });
          }
        });
      } else {
        _this.canClick = false;
      }
    },
    // 注册
    userLogin() {
      var isValid = false;
      var _this = this;
      this.$refs.RegData.validate(valid => {
        isValid = valid;
      });
      if (!isValid) return;
      var url =
        "system/login/checkSmsCode?inputSmsCode=" +
        this.RegData.inputSmsCode;
      var p1 = new Promise(function(resolve, reject) {
        _this.axios.get(url).then(res => {
          if (res.statusCode === "1") {
            resolve(res);
          } else {
            reject(res);
          }
        });
      });
      p1.then(function(res) {
        var url = "system/login/resetPassword";
        var param = _this.RegData;
        param.password=md5(_this.RegData.password);
        _this.axios.post(url, param).then(res => {
          if (res.statusCode === "1") {
            _this.$alert("修改成功，即将跳转登陆界面", "消息提示", {
              confirmButtonText: "确定",
              callback: action => {
                _this.$router.replace("/login");
              }
            });
          }else{
            _this.$message(res.message);
          }
        });
      });
      p1.catch(e => {
        _this.$message({
          message: e.message,
          type: "error"
        });
      });
    }
  },
  beforeDestroy: function() {
    document.body.removeAttribute("class", "body_back");
  }
};
</script>
<style lang="stylus" scope>
/* .body_back {
  background: #409eff;
  position: absolute;
} */
.register {
  background-image: '../../../../assets/loginbg@2x.png';
}
</style>
