<!--登录界面-->
<template >
  <div class="login_border" style="width: 650px;height: 300px;">
    <el-container>
      <el-aside><img alt="login" src="../assets/login.png" style="height: 22%;"></el-aside>
      <el-container>
        <el-header style="font-size: x-large;width: 500px;padding-left: 0">欢迎使用"医点通"</el-header>
        <el-main>
<!--          账号密码表单-->
          <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" label-position ="left">
          <el-form-item label="账号" prop="pass"><el-input v-model="id" type="id"/></el-form-item>
          <el-form-item label="密码" prop="checkPass"><el-input v-model="password" type="password" show-password /></el-form-item>
          <el-form-item style="padding-right: 0"><el-button size="small" @click="reg">还未申请账号？立马注册</el-button></el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">登录</el-button>
<!--            登录结果反馈-->
            <div v-if="showError">登录信息有误请检查后重试</div>
          </el-form-item>
        </el-form></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {Position} from "@element-plus/icons-vue";
import request from "@/utils/request";
// import store from "@/store";
export default {
  name: "Login",
  components: {Position},
  methods:{
    // 登录提交账号密码，并将返回的用户数据存储为全局变量
    submitForm(){
      request.post('/login',{status:this.id,msg:this.password}).then(res=>{
        if(res.status=="user"){
          this.$router.replace({path: '/userhome'});
          this.$store.commit('setId',this.id);
          this.$store.commit('setName',res.data.username);
          this.$store.commit('setCode',res.data.password);
          this.$store.commit('setGender',res.data.gender);
          this.$store.commit('setPhonenumber',res.data.phonenumber);
          this.$store.commit('setAddress',res.data.address);
          this.$store.commit('setdoctor',res.data.did)
          // 调用全局变量格式，eg：用户名调用：this.$store.getters.userid
        } else if(res.status=="doctor"){
          //console.log(this.id)
          this.$router.push({
            name: 'doctor',
            params: {
              id: this.id
            }
          })
          //this.$router.replace({path: '/doctor'});
          // this.$store.commit("setId",this.id)
        }else if(res.status=="worker"){
          this.$router.push({
            name:'worker',
            params:{
              id:this.id
            }
          })
          // this.$store.commit("setId",this.id)
        }else {
          this.showError=true
        }
      })
    },
    reg(){
      this.$router.replace({path: '/register'});
    }
  },
  data(){
    return{
      rules:"",
      ruleForm:"",
      id:"",
      password:"",
      showError:false
    }
  }
}
</script>

<style scoped>
building{
  background:url('../assets/bg.png');
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;}

.login_border{
  border-radius: 10px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
</style>