<template>
  <div class="login-container">
    <div class="textTitle">
      <h3 class="toptitle">UDI协调平台</h3>
      <h3 class="topSubtitle">UDI监管系统</h3>
    </div>
    <el-form
      class="card-box login-form"
      autocomplete="on"
      :model="inputQuery"
      :rules="rules"
      ref="inputQuery"
      label-position="left"
    >
      <el-card class="box-card">
        <div style="text-align: center; margin-top: 10px">
          <img alt="element-logo" src="@/assets/logo/logo.png" />
        </div>
        <h3 class="title">用户注册</h3>
        <el-form-item prop="mobile" class="item" style="margin-top: -20px">

          <el-input
            size="small"
            placeholder="请输入手机号"
            v-model="inputQuery.mobile"
            @input="change()"
          ></el-input>
          <el-button
            type="primary"
            size="small"
            icon="search"
            :disabled="isTimer"
            style="margin-top: 0.5px"
            @click="getCheckCode"
          >
            <span>{{ btnTitle }}</span>
          </el-button>
        </el-form-item>
        <el-form-item prop="password" class="item">
          <el-input
            size="small"
            placeholder="请输入手机验证码"
            v-model="inputQuery.checkCode"
            @input="change()"
          ></el-input>
        </el-form-item>
        <el-form-item
          prop="verificationCode"
          class="item"
          style="background-color: white"
        >
          <!--<Verify-->
          <!--  ref="checkV"-->
          <!--  :showButton="false"-->
          <!--  :barSize="{ width: '305px', height: '37px' }"-->
          <!--  :vOffset="5"-->
          <!--  @success="verifyAlert('success')"-->
          <!--  @error="verifyAlert('error')"-->
          <!--  :type="3"-->
          <!--&gt;</Verify>-->
        </el-form-item>
        <div style="text-align: center; margin-top: 15px">
          <el-button
            type="primary"
            style="width: 60%; margin-bottom: 30px"
            :loading="loading"
            @click.native="handleLogin()"
            >注册
          </el-button>

        </div>
      </el-card>
    </el-form>

    <div
      style="
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 12px;
        color: white;
      "
    >
      开发单位：厦门高立新鹏软件科技有限公司 技术支持：13459286066
    </div>
  </div>
</template>

<script>
import Verify from "vue2-verify";
import axios from "axios";
import Cookies from "js-cookie";
import { decrypt, encrypt } from "@/utils/jsencrypt";
import {checkCode,getCheckcode,encrypts} from "@/api/login";

export default {
  data() {
    //输入正确的手机号码格式
    const validatePhone = (rule, value, callback) => {
      if (/^1[3-9]\d{9}$/.test(value) === false) {
        callback(new Error("请输入正确的电话号码"));
      } else {
        // 校验通过
        callback();
      }
    };
    return {
      yzm:"",
      jmobile:"",
      inputQuery :{
        mobile : "",
        checkCode : "",
      },
      rules: {
        tel: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          { validator: validatePhone, trigger: "blur" },
          // { pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入正确的电话号码", trigger: "blur" }
        ],
        checkCode: [
          { required: true, message: "请输入手机验证码", trigger: "blur" },
        ],
      },
      isTimer: false,
      btnTitle: "获取验证码",
    };
  },


    methods: {
    handleLogin(){
      checkCode(this.inputQuery).then( (res) => {
        if(res.code == 20000 ){
          //加密验证码
           this.jmobile=res.data;

          let param={
            mobile:this.jmobile,
            captcha:this.yzm,
            key:"key",
          }
          encrypts(param).then((res)=>{
            if(res.code == 20000){
              //跳转到完善信息页面
              this.$router.push({path: "/improveInfo",query:{mobile:res.data.mobile,captcha:res.data.captcha}});

            }else{
              this.$message.error(res.message)
            }
          })
        }else{
          this.$message.error(res.message);
        }
      })

    },


    getCheckCode() {
      let tquery = {
        mobile: this.inputQuery.mobile,
      };
      getCheckcode(tquery).then((response) => {
        if (response.code === 20000) {
          this.yzm=response.data;
          this.validateBtn();
        } else {
          this.$message.error(response.message);
        }
      });
    },

    validateBtn() {
      //倒计时
      let time = 60;
      let timer = setInterval(() => {
        if (time === 0) {
          clearInterval(timer);
          this.isTimer = false;
          this.btnTitle = "获取验证码";
        } else {
          this.btnTitle = time + "秒后重试";
          this.isTimer = true;
          time--;
        }
      }, 1000);
    },





  },
  components: {
    Verify,
  },
  created() {


  },
};
</script>

<style type="text/scss" lang="scss">
@import "../assets/styles/mixin";

$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-container {
  @include relative;
  background-color: white;
  background-image: url("../assets/login.jpg");
  background-size: 100vw 100vh;
  height: 100%;
  overflow: hidden;
  display: flex;

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
  }

  .item {
    width: 20em;
    margin-left: 5em;

    .el-form-item__content {
      display: flex;
      flex-flow: row;
    }
  }

  input {
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    border-radius: 0;
    padding: 0.46rem 0.0666rem 0.16rem 0.2rem;
    color: $dark_gray;
    height: 100%;
  }

  .el-input {
    display: inline-block;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 0.13333rem;
  }

  .svg-container {
    padding: 0.08rem 0.0666rem 0.08rem 0.2rem;
    color: $dark_gray;
    vertical-align: middle;
    display: inline-block;

    &_login {
      font-size: 20px;
    }
  }

  .title {
    font-size: 26px;
    color: #2d3a4b;
    margin: 0 auto 0.5333rem auto;
    text-align: center;
    font-weight: bold;
    margin-bottom: 50px;
  }
  .textTitle {
    width: 50%;
    font-size: 45px;
  }

  .toptitle {
    color: #ffffff;
    text-align: center;
    margin-top: 132px;
    margin-bottom: -10px;
  }
  .topSubtitle {
    color: #fcd38b;
    text-align: center;
  }

  .login-form {
    //@include fxied-center;
    margin: 0px 100px auto auto;
    width: 50em;
    /*background-color: silver;*/
    /*background: #fff;*/
    padding: 10em 10em 15em 10em;
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0.0666rem;
    color: #454545;
  }

  .show-pwd {
    position: absolute;
    right: 0.1333rem;
    top: 0.09333rem;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
  }

  .thirdparty-button {
    /*position: absolute;*/
    /*right: .4666rem;*/
    /*bottom: .37333rem;*/
  }

  .box-card {
    margin-top: -20px;
    height: 550px;
    width: 490px;
  }
}
</style>
