<template>
  <div class="page_register">
    <div class="registerTitle">
      <i class="iconfont icon-zuojiantou jiantou"></i>
      <span class="titleName">注册</span>
    </div>
    <div class="registermyInput">
      <el-form ref="registerForm" :model="registerForm" :rules="rules">
        <el-form-item required prop="phone">
          <div class="phoneLine">
            <i class="el-icon-mobile mobile"></i>
            <el-input
              placeholder="请输入手机号码"
              v-model="registerForm.phone"
              v-on:input="watchNum"
              maxlength="11"
              @input="change(registerForm.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
              v-model="registerForm.code"
              placeholder="请输入验证码"
              v-on:input="watchNum"
            ></el-input>
            <div class="getCode" @click="getCode()">获取验证码</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-item required prop="password">
          <div class="phoneLine">
            <i class="el-icon-lock lock"></i>
            <el-input
              v-model="registerForm.password"
              show-password
              clearable
              placeholder="请输入密码"
            ></el-input>
          </div>
        </el-form-item>
      </el-form>
      <!-- <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-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="psd" show-password></el-input>-->
    </div>
    <div
      class="login"
      @click="submitModifyPwdAction('registerForm')"
      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, checkPassWordTwo } from "@/utils/tools";
import { getModifyPwdCode, submitModifyPwdAction } from "@/api/login/login";
import { hex_md5 } from "@/utils/md5";
export default {
  data() {
    var checkMobileRule = (rule, value, callback) => {
      if (!checkMobile(value)) {
        callback(new Error("请填写正确的手机号"));
      } else {
        callback();
      }
    };
    var checkPasswordRule = (rule, value, callback) => {
      if (!checkPassWordTwo(value)) {
        callback(new Error("密码长度不能小于6位数"));
      } else {
        callback();
      }
    };
    return {
      phone: "",
      code: "",
      psd: "",
      contact: false,
      count_downing: false,
      count_down: 0,
      modify_pwd_loading: false,
      registerForm: {
        phone: "",
        code: "",
        password: ""
      },
      rules: {
        phone: [
          { required: true, message: "手机号码不能为空" },
          { validator: checkMobileRule }
        ],
        code: [{ required: true, message: "验证码不能为空" }],
        password: [
          { required: true, message: "密码不能为空" },
          { validator: checkPasswordRule }
        ]
      },
      loginshow: true,
      loginshowtwo: false,
      codeshow: false,
      codeshowtwo: true
    };
  },
  methods: {
    getCodeAction: function() {
      this.count_downing = true;
      this.count_down = 61;
      this.countDown();
      getModifyPwdCode(this.registerForm.phone).then(response => {
        if (response.data.state === 1) {
          var admin = response.data.data.admin;
          console.log("hhadmin是设么", admin);
          if (admin.mobile !== "") {
            this.$message.error("手机号码已注册");
          }
        }
      });
    },
    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);
    },
    watchNum() {
      if (this.registerForm.phone.length === 11) {
        this.codeshow = true;
        this.codeshowtwo = false;
      } else {
        this.codeshow = false;
        this.codeshowtwo = true;
      }

      if (this.registerForm.phone === "" || this.registerForm.code === "") {
        this.loginshow = false;
        this.loginshowtwo = true;
      } else {
        this.loginshow = true;
        this.loginshowtwo = false;
      }
    },
    submitModifyPwdAction(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          submitModifyPwdAction(
            this.registerForm.phone,
            hex_md5(this.registerForm.password),
            this.registerForm.code
          ).then(response => {
            if (response.data.state === 1) {
              var admin = response.data.data.admin;
              console.log("admin听我", admin);
              console.log("admin", admin.id);
              this.$router.push("/orginfomation?id=" + admin.id);
            } else {
              this.$message.error("账号或验证码错误");
            }
          });
        }
      });
    },

    callPhone() {
      window.location.href = "tel://075586526342";
    },
    // 不能输入中文和字母
    change(val) {
      console.log("val", val);
      this.registerForm.phone = val.replace(/[^0-9]+/g, "");
    }
  },
  created() {},
  computed: {
    code_btn_title: function() {
      if (this.count_down === 0) {
        return "获取验证码";
      } else {
        return "重新发送(" + this.count_down + ")";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.page_register {
  overflow: hidden;
  height: 100%;
  .registerTitle {
    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: 8rem;
  }
  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .registermyInput {
    margin-top: 4rem;
    .phoneLine {
      width: 84%;
      margin: 0 auto;
      display: flex;
      border-bottom: 1px solid #e6e6e6;
      .mobile {
        float: left;
        color: #acacac;
        font-size: 1.5rem;
        margin-left: 0.375rem;
        line-height: 3.375rem;
        width: 1.5rem;
      }
      .phoneInput {
        width: 95%;
      }
    }
    .lock {
      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: left;
        width: 5.75rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        color: #fff;
        background: #338afb;
        border-radius: 1.4375rem;
        font-size: 0.8125rem;
        // margin-top: 0.9375rem;
      }

      .getCodetwo {
        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;
  }
  .logintwo {
    width: 84%;
    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;
  }
  .problem {
    width: 84%;
    font-size: 0.8125rem;
    margin: 15rem auto 0;
    text-align: center;
    span {
      color: #338afb;
    }
  }
}

.el-form-item__error {
  margin-left: 2.5rem;
}
.el-button--medium {
  padding: 0;
}

.el-message {
  min-width: 20rem;
}
</style>

<style lang="scss">
.registermyInput {
  .el-form-item {
    margin-bottom: 0;
  }
  .el-input {
    display: flex;
    align-items: center;
    margin: 0 auto;
    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;
  }

  .phoneLine {
    .el-input__clear {
      margin-right: 0.625rem;
    }
    .el-input__icon {
      line-height: 3.375rem;
      font-size: 1.5rem;
    }
  }
}
.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 {
    //   display: flex;
    //   justify-content: space-around;
    //   align-items: center;
    > span:nth-of-type(1) {
      color: #9b9b9b;
    }
    > span:nth-of-type(2) {
      // width: 0.125rem;
      // height: 1.75rem;
      // line-height: 1.75rem;
      padding: 0 3.125rem;
      color: #e6e6e6;
    }
    > span:nth-of-type(3) {
      color: #000000;
    }
  }
}
</style>
