<template>
  <div class="register">
    <div class="register_hd">
      <div class="register_logo">
        <img :src="config.loginLogoImg">
      </div>
      <div class="register_text">注册</div>
    </div>
    <div class="register_main" :style="bgStyle">
      <div class="register_box">
        <h3>注册账号</h3>
        <el-form ref="registerForm" :model="registerForm" :rules="registerRules">
          <el-form-item class="register_field" prop="username">
            <el-input ref="username" v-model="registerForm.username" type="text" placeholder="账号"></el-input>
          </el-form-item>
          <el-form-item class="register_field" prop="phone">
            <el-input ref="phone" v-model="registerForm.phone" type="text" placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item class="register_field" prop="pw1">
            <el-input ref="pw1" v-model="registerForm.pw1" type="password" placeholder="请输入密码"></el-input>
            <pwStrength class="register_pwStrength" v-model="registerForm.pw1" :minPw="minPw"></pwStrength>
          </el-form-item>
          <el-form-item class="register_field" prop="pw2">
            <el-input ref="pw2" v-model="registerForm.pw2" type="password" placeholder="确认密码"></el-input>
          </el-form-item>
          <el-form-item class="register_field register_row" prop="captcha">
            <el-input ref="captcha" v-model="registerForm.captcha" type="text" placeholder="验证码"></el-input>
            <el-button
              class="register_capbtn"
              :loading="captchaLoading"
              type="primary"
              :disabled="captchaTimer==0?false:true"
              @click="getCaptcha"
            >{{captchaTimer==0?"获取验证码":(captchaTimer+"s后再次获取")}}</el-button>
          </el-form-item>
          <!-- <el-form-item class="register_field" prop="email">
            <el-input ref="email" v-model="registerForm.email" type="text" placeholder="邮箱"></el-input>
          </el-form-item>-->
          <el-button
            class="register_submit"
            :loading="registerLoading"
            type="primary"
            @click="register"
          >立即注册</el-button>
        </el-form>
        <div class="register_tips">
          已有账号，
          <span @click="goLoginPage">马上登录?</span>
        </div>
      </div>
    </div>
    <div class="register_ft">{{config.copyright}}</div>
  </div>
</template>

<script>
import _loginLogoImg from "../assets/Logo1.png"
import _registerBgImg from "../assets/register/bg.png"
import { captcha, register } from "../api/user";
import pwStrength from "../components/pwStrength";
import md5 from "js-md5";
export default {
  name: "register",
  components: {
    pwStrength
  },
  data() {
    return {
      registerForm: {
        phone: "",
        pw1: "",
        pw2: "",
        captcha: "",
        email: ""
      },
      minPw: 4,
      registerRules: {
        username: [{ required: true, message: "请填写账号", trigger: "blur" }],
        phone: [
          { required: true, message: "请填写手机号", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (!/^[1]([3-9])[0-9]{9}$/.test(value)) {
                callback(new Error("请填写正确的手机格式!"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        pw1: [
          { required: true, message: "请填写密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if ((value + "").length < this.minPw) {
                callback(new Error("请输入至少" + this.minPw + "位密码！"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        pw2: [
          { required: true, message: "请再次填写密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value !== this.registerForm.pw1) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        captcha: [{ required: true, message: "请填写验证码", trigger: "blur" }]
        /*email: [
          { required: true, message: "请填写邮箱地址", trigger: "blur" }
        ]*/
      },
      captchaLoading: false,
      registerLoading: false,
      captchaTimer: 0,
      config: {
        title: window.customSysCofig?.loginTitle||"中海创科技",
        loginLogoImg: window.customSysCofig?.loginLogo||_loginLogoImg,
        loginLogoImg_height: window.customSysCofig?.loginLogo_h||56,
        loginLogoImg_width: window.customSysCofig?.loginLogo_w||206,
        registerBgImg: window.customSysCofig?.registerBgImg||_registerBgImg,
        copyright: window.customSysCofig?.copyright||"版权所有 © 2020-2025 中海创科技",
      },
    };
  },
  model: {
    prop: "value",
    event: "valuechange"
  },
  props: {
    value: {
      type: Object
    }
  },
  computed: {
    bgStyle() {
      return {
        "background-image": "url(" + this.config.registerBgImg + ")",
      };
    },
  },
  mounted() {},
  methods: {
    //获取验证码
    getCaptcha() {
      this.$refs.registerForm.validateField("phone", errMsg => {
        if (!errMsg) {
          let me = this;
          me.captchaTimer = 60;
          me.captchaLoading = true;
          captcha({
            phone: me.registerForm.phone
          })
            .then(res => {
              me.captchaLoading = false;
            })
            .catch(err => {
              me.captchaLoading = false;
            });
          let _timer = setInterval(() => {
            --me.captchaTimer;
            if (me.captchaTimer == 0) {
              clearInterval(_timer);
            }
          }, 1000);
        }
      });
    },
    //注册
    register() {
      let me = this;
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          me.registerLoading = true;
          register({
            type: "phone",
            username:me.registerForm.username,
            phone: me.registerForm.phone,
            password: md5(me.registerForm.pw2),
            captcha: me.registerForm.captcha
          })
            .then(res => {
              me.$message({
                message: "注册成功，即将返回登录页",
                type: "success"
              });
              setTimeout(() => {
                this.$router.push("/");
              }, 1000 * 2);
            })
            .catch(err => {
              me.registerLoading = false;
            });
        }
      });
    },
    goLoginPage() {
      this.$router.push("/");
    }
  }
};
</script>
<style lang="scss" scoped>
@function px2vw($px) {
    @return ($px / 1920) * 100vw;
}
$headH: px2vw(130);
$footH: px2vw(172);
.register {
  height: 100%;
  overflow: hidden;
  .register_hd {
    height: $headH;
    display: flex;
    align-items: center;
    padding-top: px2vw(30);
    padding-left: px2vw(15);
    .register_logo {
      width: px2vw(236);
      height: px2vw(56);
      margin-right: px2vw(20);
      img {
        height: 100%;
        width: 100%;
      }
    }
    .register_text {
      font-size: px2vw(22);
      color: #333;
      position: relative;
      padding-left: px2vw(32);
      &:after {
        content: "";
        display: block;
        height: px2vw(40);
        width: px2vw(1);
        background-color: #7ecef4;
        position: absolute;
        top: 0;
        left: px2vw(10);
        bottom: 0;
        margin: auto;
      }
    }
  }
  .register_main {
    height: calc(100% - #{$headH} - #{$footH});
    position: relative;
    background: url("../assets/register/bg.png") no-repeat center center;
    background-size: cover;
    .register_box {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      width: px2vw(1200);
      height: px2vw(655);
      border-radius: px2vw(3);
      background-color: #fff;
      padding: 0 px2vw(360) px2vw(40);
      h3 {
        text-align: center;
        line-height: px2vw(100);
        font-size: px2vw(24);
        color: #333;
        font-weight: bold;
      }
      .register_field {
        margin-bottom: px2vw(22);
        line-height: px2vw(48);
        ::v-deep.el-input__inner {
          line-height: px2vw(48);
          height: px2vw(48);
        }
        ::v-deep.el-form-item__content{
          line-height: px2vw(50);
          font-size: px2vw(14);
        }
        ::v-deep.el-form-item__error{
          padding-top: px2vw(4);
        }
        .register_pwStrength {
          margin-top: px2vw(10);
        }
        &.register_row {
          ::v-deep.el-form-item__content {
            display: flex;
            align-items: center;
          }
        }
      }
      .register_capbtn {
        width: px2vw(200);
        height: px2vw(48);
        line-height: px2vw(48);
        padding: 0;
      }
      .register_submit {
        height: px2vw(48);
        line-height: px2vw(48);
        padding-top: 0;
        width: 100%;
        margin-top: px2vw(10);
      }
      .register_tips {
        padding-top: px2vw(20);
        span {
          color: #3486d2;
          cursor: pointer;
        }
      }
    }
  }
  .register_ft {
    height: $footH;
    line-height: $footH;
    background-color: #e8f1fa;
    text-align: center;
    font-size: px2vw(16);
    color: #999;
    border-top: px2vw(1) solid #ccc;
    border-bottom: px2vw(1) solid #ccc;
  }
}
</style>