<!--用户注册模块-->
<template>
<div class="ReMain" style="display: flex;border-top: blue;border-top-style: solid">
  <div class="box-for-user" style="padding-left: 100px; padding-right: 0px;min: calc(100vh-50px)">
    <div class="div"><h3>用户名：</h3></div>
    <div style="height: 15px"></div>
    <el-input placeholder="请输入用户名" class="form-input" v-model="username" @input="change($event)"></el-input>
    <div class="div"><h3>密码：</h3></div>
    <div style="height: 15px"></div>
    <el-input  type="password" show-password placeholder="请输入密码" class="form-input" v-model="password" @input="change($event)"></el-input>
    <div class="div"><h3>确认密码：</h3></div>
    <div style="height: 15px"></div>
    <el-input  type="password" show-password placeholder="请确认密码" class="form-input" v-model="confirm" @input="change($event)"></el-input>
    <div class="div"><h3>手机号：</h3></div>
    <div style="height: 15px"></div>
    <el-input placeholder="请输入手机号" class="form-input" v-model="phonenumber" @input="change($event)"></el-input>
    <div class="div"><h3>身份证号：</h3></div>
    <div style="height: 15px"></div>
    <el-input placeholder="请输入身份证号" class="form-input" v-model="userid" @input="change($event)"></el-input>
    <div class="div"><h3>地址：</h3></div>
    <div style="height: 15px"></div>
    <el-input placeholder="请输入地址" class="form-input" v-model="address" @input="change($event)"></el-input>
    <div>
      <el-radio v-model="gender" label='1' size="large">男</el-radio>
      <el-radio v-model="gender" label='0' size="large">女</el-radio>
    </div>
        <el-button plain="true" @click="submitReg">确认注册</el-button>
  </div>
  <div style="flex: 1"></div>
  <div class="image" style="padding-left: 100px; padding-right: 50px">
    <el-image src='https://s.cn.bing.net/th?id=OIP-C.Ra20o1vEX0BmVk9kx-lbngHaFd&w=290&h=214&c=8&rs=1&qlt=90&o=6&dpr=1.38&pid=3.1&rm=2' fit="contain"></el-image>
  </div>
</div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'

import request from "@/utils/request";
import { ref } from 'vue'

const gender = ref('1')
export default {

  name: "ReUser",
  data(){
      return {
        username: " ",
        password: "",
        confirm: "",
        phonenumber: "",
        userid: "",
        address: "",
        gender:""
      }},
  methods: {
    change(e) {
      this.$forceUpdate()
    },
    doctor:function (){
      this.$router.replace({path: '/doctor'});
    },
    user:function (){
      this.$router.replace({path: '/user'});
    },
    worker:function (){
      this.$router.replace({path: '/worker'});
    },
    submitReg(){

      if(this.password == this.confirm){request.post('/regUser',{
        userid:this.userid,username:this.username,password:this.password,phonenumber:this.phonenumber,address:this.address,gender:parseInt(this.gender)}).
      then(res=>{if(res.status!="success"){
        ElMessage(res.msg);
      }else {
        this.$router.replace({path: '/'});
      }})
      }
      else {
        ElMessage("前后密码不一致，请检查");
      }
    }
  },
  components: { "form-input": async () => FormInput }
}
</script>
<style scoped>
.box-for-user {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 600px;
}
.image{
  height: 800px;
}
.div {
  margin-top: 10px;
  height: 30px;
  margin-left: 10px;
}
.form-input {
  margin-top: 10px;
  height: 50px;
  margin-left: 10px;
  margin-right: 20px;
}
</style>
