<template>
  <div class="verificationCode">
    <el-form
      :model="dynamicValidateForm"
      ref="dynamicValidateForm"
      label-width="100px"
      class="demo-dynamic"
      :rules="rules"
      ><el-form-item prop="buyerPhone"
        ><el-input
          v-model="dynamicValidateForm.phone"
          placeholder="请输入手机号码"
        ></el-input>
      </el-form-item>
      <el-form-item
        ><el-input
          v-model="dynamicValidateForm.verifyCode"
          placeholder="请输入验证码"
        ></el-input
        ><el-button @click="getVerificationCode">{{ btnInnerText }}</el-button>
      </el-form-item>
      <el-button type="primary" @click="submitForm()">登录</el-button>
      <p>点击【登录】即可表示同意<span>《启服通用户协议》</span></p>
    </el-form>
    <p>未注册用户，系统默认为您创建账号</p>
  </div>
</template>

<script>
import { getVerifyCode, userPinByLgoinVcode } from "@/api/user.js";
import { seveCookie } from "@/utils/getToken.js";
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
      if (!this.dynamicValidateForm.phone) {
        return callback(new Error("手机号码不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(+this.dynamicValidateForm.phone)) {
          callback(new Error("请输入数字值"));
        } else {
          if (phoneReg.test(this.dynamicValidateForm.phone)) {
            callback();
          } else {
            callback(new Error("手机号码格式不正确"));
          }
        }
      }, 100);
    };
    //
    return {
      dynamicValidateForm: {
        phone: "",
        verifyCode: ""
      },
      btnInnerText: "获取验证码",
      flag: true,
      timeNum: 60,
      timer: null,
      rules: {
        buyerPhone: [{ validator: checkPhone, trigger: "blur" }]
      }
    };
  },
  methods: {
    getVerificationCode() {
      if (this.flag) {
        if (/^1[3|4|5|7|8][0-9]{9}$/.test(this.dynamicValidateForm.phone)) {
          this.flag = false;
          //获取验证码
          getVerifyCode(this.dynamicValidateForm.phone).then(res => {
            console.log(res);
            if (res.status == 0) {
              this.$message({
                message: "获取验证码成功！",
                type: "success"
              });
            } else {
              this.$message.error("获取验证码失败！");
            }
          });
          this.btnInnerText = this.timeNum + "秒之后重新获取";
          this.timer = setInterval(() => {
            this.timeNum--;
            this.btnInnerText = this.timeNum + "秒之后重新获取";
            if (this.timeNum <= 0) {
              clearInterval(this.timer);
              this.btnInnerText = "重新获取验证码";
              this.timeNum = 10;
              this.flag = true;
            }
          }, 1000);
        }
      }
    },

    //提交表单
    submitForm() {
      let form = {
        mobile: this.dynamicValidateForm.phone, // Y 手机号
        vcode: this.dynamicValidateForm.verifyCode //  Y 验证码
      };
      if (
        /^1[3|4|5|7|8][0-9]{9}$/.test(this.dynamicValidateForm.phone) &&
        this.dynamicValidateForm.verifyCode
      ) {
        userPinByLgoinVcode(form).then(res => {
          console.log(res, "123123");
          if (res.status == 0) {
            seveCookie("userpin", res.data.userpin);
            this.$message({
              message: "登录成功！",
              type: "success"
            });
          } else if (res.status == 2030) {
            this.$message.error("验证码错误！");
          } else if (res.status == 2060) {
            this.$message({
              message: "请不要重新登录！",
              type: "warning"
            });
          } else {
            this.$message.error("登录失败！");
          }
        });
      }
    }
  }
};
</script>

<style lang="scss">
.verificationCode {
  .el-form {
    .el-form-item {
      .el-form-item__content {
        margin-left: 0 !important;
        display: flex;
      }
    }
  }
  p {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 20px;
    margin-top: 60px;
    text-align: center;
  }
  .el-input {
    input {
      width: 100%;
      height: 42px;
      border-radius: 0;
    }
  }
  .el-form {
    .el-form-item {
      margin-top: 30px;
      button {
        border-radius: 0;
        border: 1px solid #108ee9;
        color: #108ee9;
        background: #fff;
        margin-left: 10px;
        width: 150px;
        height: 41px;
        margin-top: 0;
      }
    }
    button {
      width: 100%;
      height: 42px;
      margin-top: 20px;
      border-radius: 0;
      background: #3071fe;
      border: 1px solid #3071fe;
    }
    p {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
      line-height: 20px;
      text-align: center;
      margin-top: 10px;
      span {
        color: #108ee9;
        cursor: pointer;
      }
    }
  }
}
</style>
