<template>
    <div class="commom-container clerk-detail-container">
        <p class="t-rt"><a class="a-href">打印员工档案</a></p>
        <div class="employee-detail">
            <div class="head-info">
                <p class="head-cell"><img :src="info.headPic" class="head-img"></p>
                <p class="head-cell name">{{info.clerkName}}<span>{{statusList[info.clerkStatus - 1]}}</span></p>
                <p class="head-cell c-303133">{{info.groupName}}{{info.positionName}}</p>
                <p class="head-cell">已在{{info.contractCompany}}工作了{{info.days}}天</p>
            </div>
        </div>
        <editable-cell :info="info" :items="items" title="基础信息"></editable-cell>
    </div>
</template>
<script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
import editableCell from "components/employeeRecord/editableCell";
export default {
    name: "recordInfo",
    components: {
        editableCell
    },
    data() {
        return {
            info: {},
            statusList: ["正式", "试用", "离职"],
            items: []
        }
    },
    methods: {
        getEmployeeDetail() {
            let ths = this;
            let params = {
                recordId: ths.$route.query.recordId
            };
            getRequest("/haoban-manage-web/record/employee-detail", params)
            .then(res => {
                console.log(res, "info");
                if (res.data.errorCode == 1) {
                    ths.info = res.data.result;
                } else {
                    ths.$message.error({
                        message: res.data.message
                    });
                }
            })
            .catch(e => {
                ths.$message.error({
                    message: e.message
                });
            });
        }
    },
    beforeMount() {
        this.getEmployeeDetail();
    }
}
</script>
<style lang="scss">
    .clerk-detail-container {
        padding: 30px;
        .employee-detail {
            .head-info {
                margin-top: 20px;
                text-align: center;
                font-size: 14px;
                color: #606266;
                .head-cell {
                    margin-bottom: 15px;
                    .head-img {
                        width:70px;
                        height:70px;
                        background:rgba(64,158,255,1);
                        border-radius:6px;
                    }
                    &.name {
                        font-size:20px;
                        font-weight:500;
                        color:rgba(48,49,51,1);
                        span {
                            display: inline-block;
                            width:32px;
                            height:16px;
                            border:1px solid rgba(74,168,255,1);
                            border-radius:3px;
                            text-align: center;
                            line-height: 16px;
                            font-size: 10px;
                            color: #4AA8FF;
                            margin-left: 8px;
                            vertical-align: middle;
                        }
                    }
                }
            }
        }
    }
</style>
