<!--用户页面头模块-->
<template>
  <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #ccc;display: flex">
    <div style="width: 200px;padding-left: 30px;font-weight: bold;color: #3898EC">后台管理</div>
    <div style="flex: 1"></div>
<!--    下拉框显示退出与个人信息编辑-->
    <div style="width: 100px">
      <el-dropdown>
<!--        用户名标注-->
        <span class="el-dropdown-link"><br>{{usernameOnheader}}</span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="showInfo">个人信息</el-dropdown-item>
            <el-dropdown-item >
              <el-popconfirm title="确定要退出系统吗" @confirm="quit">
              <template #reference>退出系统</template>
              </el-popconfirm>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      </div>
  </div>
<!--  对话框显示个人信息-->
  <el-dialog width="30%" v-model="showselfInfo">
    <el-form model="InfoForm" label-width="120px">
      <el-form-item label="姓名" ><el-input v-model="username" /></el-form-item>
      <el-form-item label="性别"><el-input v-model="genderTag" disabled/></el-form-item>
      <el-form-item label="身份证"><el-input v-model="userid" disabled/></el-form-item>
      <el-form-item label="联系电话"><el-input type="textarea" v-model="phonenumber" /></el-form-item>
      <el-form-item label="家庭住址"><el-input type="textarea" v-model="address" /></el-form-item>
      <el-form-item label="密码"><el-input type="textarea" v-model="code"/></el-form-item>
    </el-form>
    <template #footer >
      <span class="dialog-footer">
        <el-button @click="showselfInfo=false">取消</el-button>
        <el-button type="primary" @click="save">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import request from "@/utils/request";
export default {
  methods:{
    //切换路由实现退出
    quit(){
      this.$router.replace({path: '/'});
    },
    //保存信息修改并更新全局变量
    save(){
      request.post('/user/updateUser',{userid:this.userid,username:this.username,
        gender:false,address:this.address,phonenumber:this.phonenumber,password:this.code}).then(res=>{
        this.$store.commit('setCode',this.code);
        this.$store.commit('setPhonenumber',this.phonenumber);
        this.$store.commit('setAddress',this.address);
        this.$store.commit('setName',this.username);
        this.usernameOnheader=this.username
        this.showselfInfo=false;
      })
    },
    //展示个人信息页
    showInfo(){
      this.username=this.$store.getters.username;
      this.gender=this.$store.getters.gender;
      this.userid=this.$store.getters.userid;
      this.phonenumber=this.$store.getters.phonenumber;
      this.address=this.$store.getters.address;
      this.code=this.$store.getters.code;
      if(this.gender==false){
        this.genderTag='女'
      }else {
        this.genderTag='男'
      };
      this.showselfInfo=true;
    }
  },
  data(){
    return{
      //整体标签与展示
      showselfInfo:false,
      usernameOnheader:this.$store.getters.username,
      //个人信息
      gender:false,
      userid:"",
      phonenumber:"",
      address:"",
      code:"",
      username:"",
      genderTag:"",
      //表单呈现相关
      InfoForm:{}
    }
  },
  name: "Header"
}
</script>
