<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.enterpriseName}}工作了{{info.days}}天</p>
            </div>
        </div>
        <template v-for="field in fieldList">
            <editable-cell @subSuccess="subSuccess" v-if="field.childrens" :key="field.fieldCode" :info="info" :staticInfo="staticInfo" :items="items" :title="field.title" :fieldList="field.childrens"></editable-cell>
        </template>
    </div>
</template>
<script>
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
import { deepClone } from '@/utils/index';
import editableCell from "components/employeeRecord/editableCell";
export default {
    name: "recordInfo",
    components: {
        editableCell
    },
    data() {
        return {
            info: {},
            staticInfo: {},
            statusList: ["正式", "试用", "离职"],
            items: [],
            fieldList: [],
            mileStone: [] // 里程碑数据
        }
    },
    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.getTemplate(res.data.result);
                } else {
                    ths.$message.error({
                        message: res.data.message
                    });
                }
            })
            .catch(e => {
                ths.$message.error({
                    message: e.message
                });
            });
        },
        subSuccess() {
            // this.fieldList = [];
            this.getEmployeeDetail();
        },
        getTemplate(clerkInfo) { // 获取档案模板
            let ths = this;
            getRequest("/haoban-manage-web/record/employee-find-template", {})
            .then(res => {
                console.log(res, "模板");
                if (res.data.errorCode == 1) {
                    ths.formatTemplateList(res.data.result, clerkInfo);
                } else {
                    ths.$message.error({
                        message: res.data.message
                    });
                }
            })
            .catch(e => {
                ths.$message.error({
                    message: e.message
                });
            });
        },
        formatTemplateList(list, clerkInfo) { // 格式化档案详情和模板
            let ths = this;
            let fieldList = [];
            let copyData = list;
            let obj = JSON.parse(clerkInfo.defineString);
            let cInfo = deepClone(clerkInfo);
            for (let key in obj) {
                cInfo[key] = obj[key];
            }
            list.forEach(tem => {
                if (tem.parentCode != 0) {
                    tem.fieldOperations = JSON.parse(tem.fieldOperations);
                }
                if (tem.fieldType == 5) {
                    cInfo[tem.fieldCode] = !!cInfo[tem.fieldCode] ? cInfo[tem.fieldCode].split(",") : ["2016-12-11", "2016-12-12"]; // 时间区间转换为数组格式
                    clerkInfo[tem.fieldCode] = !!clerkInfo[tem.fieldCode] ? clerkInfo[tem.fieldCode].split(",") : ["2016-12-11", "2016-12-12"];
                }
                if (tem.fieldType == 6) {
                    cInfo[tem.fieldCode] *= 1; // 强制转为数字类型
                    clerkInfo[tem.fieldCode] *= 1;
                }
                if (tem.fieldType == 7) {
                    let arr = []
                    cInfo[tem.fieldCode] = !!cInfo[tem.fieldCode] ? cInfo[tem.fieldCode].split(",") : []; // 图片链接拼接字符串转为数组格式
                    cInfo[tem.fieldCode].forEach(img => {
                        arr.push({url: img});
                    });
                    clerkInfo[tem.fieldCode] = arr;
                    cInfo[tem.fieldCode] = arr.slice(0);
                }
                // console.log(tem.fieldType, tem.fieldName, tem.fieldOperations, tem);
                tem.title = tem.fieldName;
                let arr = [];
                copyData.forEach(li => {
                    if (li.parentCode == tem.fieldCode) {
                        arr.push(li);
                    }
                });
                arr.sort(function(a,b){
                    return a.sort*1-b.sort*1;
                });
                if (arr.length > 0) tem["childrens"] = arr;
                if (tem.parentCode == 0) {
                    fieldList.push(tem);
                }
            });
            fieldList.sort(function(a,b){
                return a.sort*1-b.sort*1;
            });
            this.fieldList = fieldList;
            // console.log(fieldList, clerkInfo, "new fieldList");
            this.info = cInfo;
            this.staticInfo = clerkInfo;
        },
        getHistoryList() { // 获取员工历史纪录
            let ths = this;
            let params = {
                recordId: ths.$route.query.recordId
            }
            getRequest("/haoban-manage-web/record/history-record-list", params)
            .then(res => {
                console.log(res, "history");
                if (res.data.errorCode == 1) {
                    ths.mileStone = res.data.result;
                } else {
                    ths.$message({
                        message: res.data.message
                    });
                }
            })
            .catch(e => {
                ths.$message({
                    message: e.message
                });
            });
        }
    },
    beforeMount() {
        // this.getTemplate();
        this.getEmployeeDetail();
        this.getHistoryList();
    }
}
</script>
<style lang="scss">
    .clerk-detail-container {
        padding: 30px;
        .employee-detail {
            .head-info {
                margin: 20px 0 70px;
                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>
