<template>
    <el-scrollbar > 
        <el-row class="title_body">
            <el-col :span="20">
                <span class="cont_header_title"><i class="el-icon-s-order"></i>基本信息</span>
            </el-col>
            <el-col :span="4" class="edit_buttion">
                <el-button
                icon="el-icon-edit"
                size="small"
                type="text"
                @click="showEditBase(scope.row)"
                >编辑</el-button>
            </el-col>
        </el-row>
        <el-divider style="margin:0"></el-divider>
        <el-row>
            <el-col :span="24" class="cont_body">

                <template>
                    <el-descriptions class="margin-top" :column="6" direction="vertical">
                        
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="曾用名"><div class="bottment_line">{{ myCont.nameusedbefore }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="性别"><div class="bottment_line">{{ replace.gender }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="民族"><div class="bottment_line">{{ myCont.myfolk }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="健康状况"><div class="bottment_line">{{ replace.health }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="婚姻状况"><div class="bottment_line">{{ replace.maritalstatus }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="政治面貌"><div class="bottment_line">{{ replace.politicaloutlook }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="出生日期"><div class="bottment_line">{{ myCont.birthday }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="身份证号"><div class="bottment_line">{{ myCont.idcardno }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="身份证有效期开始"><div class="bottment_line">{{ myCont.idcardstartdate }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="身份证有效期结束"><div class="bottment_line">{{ myCont.idcardenddate }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="身份证地址"><div class="bottment_line">{{ myCont.idcardaddress }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="身份证签发机关"><div class="bottment_line">{{ myCont.idcardIssued }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="手机号码"><div class="bottment_line">{{ myCont.mobilephone }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="现居住地址"><div class="bottment_line">{{ myCont.currentresidence }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="籍贯"><div class="bottment_line">{{ myCont.nativeplace }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="电子邮件"><div class="bottment_line">{{ myCont.email }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="内线电话"><div class="bottment_line">{{ myCont.internaltelephone }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="星座"><div class="bottment_line">{{ replace.constellationing }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="雇佣类型"><div class="bottment_line">{{ replace.hireclass }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="用工关系"><div class="bottment_line">{{ replace.emptype }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="入职日期"><div class="bottment_line">{{ myCont.entrydate }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="试用期"><div class="bottment_line">{{ myCont.probationperiod }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="预计转正日期"><div class="bottment_line">{{ myCont.planformaldate }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="参加工作日期"><div class="bottment_line">{{ myCont.jobstartdate }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="是否为退役军人"><div class="bottment_line">{{ replace.isveterans }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="退役证编号"><div class="bottment_line">{{ myCont.veteransnumber }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="护照号码"><div class="bottment_line">{{ myCont.passportno }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="国际区号" ><div class="bottment_line">{{ myCont.globalroaming }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="绑定微信" ><div class="bottment_line">{{ myCont.wechat }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="绑定企业微信"><div class="bottment_line">{{ myCont.workwechat }}</div></el-descriptions-item>
                    </el-descriptions>
                </template>


            </el-col>
        </el-row>
        <el-row class="title_body">
            <el-col :span="20">
                <span class="cont_header_title"><i class="el-icon-s-order"></i>行政组织关系</span>
            </el-col>
            <el-col :span="4" class="edit_buttion">
                <el-button
                icon="el-icon-edit"
                size="small"
                type="text"
                @click="showEditBaseOrg(scope.row)"
                >编辑</el-button>
            </el-col>
        </el-row>
        <el-divider style="margin:0"></el-divider>
        <el-row>
            <el-col :span="24" class="cont_body">
                <template>
                    <el-descriptions class="margin-top" :column="5" direction="vertical">
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="公司"><div class="bottment_line">{{ myCont.companyname }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="部门"><div class="bottment_line">{{ myCont.maindeparmentname }}  <i v-if="myCont.sunmaindeparmentname"> / </i>{{ myCont.sunmaindeparmentname }} <i v-if="myCont.workpostname"> / </i>{{ myCont.workpostname }} </div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="班组"><div class="bottment_line">{{ myCont.teamname }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="岗位"><div class="bottment_line">{{ myCont.positionname }}</div></el-descriptions-item>
                        <el-descriptions-item label-class-name="my_label_c" content-class-name="bottment_cont" label="职务"><div class="bottment_line">{{ replace.jobleve }}{{ myCont.jobidname }} <span v-if="myCont.jobclassname">（ {{ myCont.jobclassname }} ）</span> </div></el-descriptions-item>
                    </el-descriptions>
                </template>
            </el-col>
        </el-row>
    </el-scrollbar>
</template>
<script>
import { getOnlyOnePeopleCont } from "@/api/systemaccredit/systemhrapi"
import { peopleMethod } from "@/api/people/peopledata"

export default {
    name:"peopleinfor",
    props:['userid'],
   
    data() {
        return {
            myCont:{},          //个人信息
            replace:{
                probationperiod: 0,
                isveterans: "否",
                number: "300450",
                name: "秦东",
                gender: "男",
                adminorg: 0,
                position: 0,
                team: 0,
                jobid: 0,
                positiongrade: 0,
                emptype: 0,
                hiretype: 0,
                maritalstatus: 0,
                nation: "",
                mobilephone: "",
                health: 0,
                workingdate: "",
                icon: "",
                confirmationdate: "",
                entrydate: "",
                birthday: "",
                idcardno: "",
                idcardstartdate: "",
                idcardenddate: "",
                politicaloutlook: 0,
                weorwechat: "",
                constellation: 7,
                veteransnumber: "",
                globalroaming: "",
                passportno: "",
                nativeplace: "",
                currentresidence: ""
            }
            
        }
    },
    
    created(){
        console.log("userId---------->",this.userid)  
        this.getMyCont(this.userid)
    },
    methods:{
        //获取人员基本信息
        async getMyCont(id){
            let sendData = {
                id:id,
                idstr: id.toString(),
            }
            let res = await getOnlyOnePeopleCont(sendData);
            this.myCont = res.data
            //处理性别
            peopleMethod.sexData.forEach(item=>{
                if(item.id == this.myCont.gender){
                    this.replace.gender = item.tittle
                }
            })
            //雇佣类型
            peopleMethod.employmentType.forEach(item=>{
                console.log("雇佣类型--------->",item,this.myCont.hireclass)  
                if(item.id == this.myCont.hireclass){
                    this.replace.hireclass = item.tittle
                }
            })
            //用工关系
            peopleMethod.emptypeList.forEach(item=>{
                if(item.id == this.myCont.emptype){
                    this.replace.emptype = item.tittle
                }
            })
            //健康状况
            peopleMethod.healthList.forEach(item=>{
                if(item.id == this.myCont.health){
                    this.replace.health = item.tittle
                }
            })
            //婚姻状态
            peopleMethod.marriageList.forEach(item=>{
                if(item.id == this.myCont.maritalstatus){
                    this.replace.maritalstatus = item.tittle
                }
            })
            //星座
            peopleMethod.constellationList.forEach(item=>{
                if(item.id == this.myCont.constellationing){
                    this.replace.constellationing = item.tittle
                }
            })
            //政治面貌
            peopleMethod.politicsList.forEach(item=>{
                if(item.id == this.myCont.politicaloutlook){
                    this.replace.politicaloutlook = item.tittle
                }
            })
            //判断是否未退役军人
            if(this.myCont.isveterans == 1){
                this.replace.isveterans = "是" 
            }else{
                this.replace.isveterans = "否"
            }
            //职务等级
            peopleMethod.positiongrade.forEach(item=>{
                if(item.id == this.myCont.jobleve){
                    this.replace.jobleve = item.tittle
                }
            })
            
            
            console.log("获取人员基本信息--------->",this.myCont.isveterans)  
        },
        //编辑基本信息
        showEditBase(val){
            console.log("编辑基本信息--------->",val)  
        },
        //编辑行政组织
        showEditBaseOrg(val){
            console.log("编辑行政组织--------->",val)  
        },
    }
}
</script>
<style>
.el-scrollbar {
    height: 100%;
    width: 100%;
}
.el-scrollbar__wrap {
    
    overflow: auto;
    overflow: scroll;
    overflow-x: hidden;
}
.el-tree-node.is-current>.el-tree-node__content {
    color:#2E89DE!important
}
.el-tree-node_black {
    background-color:red !important;
    color:#2E89DE!important
}
div::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
div::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    opacity: 0.2;
   
}
div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
}
.title_body{
    padding: 10px 0;
}
.cont_header_title{
    font-size: 20px;
    font-weight: bold;
    color: #388CFF;
}
.cont_header_title i{
    margin-right: 10px;
}
.edit_buttion{
    text-align: right; 
    padding-right: 5px;
}
.el-divider--horizontal{
    margin: 0;
}
.cont_body{
    margin-top: 20px;
}
.my_label_c{
    padding-top: 10px;
}
.bottment_cont{
    padding-right: 15px;
    color: #000000;
    display:table-cell; 
    vertical-align:bottom;
}
.bottment_line{
    width: 100%;
    border-bottom: 1px solid #EEEEEE;
 
    padding: 5px 0;
}
</style>