<template>
  <div class="rigister-container">
    
    <div class="register-form">
      <h1 style="position:absolute;top:-100px;text-align:center;width:100%;color:#333;word-space:12px;">城市信息模型平台账号注册</h1>
      <el-card class="box-card">
        <div slot="header" class="clearfix" style="height:100px;">
          <h3 style="text-align:center;font-size:18px;color:#000;line-height:50px;">
            <el-button type="primary" icon="el-icon-mobile-phone" style="position:relative;top:-3px;left:-12px;" circle></el-button>
            手机号码注册
          </h3>
        </div>
        <div class="form-container">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" label-position="top">
              <el-form-item label="" prop="name">
                <el-input v-model="ruleForm.name" placeholder="用户名称">
                  <i slot="prefix" class="el-input__icon el-icon-user"></i>
                </el-input>
              </el-form-item>

              <el-form-item label="" prop="phone">
                <el-input v-model="ruleForm.phone" placeholder="手机号码">
                  <i slot="prefix" class="el-input__icon el-icon-mobile-phone"></i>
                </el-input>
              </el-form-item>
            
              <el-form-item label="" prop="password">
                <el-input v-model="ruleForm.password" type="password" placeholder="登录密码" show-password>
                  <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="repassword">
                <el-input v-model="ruleForm.repassword" type="password" placeholder="登录密码确认" show-password>
                  <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="agreement">
                <el-checkbox v-model="ruleForm.agreement" >
                    我已阅读并同意<el-link  type="primary" :underline="false">服务协议</el-link>&nbsp;和&nbsp;<el-link  type="primary" :underline="false">隐私声明</el-link>
                </el-checkbox>
                <router-link :to="{path:'/login'}">
                  <el-link style="float:right;" type="primary" :underline="false">登录已有账号 >></el-link>
                </router-link>
              
              </el-form-item>
              <el-form-item>
                <el-button type="primary"  style="width:100%;" @click="submitForm('ruleForm')">立 即 注 册</el-button>
              </el-form-item>
            </el-form>
        </div>
      </el-card>
     
    </div>
     <p style="width:100%;text-align: center;color:#fff;position:absolute;bottom:24px;">技术支持：山东慧创信息科技有限公司</p>
  </div>
</template>
<script>
  export default {
    data() {
      var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
      return {
        checked:false,
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        
        rules: {
          phone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' },
            { min: 11, max:11, message: '手机号码输入错误', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入登录密码', trigger: 'change' },
            {pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,30}$/, message: '密码为数字，小写字母，大写字母，特殊符号 至少包含三种，长度为 8 - 30位，（判断的时候不区分大小写)' },
          ],
          repassword: [
           { required: true, validator: validatePass2, trigger: 'blur' }
          ],
          agreement:[
            { required: true, message: '请勾选同意协议内容', trigger: 'blur' },
            {pattern:/true/,message: '请勾选同意协议内容', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
<style scoped>
::v-deep .el-card__header{
  height:80px;
  padding:0px;
}
::v-deep .el-form-item__content{
 margin-bottom:12px;
}
.rigister-container{
  width:100vw;
  height:100vh;
  background:#f5f6f7;
  background: url('~@/assets/login/login-bg.jpg');
  background-size:100% 100%;
  background-repeat: no-repeat;
}
.register-form{
  width:1000px;
  height:500px;
  background:#ffffff;
   position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
}
.form-container{
  width:400px;
  margin:40px auto 60px auto;

}
</style>>