<template>
  <div class="page-container researchGroupManage-listInfoPage">
    <div class="page-top-title-box">
      <p class="page-top-title-name-p">成员详情</p>
      <p class="page-top-title-out-p" @click="backPage">返回</p>
    </div>
    <div class="content-box scrollbar-box">
      <div class="left-content-box">
        <img v-if="!userData.avatar" src="@/assets/ZDimages/basicsModules/tx_cion_one.png" alt="">
        <img v-else :src="userData.avatar" alt="">
      </div>
      <div class="right-content-box">
        <div class="form-box">
          <div class="form-min-box">
            <p>姓名:</p>
            <p>{{userData.userName}}</p>
          </div>
          <div class="form-min-box">
            <p>性别:</p>
            <p>{{userData.sex == 0?'男':'女'}}</p>
          </div>
          <div class="form-min-box">
            <p>出生日期:</p>
            <p>{{userData.birthday?userData.birthday:'--'}}</p>
          </div>
        </div>
        <div class="form-box">
          <div class="form-min-box">
            <p>所属部门:</p>
            <p>{{userData.deptName?userData.deptName:'--'}}</p>
          </div>
          <div class="form-min-box">
            <p>身份:</p>
            <p>{{userData.positionName?userData.positionName:'--'}}</p>
          </div>
          <div class="form-min-box">
            <p>手机号码:</p>
            <p>{{userData.mobile?userData.mobile:'--'}}</p>
          </div>
        </div>
        <div class="form-box">
          <div class="form-min-box" v-if="userData.userType == 1">
            <p>职称:</p>
            <p>{{userData.categoryName?userData.categoryName:'--'}}</p>
          </div>
          <div class="form-min-box" v-if="userData.userType == 1">
            <p>文化程度:</p>
            <p>{{userData.educationName?userData.educationName:'--'}}</p>
          </div>
          <div class="form-min-box" v-if="userData.userType == 2">
            <p>专业:</p>
            <p>{{userData.majorName?userData.majorName:'--'}}</p>
          </div>
          <div class="form-min-box" v-if="userData.userType == 2">
            <p>班级:</p>
            <p>{{userData.gradeName?userData.gradeName:'--'}}</p>
          </div>
          <div class="form-min-box">
            <p>邮箱:</p>
            <p>{{userData.email?userData.email:'--'}}</p>
          </div>
        </div>
        <div class="form-box">
          <div class="form-min-box">
            <p>{{userData.userType == 1?'工号':'学号'}}:</p>
            <p>{{userData.account?userData.account:'--'}}</p>
          </div>
          <div class="form-min-box">
            <p>校园卡号:</p>
            <p>{{userData.cardNum?userData.cardNum:'--'}}</p>
          </div>
        </div>
        <div class="form-box">
          <div class="form-big-box">
            <p>所属课题组:</p>
            <p>{{propsData.topicName?propsData.topicName:'--'}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { systemUserDetail } from "@/api/commonality/permission";
  import { getDicts } from "@/api/commonality/noPermission";
  import { systemUserMajorSelect } from "@/api/commonality/permission";
  export default {
    name: 'listInfoPage',
    props:{
      infoPropsData:{},
      propsData:{},
    },
    data(){
      return{
        userData:{},
      }
    },
    created(){
      this.systemUserDetail();
    },
    mounted(){

    },
    methods:{
      //获取职位学历
      getDicts(obj){
        let self = this;
        getDicts('professional').then(response => {
          for(let i=0;i<response.data.length;i++){
            if(response.data[i].value == obj.category){
              self.$set(self.userData,'categoryName',response.data[i].label);
            }
          }
        });
        getDicts('education').then(response => {
          for(let i=0;i<response.data.length;i++){
            if(response.data[i].value == obj.education){
              self.$set(self.userData,'educationName',response.data[i].label);
            }
          }
        });
      },
      //获取专业/班级
      systemUserMajorSelect(obj){
        let self = this;
        //专业
        systemUserMajorSelect({type:1,referId:this.userData.deptId}).then(response => {
          for(let i=0;i<response.data.length;i++){
            if(response.data[i].id == obj.major){
              self.$set(self.userData,'majorName',response.data[i].name);
            }
          }
        });
        //班级
        systemUserMajorSelect({type:2,referId:this.userData.major}).then(response => {
          for(let i=0;i<response.data.length;i++){
            if(response.data[i].id == obj.grade){
              self.$set(self.userData,'gradeName',response.data[i].name);
            }
          }
        });
      },
      //获取人员详情
      systemUserDetail(){
        let self = this;
        systemUserDetail({userId:this.infoPropsData.userId}).then(response => {
          response.data.mobile = response.data.mobile.substr(0, 3) + '****' + response.data.mobile.substr(7, 11);
          this.$set(this,'userData',response.data);
          if(response.data.userType == 1){
            self.getDicts(response.data);
          }else{
            self.systemUserMajorSelect(response.data);
          }
        });
      },
      // 返回按钮
      backPage(){
        this.$parent.tableButton(3);
      },
    },
  }
</script>

<style scoped lang="scss">
  .researchGroupManage-listInfoPage{
    .content-box{
      flex:1;
      display: flex;
      .left-content-box{
        img{
          width:100px;
          height:120px;
          margin:42px 10px 0 80px;
        }
      }
      .right-content-box{
        padding-top:42px;
        .form-box{
          display: flex;
          .form-min-box{
            display: flex;
            margin-bottom:20px;
            p{
              font-size:16px;
            }
            p:nth-child(1){
              width:174px;
              text-align: right;
              margin-right:14px;
              line-height:40px;
            }
            p:nth-child(2){
              border-radius:4px;
              width:250px;
              padding:0 13px;
              height:40px;
              line-height:40px;
              background-color: #F5F5F5;
              display:block;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
          }
          .form-big-box{
            display: flex;
            margin-bottom:20px;
            p{
              font-size:16px;
            }
            p:nth-child(1){
              width:174px;
              text-align: right;
              margin-right:14px;
              line-height:40px;
            }
            p:nth-child(2){
              border-radius:4px;
              width:688px;
              padding:0 13px;
              height:40px;
              line-height:40px;
              background-color: #F5F5F5;
              display:block;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
          }
        }
      }
    }
  }
</style>
