<!--社区工作者注册模块-->
<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>
      <el-icon></el-icon>
      <el-input placeholder="请输入用户名" class="form-input" v-model="username" @input="change($event)"></el-input>
      <div class="div"><h3>密码：</h3></div>
      <el-icon></el-icon>
      <el-input  type="password" show-password placeholder="请输入密码" class="form-input" v-model="password" @input="change($event)"></el-input>
      <div class="div"><h3>确认密码：</h3></div>
      <el-icon></el-icon>
      <el-input  type="password" show-password placeholder="请确认密码" class="form-input" v-model="confirm" @input="change($event)"></el-input>
      <div class="div"><h3>手机号：</h3></div>
      <el-icon></el-icon>
      <el-input placeholder="请输入手机号" class="form-input" v-model="phonenumber" @input="change($event)"></el-input>
      <div class="div"><h3>身份证号：</h3></div>
      <el-icon></el-icon>
      <el-input placeholder="请输入身份证号" class="form-input" v-model="userid" @input="change($event)"></el-input>
      <div class="div"><h3>社区名：</h3></div>
      <el-icon></el-icon>
      <el-input placeholder="请输入社区名" class="form-input" v-model="communityname" @input="change($event)"></el-input
      >
      <div style="display: flex">
        <el-upload
            class="upload-demo"
            action=""
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
        >
          <el-button type="primary">上传工作证照片</el-button>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500KB.
            </div>
          </template>
        </el-upload>
      </div>
      <div>
        <el-button plain="true" @click="submitReg">确认注册</el-button></div>
    </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";
export default {
  name: "ReWorker",
  data(){
    return{
      username: " ",
      password: "",
      confirm: "",
      phonenumber: "",
      userid: "",
      communityname:"",
      fault:false
    }

  },
  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('/regWorker',{
        //userid, username, password, phonenumber, communityname
        username:this.username,password:this.password,phonenumber:this.phonenumber,userid:this.userid,communityname:this.communityname}).
      then(res=>{if(res.status!="success"){
        ElMessage(res.msg);
      }else {
        // request.post('/uploadImg',{userid:this.userid,file:formData});
        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>
