<template>
    <div class="login">
        <div class="top_div"></div>
        <div class="login_ct">
          <div class="topImg"></div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="small" class="demo-ruleForm">
                <el-form-item  prop="userName">
                    <el-input v-model="ruleForm.userName" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item  prop="password">
                     <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item  prop="password2">
                     <el-input v-model="ruleForm.password2" type="password" placeholder="确认密码"></el-input>
                </el-form-item>
                <el-form-item  prop="name">
                    <el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item  prop="cardId">
                    <el-input v-model="ruleForm.cardId" placeholder="请输入身份证号"></el-input>
                </el-form-item>
                <el-form-item  prop="code">
                  <el-row>
                    <el-col :span="16">
                      <el-input v-model="ruleForm.code" placeholder="输入验证码"></el-input>
                    </el-col>
                    <el-col :span="8">
                      <div class="code">1</div>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item>
                      <el-checkbox v-model="checked"></el-checkbox>
                      <div class="login_text">
                          我接受 <a>《武汉壹玖之家网络科技有限公司用户注册协议》</a>及 <a>《武汉壹玖之家网络科技有限公司隐私政策》</a>
                      </div>
                </el-form-item>
             </el-form>
             <div class="login_btn">
                <el-link size="small" type="text" @click="goPage('/home')">返回首页</el-link>
                <div class="right">
                    <el-link size="small" type="info" @click="register">登录</el-link>
                    <el-button size="small" type="primary" @click="login('ruleForm')">注册</el-button>
                </div>
             </div>
        </div>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          userName: '',
          password: '',
          password2: '',
          name: '',
          cardId: '',
          code: ''
        },
        rules: {
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          password2: [
            { required: true, message: '请确认密码', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入真实姓名', trigger: 'blur' }
          ],
          cardId: [
            { required: true, message: '请输入身份证号', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '请输入验证码', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      login(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$message('人工审核中');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      goPage(path) {
          if(path) {
             this.$router.push(path);
          }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    }
  }
</script>
<style scoped lang="scss">
    .login {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      .top_div{
        height: 50%;
        width: 100%;
        background: #008ead;
      }
      .login_ct{
        width: 400px;
        margin: -100px auto 0;
        background: #fff;
        padding: 40px 0 0;
        border: 1px solid #e7e7e7;
        position: relative;
        .topImg{
          width: 92px;
          height: 97px;
          background: url('../../assets/img/login.png');
          position: absolute;
          top: -85px;
          margin-left: 152.5px;
        }
        .el-form{
          padding: 0 40px;
          .code{
            width: 90%;
            float: right;
            height: 30px;
            vertical-align: middle;
            border-radius: 5px;
            border: 1px solid #d3d3d3;
            background: #F2FBFE;
            text-align: center;
            line-height: 30px;
            font-weight: bold;
          }
          .login_text{
              font-size: 12px;
              line-height: 20px;
              display: inline-block;
              a{
                  color: #409EFF;
                  font-size: 12px;
                  cursor: pointer;
              }
          }
        }
        .login_btn {
          height: 50px;
          margin-top: 40px;
          border-top: 1px solid #e7e7e7;
          line-height: 50px;
          padding: 0 40px;
          
          .right{
            float: right;
            button{
                margin: 0 10px;
            }
          }
        }
      }
    }
</style>
