<template>
 <div>
    <el-card>
        <div class="flex flex flex-pack-justify" style="margin:10px 0">
            <div style="color:rgb(20, 134, 248);font-weight:bold;padding: 0 20px;">个人主页</div>
           <el-button type="primary" @click="$router.back()" size="small">返回上级</el-button> 
        </div>
        <div class="persons">
            <div class="cell1 flex">
                <el-image 
                style="width: 120px; height: 150px"
                :src="allinfo.photoPath" 
                :preview-src-list="allinfo.photoPath">
                </el-image>
                <div class="content ml20">
                    <div class="c1">
                        <span>{{info.workName}}</span>
                        <!-- 格式 -->
                        <span class="tags">{{dict.status[allinfo.status]}}</span>
                    </div>
                    <div class="c2">
                        <!-- - {{allinfo.positionName}} -->
                        <span>{{allinfo.deptName}}</span>
                        <span style="margin:0 10px">|</span>
                        <span>{{info.workLimit}}天</span>
                    </div>
                </div>
            </div>
            <div class="cell2">
                <div class="title">成长记录</div>
                <div class="flex">
                    <div class="history">
                        <div class="times">{{info.workBeginDay}}</div>
                        <div>入职时间</div>
                    </div>
                    <div class="history">
                        <div class="times">{{info.workFormalDay}}</div>
                        <div>转正时间</div>
                    </div>
                </div>
            </div>
            <div class="cell2">
                <div class="title flex flex-pack-justify">
                    <div>本月假勤统计</div>
                    <div class="times">更多记录</div>
                </div>
                <div class="flex flex-pack-justify" style="margin-top:10px">
                    <div class="flex">
                        <div>实际出勤天数</div>
                        <div class="times ml20">{{info.attendanceCount}}天</div>
                    </div>
                    <div class="flex">
                        <div>请假天数</div>
                        <div class="times ml20">{{info.leaveCount}}天</div>
                    </div>
                </div>
                <div class="flex flex-pack-justify" style="margin-top:10px">
                    <div class="flex">
                        <div>迟到早退次数</div>
                        <div class="times ml20">{{info.lateCount}}次</div>
                    </div>
                    <div class="flex">
                        <div>旷工天数</div>
                        <div class="times ml20">{{info.minerCount}}天</div>
                    </div>
                </div>
                <div class="flex flex-pack-justify" style="margin-top:10px">
                    <div class="flex">
                        <div>缺卡次数</div>
                        <div class="times ml20">{{info.lackCardCount}}次</div>
                    </div>
                    <div class="flex">
                        <div>加班天数</div>
                        <div class="times ml20">{{info.workOverDay}}天</div>
                    </div>
                </div>
            </div>
            <div class="cell2">
                <div class="title">当前剩余假期</div>
                <div class="flex flex-pack-justify" style="margin-top:10px">
                    <div class="flex">
                        <div>调休</div>
                        <div class="times ml20">{{info.compensatoryDay}}天</div>
                    </div>
                    <div class="flex">
                        <div>婚假</div>
                        <div class="times ml20">{{info.marriageHoliday}}天</div>
                    </div>
                </div>
                <div class="flex flex-pack-justify" style="margin-top:10px">
                    <div class="flex">
                        <div>年假</div>
                        <div class="times ml20">{{info.winterHoliday}}天</div>
                    </div>
                    <div class="flex">
                        <div>陪产假</div>
                        <div class="times ml20">{{info.paternityLeaveDay}}天</div>
                    </div>
                </div>
            </div>
        </div>
    </el-card>
 </div>
</template>

<script>
    import {timestampToTime} from '@/assets/utils/dateFormat.js'
    export default {
        components: {
        },
        methods: {
            getdata(id){
                this.$get('/staff/info',{id}).then(res => {
                    if(res.code == 1){
                        this.info = res.data.holidayLists[0]
                        this.dict = res.dict
                        this.allinfo = res.data//总
                        this.info.workBeginDay = this.info.workBeginDay?timestampToTime(Number(this.info.workBeginDay),3):'-'
                        this.info.workFormalDay = this.info.workFormalDay?timestampToTime(Number(this.info.workFormalDay),3):'-'
                    }
                })
                .catch(err => {
                    this.$message.error(err.message)
                })
            }
        },
        data() {
            return {
                info:{},
                allinfo:{},
                dict:[]
            }
        },
        created(){
            this.getdata(this.$route.query.id)
        }
    }
</script>
<style lang="less">
.persons{
    width: 100%;
    padding: 0 20px;
    .title{
        font-weight: bold;
    }
    .cell1{
        // .avator{
        //     width: 120px;
        //     height: 150px;
        //     background-color: aliceblue;
        // }
        .c2{
            color: #999;
            font-size: 12px;
            margin-top: 10px;
        }
        .tags{
            background: aliceblue;
            padding: 5px;
            border-radius: 5px;
            color: rgb(20, 134, 248);
            font-size: 14px;
        }
    }
    .cell2{
        background-color: rgb(247, 246, 246);
        border-radius: 10px;
        margin-top: 20px;
        font-size: 15px;
        padding: 10px 15px;
        .history{
            margin-right: 50px;
            margin-top: 20px;
        }
        .times{
            
            color: rgb(20, 134, 248);
        }
    }
}
</style>