<template>
  <div class="basic-info">
    <div class="info-container">
      <el-descriptions :column="3" border class="info-content">
        <el-descriptions-item label="用户名">{{ person.userName }}</el-descriptions-item>
        <el-descriptions-item label="用户姓名">{{ person.nickName }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{ person.cardId }}</el-descriptions-item>
        <el-descriptions-item label="性别">
          <dict-tag :options="dict.type.sys_user_sex" :value="person.sex"/>
        </el-descriptions-item>
        <el-descriptions-item label="手机号码">{{ person.phonenumber }}</el-descriptions-item>
        <el-descriptions-item label="座机号码">{{ person.telphonenumber }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ person.email }}</el-descriptions-item>
        
        <el-descriptions-item label="党员">{{ person.partyMember === '1' ? '是' : '否' }}</el-descriptions-item>
        <el-descriptions-item label="运维平台">{{ person.operationPlat }}</el-descriptions-item>
        <el-descriptions-item label="平台账号">{{ person.operationPlatAccount }}</el-descriptions-item>
        <el-descriptions-item label="驻场开始日期">{{ parseTime(person.siteBeginDate,'{y}-{m}-{d}') }}</el-descriptions-item>
        <el-descriptions-item label="驻场截止日期">{{ parseTime(person.siteEndDate,'{y}-{m}-{d}') }}</el-descriptions-item>
        <el-descriptions-item label="最高学历">
          <div  @click="preview(person.highestQualificationAttachment)">
            <dict-tag :options="dict.type.per_qualification" :value="parseInt(person.highestQualification)"/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="学历院校">{{ person.qualificationUniversity }}</el-descriptions-item>
        <el-descriptions-item label="最高学位">
          <div  @click="preview(person.highestDegreeAttachment)">
            <dict-tag :options="dict.type.per_degree" :value="person.highestDegree"/>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="学位院校">{{ person.degreeUniversity }}</el-descriptions-item>
        
        <el-descriptions-item label="考勤机编号">{{ person.checkOnNumber }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ person.remark }}</el-descriptions-item>
      </el-descriptions>
      
     
    </div>
    <div class="avatar-container">
      <el-avatar 
        :key="avatarUrl"
        :size="120" 
        :src="avatarUrl" 
        icon="el-icon-user-solid"
      ></el-avatar>
    </div>

    <el-dialog :visible.sync="previewOpen" title="预览" append-to-body>
      <attachment-preview :fileId="fileId" :fileType="fileType" />
    </el-dialog>
  </div>
</template>

<script>
import { getBaseInfo } from "@/api/resource/person";

export default {
  name: "BasicInfo",
  dicts: ['sys_user_sex','per_degree','per_qualification'],
  props: {
    personId:{
      type: String,
      required: true
    }
  },
  data() {
    return {
      person: {},
      previewOpen: false,
      fileId: '',
      fileType: '',
      avatarUrl: ''
    };
  },
  mounted() {
    this.loadBaseData();
    
  },
  destroyed() {
    this.avatarUrl = '';
  },
  methods: {
    preview(attach) {
      if(attach) {
        var [id,fileType] = attach.split(":");  
        this.previewOpen = true;
        this.fileId = id;
        this.fileType = fileType;
      }
    },
    loadBaseData(){
      getBaseInfo(this.personId).then(response => {
        this.person = response.data;
        this.getAvatarUrl();
      });
    },
    getAvatarUrl() {
      if(this.person){
        this.avatarUrl = process.env.VUE_APP_BASE_API+'/view/attachement/preview?id='+this.person.avatar;
      }
    }
  }
};
</script>

<style scoped>
.info-container {
  display: flex;
  position: relative;
}

.info-content {
  flex: 1;
}

.avatar-container {
  position: absolute;
  top: 5px;
  right: 5px;
  text-align: center;
}

.el-avatar {
  border: 1px solid #eee;
  /*box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
}
</style>