<template>
    <div class="e-record-container">
        <div class="top-area">
            <div class="top-title">
                <span class="title-span">在职员工</span>
                <a href="#/recordIo?importCode=record">
                    <el-button type="primary">导入员工档案<i class="el-icon-upload el-icon--right"></i></el-button>
                </a>
            </div>
            <div class="e-type-num-title">
                <div class="type-cell" v-for="(count, key) in countObj" :key="key" :class="key == 'onWorkCout' || key == 'noTypeWorkCount' ? 'with-bdr' : ''">
                    <p class="type-name">{{typeObj[key]}}</p>
                    <p class="num">{{count}}</p>
                </div>
            </div>
        </div>
        <employee-list :isUnEmployee="true"></employee-list>
    </div>
</template>
<script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
import employeeList from "components/employeeRecord/employeeList";
export default {
    name: "employeeRecord",
    components: {
        employeeList
    },
    data() {
        return {
            typeObj: {
                onWorkCout: "在职员工",
                allWorkCount: "全职",
                partTimeWorkCount: "兼职",
                outWorkCount: "外包",
                practiceWorkCount: "实习",
                noTypeWorkCount: "无类型",
                regularCount: "正式",
                onTrialCount: "试用",
                noStatusCount: "无状态"
            },
            countObj: {}
        };
    },
    methods: {
        getEmployeeCount() {
            let ths = this;
            getRequest("/haoban-manage-web/record/employee-count-detail", {})
            .then(res => {
                console.log(res, "res count");
                if (res.data.errorCode == 1) {
                    ths.countObj = res.data.result;
                } else {
                    ths.$message.error({
                        message: res.data.message
                    });
                }
            })
            .catch(e => {
                ths.$message.error({
                    message: e.message
                });
            });
        }
    },
    beforeMount() {
        this.getEmployeeCount();
    }
};
</script>
<style lang="scss">
.top-area {
    background: #fff;
    padding: 10px 32px;
    .top-title {
        display: flex;
        line-height: 32px;
        font-size:20px;
        font-weight:bolder;
        color:rgba(48,49,51,1);
        .title-span {
            flex: 1;
        }
    }
    .e-type-num-title {
        display: flex;
        padding: 12px 0;
        margin-top: 20px;
        color: #606266;
        font-size: 14px;
        .type-cell {
            box-sizing: border-box;
            height: 70px;
            flex: 1;
            margin-right: 20px;
            padding: 10px 0;
            &.with-bdr {
                border-right: 1px solid #DCDFE6;
                padding-right: 50px;
            }
            .num {
                font-size:24px;
                font-weight:400;
                color:rgba(48,49,51,1);
                margin-top: 20px;
            }
        }
    }
}
</style>

