<template>
  <div>
    <!--    头部-->
    <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #ccc;display: flex">
      <div style="flex: 1">欢迎注册医点通用户</div>
      <div style="width: 100px">
        <el-dropdown>
          <span class="el-dropdown-link"><br>选择注册身份<el-icon class="el-icon--right"></el-icon></span>
            <template #dropdown>
<!--            根据选择进入不同注册信息表单填写-->
              <el-dropdown-menu v-model="regStatus">
                <el-dropdown-item @click="regU">普通病人</el-dropdown-item>
                <el-dropdown-item @click="regW">社区工作者</el-dropdown-item>
                <el-dropdown-item @click="regD">医生</el-dropdown-item>
              </el-dropdown-menu>
            </template>
        </el-dropdown>
      </div>
      <div style="width: 100px">
        <el-dropdown>
          <span class="el-dropdown-link"><br>更多操作<el-icon class="el-icon--right"></el-icon></span>
<!--          功能跳转下拉框-->
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="reReg">重新注册</el-dropdown-item>
              <el-dropdown-item @click="back">返回登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!-- 注册页面-->
    <div style="display: flex">
      <RegisterforWorker v-if="WorkerVisible"/>
      <RegisterforUser v-if="UserVisible"/>
      <RegisterforDoctor v-if="DVisible"/>
    </div>
  </div>
</template>

<script>
import RegisterforDoctor from "@/components/RegisterforDoctor";
import RegisterforUser from "@/components/RegisterforUser";
import RegisterforWorker from "@/components/RegisterforWorker";
export default {
  name: "Register",
  components:{
    RegisterforDoctor,
    RegisterforUser,
    RegisterforWorker
  },
  data(){
    return {
      DVisible:false,
      WorkerVisible:false,
      UserVisible:false,
      regStatus:""
  }},
  methods:{
    regD(){
      this.regStatus="Doctor";
      this.UserVisible=false;
      this.WorkerVisible=false;
      this.DVisible=true;
    },
    regU(){
      this.regStatus="User";
      this.UserVisible=true;
      this.WorkerVisible=false;
      this.DVisible=false;
    },
    regW(){
      this.regStatus="Worker";
      this.UserVisible=false;
      this.WorkerVisible=true;
      this.DVisible=false;
    },
    back(){
      this.$router.replace({path: '/'});
    },
    reReg(){
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>

<style scoped>

</style>