<template>
  <div class="page_register">
    <div class="registerTitle">
      <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
      <span class="titleName">注册</span>
    </div>
    <div class="registermyInput">
      <el-form ref="registerForm" :model="registerForm" :rules="rules" :show-message="showMessage">
        <el-form-item required prop="phone">
          <div class="phoneLine">
            <i class="el-icon-mobile mobile"></i>
            <el-input
              placeholder="请填写手机号码"
              v-model.trim="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.trim="registerForm.code"
              placeholder="请填写验证码"
              v-on:input="watchNum"
            ></el-input>
            <div class="getCode" @click="getVerifyCode()">
              {{ code_btn_title }}
            </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-on:input="watchNum"
              v-model.trim="registerForm.password"
              show-password
              clearable
              maxlength="20"
              placeholder="请填写至少六位数密码"
              @keydown.native="keydown($event)"
            ></el-input>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div
      class="login"
      @click="submitRegister('registerForm')"
      v-show="loginshow"
    >
      下一步
    </div>
    <div class="logintwo" v-show="loginshowtwo">下一步</div>
    <div class="agreeBox">
      <van-checkbox
        v-model="checked"
        v-on:input="watchNum"
        shape="square"
        icon-size="14px"
        >我已阅读并同意</van-checkbox
      >
      <span class="newColor" @click="agree()">《隐私服务协议》</span>
      <span class="newColor" @click="agree1()">《用户协议》</span>
    </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>

    <van-overlay :show="show" type="spinner" size="30px">
      <div class="wrapper">
        <van-loading size="24px" vertical>正在注册...</van-loading>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import "@/styles/newStyle.scss";
import { checkMobile, checkPassWordTwo } from "@/utils/tools";
import { getCodeInit, getVerifyCode, register } from "@/api/login";
import { setRem } from "@/libs/functionRem";

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 {
      showMessage:false,
      checked: true,
      phone: "",
      show: false,
      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: false,
      loginshowtwo: true,
      codeshow: false,
      codeshowtwo: true,
      aespass: ""
    };
  },
  created() {
    setRem();
    this.GetCodeInit();
  },
  methods: {
    GetCodeInit() {
      getCodeInit().then(response => {
        if (response.data.state === 1) {
          this.aespass = response.data.data.aespass;
        }
      });
    },
    getVerifyCode() {
      if (this.registerForm.phone.length == 0) {
        this.$toast({
          message: "手机号码不能为空!"
        });
        return;
      }
      if (!checkMobile(this.registerForm.phone)) {
        this.$toast({
          message: "请填写正确的手机号码!"
        });
        return;
      }

      if (!this.count_downing) {
        let parms = {
          phone: this.registerForm.phone,
          aespass: this.aespass,
          type: 1
        };
        getVerifyCode(parms).then(response => {
          if (response.data.state === 1) {
            this.count_downing = true;
            this.count_down = 61;
            this.countDown();
          } else {
            this.$toast({
              message: response.data.msg
            });
          }
        });
      }
    },

    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.registerForm.password === "" ||
        this.checked == false
      ) {
        this.loginshow = false;
        this.loginshowtwo = true;
      } else {
        this.loginshow = true;
        this.loginshowtwo = false;
      }
    },
    submitRegister(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.show = true
          let params = {
            mobile: this.registerForm.phone,
            password: hex_md5(this.registerForm.password),
            code: this.registerForm.code
          };
          register(params).then(response => {
            if (response.data.state === 1) {
              this.show = false
              this.$router.push("/setname");
            } else {
              this.show = false

              this.$toast({
                message: response.data.msg
              });
            }
          }).catch(error => {
            this.show = false
          });
        }
      });
    },

    callPhone() {
      window.location.href = "tel://075586526342";
    },
    // 不能输入中文和字母
    change(val) {

      this.registerForm.phone = val.replace(/[^0-9]+/g, "");
    },
    agree() {
      this.$router.push({ path: "/privacy" });
    },
    agree1() {
      this.$router.push({ path: "/userAgreement" });
    },
    keydown(event){
      if(event.keyCode == 32){
        event.returnValue = false
      }
    }
  },
  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;
        margin-left: 1.85rem;
      }

      .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;
    font-size: 1rem;
  }
  .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;
    font-size: 1rem;
  }
  .problem {
    width: 84%;
    font-size: 0.8125rem;
    margin: 13rem auto 0;
    text-align: center;
    span {
      color: #338afb;
    }
  }
  .agreeBox {
    width: 82%;
    display: flex;
    align-items: center;
    font-size: 0.8125rem;
    margin: 1.25rem auto 0;
    .newColor {
      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;
    margin-left: 0.75rem;
    color: #000;
    // 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;
    color: #000;
  }
  .el-input__prefix {
    font-size: 1.5rem;
    color: #acacac;
  }

  .phoneLine {
    .el-icon-circle-close {
      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;
    font-size: 1rem;
    > 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>
