<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 flex-pack-justify">
                <div class="avator"></div>
                <div class="content">
                    <div class="c1">
                        <span>{{info.name}}</span>
                        <span class="tags" v-if="info.status == 1">正式</span>
                        <span class="tags" v-if="info.status == 2">试用</span>
                        <span class="tags" v-if="info.status == 3">离职</span>
                    </div>
                    <div class="c2">
                        <span>{{info.positionName}}</span>
                        <span style="margin:0 10px">|</span>
                        <span>1512天</span>
                    </div>
                </div>
            </div>
            <div class="cell2">
                <div class="title">成长记录</div>
                <div class="flex">
                    <div class="history">
                        <div class="times">{{info.entryDate}}</div>
                        <div>入职时间</div>
                    </div>
                    <div class="history">
                        <div class="times">{{info.regularDate}}</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">2020天</div>
                    </div>
                    <div class="flex">
                        <div>请假天数</div>
                        <div class="times">2020天</div>
                    </div>
                </div>
                <div class="flex flex-pack-justify" style="margin-top:10px">
                    <div class="flex">
                        <div>迟到早退次数</div>
                        <div class="times">2020次</div>
                    </div>
                    <div class="flex">
                        <div>旷工天数</div>
                        <div class="times">2020天</div>
                    </div>
                </div>
                <div class="flex flex-pack-justify" style="margin-top:10px">
                    <div class="flex">
                        <div>缺卡次数</div>
                        <div class="times">2020天</div>
                    </div>
                    <div class="flex">
                        <div>加班天数</div>
                        <div class="times">2020天</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">2020天</div>
                    </div>
                    <div class="flex">
                        <div>婚假</div>
                        <div class="times">2020天</div>
                    </div>
                </div>
                <div class="flex flex-pack-justify" style="margin-top:10px">
                    <div class="flex">
                        <div>年假</div>
                        <div class="times">2020天</div>
                    </div>
                    <div class="flex">
                        <div>陪产假</div>
                        <div class="times">2020天</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
                        this.info.entryDate = timestampToTime(this.info.entryDate)
                        this.info.regularDate = timestampToTime(this.info.regularDate)
                    }
                })
                .catch(err => {
                    this.$message.error(err.message)
                })
            }
        },
        data() {
            return {
                info:{}
            }
        },
        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>