<template>
  <div class="main-container">
    <div class="title-container">
      
    </div>
    <div class="title">
      <p style="font-size:24px;letter-spacing: 0.6ch;margin-bottom:32px;">费县时空大数据平台</p>
      <!-- <p style="font-size:14px;margin-top:22px;font-family:'Poppins',sans-serif;margin-bottom:32px;">Welcome to Fei Xian spatiotemporal big data platform</p> -->
      <router-link :to="{path:'/'}">
        <span style="padding:8px 32px;border:1px solid #fff;margin-top:48px;border-radius:8px;" >
          <img src="/public/images/home.png" style="width:20px;position:relative;top:3px;left:-6px;" alt="">
          首页
        </span>
      </router-link>
    </div>
    <div class="login-form">
      <p style="text-align:center;font-size:18px;color:#666;font-weight:bold;line-height:50px;margin-bottom:42px;">
        <el-button type="primary" icon="Iphone" style="position:relative;top:-3px;left:-12px;" circle></el-button>
        手机号码注册
      </p>
      <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" icon="Iphone">
              <el-icon><Iphone /></el-icon>
            </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="" >
          <!-- <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:'/'}">
            <el-link style="float:right;z-index:9999;" 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>
  </div>
</template>
<script>
import { postMethodCommon } from '../../api/common'
  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: {
        },
        
        rules: {
           name: [
            { required: true, message: '请输入用户名称', trigger: 'blur' },
          ],
          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位' },
            // 密码为数字，小写字母，大写字母，特殊符号 至少包含三种，长度为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) {
            this.retister();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      retister(){
        let formData = {
          account:this.ruleForm.phone,
          password:this.ruleForm.password,
          name:this.ruleForm.name,
          "county": "",
          "street": "",
          "neighborhoodCommittee": "",
          "countyid": "",
          "streetid": ""
        }
        console.log(formData);
        postMethodCommon("/Users/Register",formData).then(res=>{
          if(res.code == 200){
            this.$message.success("注册成功，请登录!");
            this.$router.push("/");
          }
        }).catch(error=>{
          this.$message.error("注册失败，手机号已注册！");
        })
      }
    }
  }
</script>
<style scoped>
.main-container{
  width:100vw;
  height:100vh;
  background:#fff;
}
.title-container{
  content: "";
  position: absolute;
  height: 2000px;
  width: 2000px;
  top: -10%;
  right: 48%;
  transform: translateY(-50%);
  background-image: linear-gradient(-45deg,#4481eb 0,#04befe 100%);
  transition: 1.8s ease-in-out;
  border-radius: 50%;
  z-index: 6;
  color:#fff;
}
.title{
  width:50vw;
  text-align: center;
  z-index:999;
  position:absolute;
  top:30%;
  left:0px;
  color:#fff;
}
.login-form{
  width:400px;
  height:500px;
  position:absolute;
  top: calc(50vh - 250px);
  z-index:9999999;
  left: calc(50vw + 190px);

}
::v-deep .el-input__inner{
  background:#f5f5f5;
  border:0px;
  border-radius: 16px;
}
::v-deep .el-form-item__content{
  text-align: left;
}
</style>