<template>
  <div class="page_noPassword">
    <div class="nopasswordTitle">
      <i class="iconfont icon-zuojiantou jiantou"></i>
      <span class="titleName">免密码登录</span>
    </div>
    <div class="myInput">
      <!-- <el-input placeholder="请输入手机号码" prefix-icon="el-icon-mobile" v-model="phone"></el-input>
      <div class="code">
        <i class="iconfont icon-dunpai dunpai"></i>
        <el-input v-model="code" placeholder="请输入验证码"></el-input>
        <div class="getCode">获取验证码</div>
      </div>-->
      <el-form ref="NoPassForm" :model="NoPassForm" :rules="rules">
        <el-form-item required prop="phone">
          <div class="phoneLine">
            <i class="el-icon-mobile mobile"></i>
            <el-input
              class="phoneInput"
              placeholder="请输入手机号码"
              v-model="NoPassForm.phone"
              v-on:input="watchNum"
              :maxlength="11"
              @input="change(NoPassForm.phone)"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item required prop="code">
          <div class="code">
            <i class="iconfont icon-dunpai dunpai"></i>
            <el-input
              class="yzm"
              v-model="NoPassForm.code"
              placeholder="请输入验证码"
              v-on:input="watchNum"
            ></el-input>
            <div>
              <div class="getCode">获取验证码</div>
            </div>
            <!-- <el-button
              class="getCode"
              :type="count_downing ? 'info' : 'primary'"
              :disabled="count_downing"
              @click="getCodeAction"
              v-show="codeshow"
            >{{ code_btn_title }}</el-button>
            <el-button
              class="getCodetwo"
              :type="count_downing ? 'info' : 'primary'"
              :disabled="count_downing"
              v-show="codeshowtwo"
            >{{ code_btn_title }}</el-button>-->
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="login" @click="NoPassToLogin('NoPassForm')" v-show="loginshow">
      登录
    </div>
    <div class="logintwo" v-show="loginshowtwo">登录</div>
    <div class="problem">
      遇到问题？点击
      <span @click="contact = true">联系客服</span>
    </div>

    <!-- 弹窗 联系客服 -->
    <el-dialog
      title="客服电话"
      :visible.sync="contact"
      width="19.1875rem"
      top="12.5rem"
      center
      class="myDialog"
    >
      <span class="telephone">0755-86526342</span>
      <span slot="footer" class="dialog-footer">
        <span @click="contact = false">取消</span>
        <span>|</span>
        <span type="primary" @click="callPhone()">拨打</span>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { checkMobile } from "@/utils/tools";
import { NoPassToLogin, getCode } from "@/api/login/login";
export default {
  data() {
    var checkMobileRule = (rule, value, callback) => {
      if (!checkMobile(value)) {
        callback(new Error("请填写正确的手机号"));
      } else {
        callback();
      }
    };
    return {
      phone: "",
      code: "",
      contact: false,
      NoPassForm: {
        phone: "",
        code: ""
      },
      rules: {
        phone: [
          { required: true, message: "手机号码不能为空" },
          { validator: checkMobileRule }
        ],
        code: [{ required: true, message: "验证码不能为空" }]
      },
      loginshow: false,
      loginshowtwo: true,
      count_downing: false,
      count_down: 0,
      codeshow: false,
      codeshowtwo: true
    };
  },
  methods: {
    getCodeAction() {
      this.count_downing = true;
      this.count_down = 61;
      this.countDown();
      getCode(this.NoPassForm.phone).then(response => {});
    },
    countDown: function() {
      this.count_down = this.count_down - 1;
      if (this.count_down == 0) {
        this.count_downing = false;
        return;
      }
      var t = this;
      setTimeout(() => {
        this.countDown();
      }, 1000);
    },

    callPhone() {
      window.location.href = "tel://075586526342";
    },
    NoPassToLogin(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          NoPassToLogin(this.NoPassForm.phone, this.NoPassForm.code).then(
            response => {
              if (response.data.state === 1) {
                var msg = response.data.data.msg;
                console.log("msg", msg);
                this.$router.push({ path: "/home" });
              } else {
                this.$message.error("账号或验证码错误");
              }
            }
          );
        }
      });
    },
    watchNum() {
      if (this.NoPassForm.phone.length === 11) {
        this.codeshow = true;
        this.codeshowtwo = false;
      } else {
        this.codeshowtwo = true;
        this.codeshow = false;
      }

      if (this.NoPassForm.phone === "" || this.NoPassForm.code === "") {
        this.loginshow = false;
        this.loginshowtwo = true;
      } else {
        this.loginshow = true;
        this.loginshowtwo = false;
      }
    },
    change(val) {
      this.NoPassForm.phone = val.replace(/[^0-9]+/g, "");
    }
    //    getCode(){
    //      getCode(this.NoPassForm.phone).then(response=>{

    //      })
    //    },
  },
  computed: {
    code_btn_title: function() {
      if (this.count_down == 0) {
        return "获取验证码";
      } else {
        return "重新发送(" + this.count_down + ")";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.page_noPassword {
  overflow: hidden;
  height: 100%;
  .nopasswordTitle {
    height: 3.125rem;
    line-height: 3.125rem;
    display: flex;
    align-items: center;
  }
  .jiantou {
    margin-left: 1.25rem;
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 6.625rem;
  }
  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .myInput {
    margin-top: 4rem;
    .phoneLine {
      width: 84%;
      margin: 0 auto;
      border-bottom: 1px solid #e6e6e6;
      display: flex;
      .phoneInput {
        width: 95%;
      }
      .mobile {
        float: left;
        color: #acacac;
        font-size: 1.5rem;
        margin-left: 0.375rem;
        line-height: 3.375rem;
        width: 1.5rem;
      }
    }
    .code {
      line-height: 3.375rem;
      width: 84%;
      height: 3.375rem;
      margin: 0 auto;
      border-bottom: 1px solid #e6e6e6;
      display: flex;
      align-items: center;
      .dunpai {
        float: left;
        color: #acacac;
        font-size: 1.5rem;
        margin-left: 0.375rem;
      }
      .el-input {
        float: left;
        width: 10.6rem;
        border: none;
        padding: 0;
      }
      .el-input__inner {
        padding: 0;
        padding-left: 0.75rem;
      }
      .getCode {
        float: right;
        width: 5.75rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        color: #fff;
        background: #338afb;
        border-radius: 1.4375rem;
        font-size: 0.8125rem;
      }
      .getCodetwo {
        // float: left;
        width: 5.75rem;
        height: 2rem;
        // line-height: 2rem;
        text-align: center;
        color: #fff;
        background: #e5e5e5;
        border-radius: 1.4375rem;
        font-size: 0.8125rem;
      }
      .el-button--primary {
        border-color: transparent;
      }
    }
  }
  .login {
    width: 84%;
    height: 2.875rem;
    background: #338afb;
    border-radius: 1.4375rem;
    margin: 0 auto;
    line-height: 2.875rem;
    text-align: center;
    color: #fff;
    margin-top: 2.875rem;
  }
  .problem {
    width: 84%;
    font-size: 0.8125rem;
    margin: 18.75rem auto 0;
    text-align: center;
    span {
      color: #338afb;
    }
  }
}

.el-form-item__error {
  margin-left: 2.5rem;
}

.logintwo {
  width: 19.25rem;
  height: 2.875rem;
  background: #e5e5e5;
  border-radius: 1.4375rem;
  margin: 0 auto;
  line-height: 2.875rem;
  text-align: center;
  color: #fff;
  margin-top: 2.875rem;
}

.el-message {
  min-width: 20rem;
}
</style>
<style lang="scss">
.myInput {
  .el-form-item {
    margin-bottom: 0;
  }
  .el-input {
    display: block;
    margin: 0 auto;
    // width: 19.0625rem;

    color: rgba(155, 155, 155, 1);
    padding-left: 0.75rem;
    box-sizing: border-box;
    height: 3.375rem;
    line-height: 3.375rem;
  }
  .el-input__inner {
    border: none;
    font-size: 1rem;
    padding-left: 0;
  }
  .el-input__prefix {
    font-size: 1.5rem;
    color: #acacac;
    line-height: 3.375rem;
  }
}
.myDialog {
  line-height: 50%;
  height: 100%;
  .el-dialog {
    border-radius: 10px;
  }
  .el-dialog__title {
    color: #000000;
  }
  .telephone {
    width: 12.5rem;
    height: 1.125rem;
    font-size: 1.5rem;
    font-weight: 500;
    color: #338afb;
    margin-left: 2.5rem;
  }
  .dialog-footer {
    > span:nth-of-type(1) {
      color: #9b9b9b;
    }
    > span:nth-of-type(2) {
      padding: 0 3.125rem;
      color: #e6e6e6;
    }
    > span:nth-of-type(3) {
      color: #000000;
    }
  }
}
</style>
