<template>
  <div class="register">
    <!-- <div class="idngrenh">
    <div style="float: right; color: #fff;"  class="nsldgtzh">
      <router-link style=" color: #fff;" class="link-type" :to="'/login'">使用已有账户登录</router-link>
    </div>
    </div> -->
    <div style="width: 50%; height: 100%;" class="inge">
      <img style="width: 477px;margin-top: 100px; "   src="../assets/images/pic_htgl_bt_left.png" alt="">
       <img style="width: 477px; "   src="../assets/images/pic_htgl_left_tp.png" alt="">
    </div>
    <div style="display: flex;justify-content: center;width:50%;">
      <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
        <div style="display: flex;justify-content: center;margin-bottom: 20px;">
          <img style="width: 302px; "   src="../assets/images/pic_htgl_logo.png" alt="">
        </div>
        <el-form-item prop="username">
          <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="联系方式">
            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <!-- <el-form-item prop="password">
          <el-input
            v-model="registerForm.password"
            type="password"
            show-password
            auto-complete="off"
            placeholder="密码"
            @keyup.enter.native="handleRegister"
          >
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input
            v-model="registerForm.confirmPassword"
            type="password"
            auto-complete="off"
            placeholder="确认密码"
            show-password
            @keyup.enter.native="handleRegister"
          >
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item> -->
        <!-- <el-form-item prop="code" v-if="captchaEnabled">
          <el-input
            v-model="registerForm.code"
            auto-complete="off"
            placeholder="验证码"
            style="width: 63%"
            @keyup.enter.native="handleRegister"
          >
            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
          </el-input>
          <div class="register-code">
            <img :src="codeUrl" @click="getCode" class="register-code-img"/>
          </div>
        </el-form-item> -->
        <div class="nkg" >
          <el-form-item  prop="code"  >
            <el-input v-model="registerForm.code"  placeholder="验证码" type="number" >
              <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
            </el-input>

          </el-form-item>
           <p class="sokspan" @click="fasog" v-show="show">
           <span></span>发送验证码
           </p>
           <p class="sokspan"  v-show="!show">
             <span></span>{{count}}秒重新发送
           </p>
        </div>
        <el-form-item style="width:100%;">
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            style="width:100%;"
            @click.native.prevent="handleRegister"
          >
            <span v-if="!loading">注 册</span>
            <span v-else>注 册 中...</span>
          </el-button>
          <div style=" display: flex; justify-content: space-between;align-items: center;">
            <p style="color:red;">密码需要数字 字母和特殊字符 组合</p>
            <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <!--  底部  -->
   <!-- <div class="el-register-footer">
      <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
    </div> -->
  </div>
</template>

<script>
import { getCodeImg, register ,postphone,postphones,getCaptcha} from "@/api/login";

export default {
  name: "Register",
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.registerForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      codeUrl: "",
      count: '',
      registerForm: {
        username: "",
        password: "",
        confirmPassword: "",
        code: "",
        uuid: ""
      },
      registerRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
          { min: 2, max: 20, message: '用户账号长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        // password: [
        //   { required: true, trigger: "blur", message: "请输入您的密码" },
        //   { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }
        // ],
        // confirmPassword: [
        //   { required: true, trigger: "blur", message: "请再次输入您的密码" },
        //   { required: true, validator: equalToPassword, trigger: "blur" }
        // ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      loading: false,
      captchaEnabled: false,
      show:true,
      timecont:60,
      count: '',
      timer: null,
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
        type:1
      },
    };
  },
  created() {
    this.getCode();
  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.registerForm.uuid = res.uuid;
        }
      });
    },
    getCodd(formData){
                if (!this.timer) {
                    this.count = this.timecont;
                    this.show = false;
                    let nhge={phonenumber:this.registerForm.username,type:'2'}
                    postphones(nhge).then(res => {
                      this.$modal.msgSuccess('操作成功');
                    });
                    this.timer = setInterval(() => {
                      if (this.count > 0 && this.count <= this.timecont) {
                        this.count--;
                      } else {
                        this.show = true;
                        clearInterval(this.timer);
                        this.timer = null;
                      }
                    }, 1000)
                  }
            },
    fasog(){

      this.getCodd()

    },
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.registerForm.phonenumber = this.registerForm.username
          this.registerForm.tenantId = ''
          this.registerForm.clientId = 'e5cd7e4891bf95d1d19206ce24a7b32e'
          this.registerForm.grantType = 'password,social'
          this.registerForm.userType = 'pc_user'
          this.registerForm.username = undefined
          register(this.registerForm).then(res => {
            const username = this.registerForm.phonenumber;
            // this.handleLogin(this.registerForm)
            this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
              dangerouslyUseHTMLString: true,
              type: 'success'
            }).then(() => {
              this.$router.push("/login");
              // this.handleLogin(this.registerForm)
            }).catch(() => {});
          }).catch(() => {
            this.loading = false;
            this.$router.push("/login");
            // this.handleLogin(this.registerForm)
          })
        }
      });
    },
    handleLogin(row) {
          this.loading = true;
          console.log(row)
          this.loginForm.username = row.username
          this.loginForm.password = row.password
          this.loginForm.type = 1
          this.loginForm.username == null
          console.log(this.loginForm,1)
          this.$store.dispatch("Login", this.loginForm).then(() => {
            console.log(this.loginForm,1)
            this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          });
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
  .inge{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url("../assets/images/pic_htgl_bg_left.png");
    background-size: cover;
  }
  .nkg{
    border: 1px solid #A7A7A7;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
     background-color: rgba(255,255,255,0.7) !important;
     margin-bottom: 20px;
    .el-input input{
      border: 0 !important;
      background-color: rgba(255,255,255,0.2) !important;
    }
    .sokspan{
      height: 45px;
      line-height: 45px;
      width: 35%;
      text-align: center;
      font-weight: bold;
      font-size: 15px;
      color: #004BF6;
      cursor: pointer;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 20px;
      span{
        height: 15px;
        width: 1px;
        background-color: #C1C1C1;
      }
    }
    .el-form-item{
      margin-bottom: 0 !important;
    }
  }
  .idngrenh{
    width:300px;
    height: 90vh;
    // background: url("../assets/images/pic_ewmsm_bg.png") no-repeat ;
    background-size: cover;
    position: relative;
    .nsldgtzh{
      position: absolute;
      bottom:8px;
      left:30%;
    }
  }
.register {
  display: flex;
  // justify-content: center;
  align-items: center;
  height: 100%;
  // background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}
// .title {
//   margin: 0px auto 30px auto;
//   text-align: center;
//   color: #707070;
// }

.register-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.register-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.register-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.register-code-img {
  height: 38px;
}
</style>
