/**
* author: Louie Butch
* date: 2020/11/4
* email: 844089357@qq.com
* desc:
*/
<template>
    <div class="hd-process-record" :style="{height: isFit ? '100%' : null}">
        <hd-table :table-list="recordList" :height="isFit ? '100%' : null" :isTree="true" rowKey="procedureId" :setRowStyle="setRowStyle">
            <el-table-column label="类型" prop="procedureName" width="160"></el-table-column>
            <el-table-column label="状态">
                        <template slot-scope="{row, $index}">
                            <div>
                                <div :ref="'applicantBox' + $index + index" v-for="(applicant, index) in row.applicantList"
                                     :key="index" style="margin-bottom: 10px"
                                     @mouseenter="mouseEnter('applicantBox' + $index + index)"
                                     @mouseleave="mouseLeave('applicantBox' + $index + index)"
                                >
                                    <div class="applicant-box">
                                        <span>由&nbsp;&nbsp;<span class="name-span">{{applicant.applicantName}}</span>&nbsp;&nbsp;{{applicant.applicationTime}}&nbsp;&nbsp;发起</span>
                                    </div>
                                    <div v-if="row.isDept">
                                        <div class="holder-box">
                                            <div>
                                                <span>接收人部门：</span>
                                                <span class="name-span">{{setHolderOrgName(applicant.taskList)}}</span>
                                            </div>
                                            <div>
                                                <span>状态：</span>
                                                <el-tag size="mini" :type="setHolderOrgStatus(applicant.taskList)">
                                                    {{setHolderOrgStatus(applicant.taskList, 'text')}}
                                                </el-tag>
                                            </div>
                                        </div>
                                        <div class="holder-box">
                                            <div>
                                                <span>接收人：</span>
                                                <span class="name-span">{{setHolderName(applicant.taskList)}}</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div v-else>
                                        <div class="holder-box" v-for="(task, index) in applicant.taskList" :key="index">
                                            <div>
                                                <span>接收人：</span>
                                                <span class="name-span">{{task.holderName}}</span>
                                            </div>
                                            <div>
                                                <span>状态：</span>
                                                <el-tag size="mini" :type="setStatus(task)">
                                                    {{setStatus(task, 'text')}}
                                                </el-tag>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
            <el-table-column label="内容">
                        <template slot-scope="{row, $index}">
                            <div :ref="'applicantBox' + $index + index" class="task-approval-content" style="width: 100%"
                                 v-for="(applicant, index) in row.applicantList" :key="index"
                                 @mouseenter="mouseEnter('applicantBox' + $index + index)"
                                 @mouseleave="mouseLeave('applicantBox' + $index + index)">
                                <!--上报，委托，退回需要显示留言信息-->
                                <div v-if="applicant.stepName === '上报' || applicant.stepName === '委托' || applicant.stepName === '退回' || applicant.stepName ==='转交易平台'"
                                     style="margin-bottom: 10px;width: 100%">
                                    <div class="time-version">
                                        <span>{{applicant.applicationTime}}</span>
                                        <span style="margin-left: 10px">版本：{{applicant.taskList && applicant.taskList.length > 0 ? applicant.taskList[0].appDataVersion : ''}}</span>
                                    </div>
                                    <div class="wf-comment" style="width: 100%">
                                        <div class="comment-left">
                                            <span>{{applicant.applicantName}}</span>
                                            <span>[{{applicant.applicantOrgName}}]：</span>
                                        </div>
                                        <div class="comment-box" style="flex: 1;">
                                            <span>{{applicant.comment}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div v-if="task.wfTaskComment" v-for="(task, _index) in applicant.taskList" :key="_index"
                                     style="margin-bottom: 10px;width: 100%">
                                    <div class="time-version">
                                        <span>{{task.approvalTime}}</span>
                                        <span style="margin-left: 10px">版本：{{task.appDataVersion}}</span>
                                    </div>
                                    <div class="wf-comment" style="max-width: calc(100% - 10px); line-height: 32px">
                                        <div class="comment-left">
                                            <span>{{task.holderName}}</span>
                                            <span>[{{task.holderOrgName}}]：</span>
                                        </div>
                                        <div class="comment-box" style="flex: 1;width: 0;">
                                            <div style="overflow: hidden">
                                                <span style="word-wrap: break-word;overflow-wrap: break-word">{{task.wfTaskComment}}</span>
                                                <el-button
                                                        v-if="task.attachmentFlowTasks && task.attachmentFlowTasks.length > 0"
                                                        type="text" size="small"
                                                        @click="openFileDialog(task.attachmentFlowTasks)"
                                                        style="margin-left: 10px">附件
                                                </el-button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
        </hd-table>
        <el-dialog title="附件" width="50%" :visible.sync="isVisible" append-to-body>
            <div class="attachment-list-box" style="height: 500px;">
                <hd-attachment-list :attachment-list="curFileList" :get-download-url="getDownloadUrl"></hd-attachment-list>
            </div>
        </el-dialog>
    </div>

</template>

<script>
import hdTable from '../../hdTable/src/hdTable';
import hdAttachmentList from '../../hdAttachmentList/src/hdAttachmentList';
export default {
    name: 'hd-process-record',
    components: {
        hdTable,
        hdAttachmentList
    },
    props: {
        processRecordData: {
            type: Object,
            default: () => {}
        },
        isFit: {
            type: Boolean,
            default: true
        },
        getDownloadUrl: {
            type: Function,
            default: () => ''
        }
    },
    data(){
        return {
            recordList: [],
            isVisible: false,
            curFileList: []
        }
    },
    watch: {
        processRecordData: {
            handler(newVal) {
                if (newVal && newVal.proStepList && newVal.proStepList.length > 0) {
                    this.setRecordList();
                } else {
                    this.recordList = [];
                }
            },
            deep: true,
            immediate: true
        }
    },
    computed: {
        setStatus() {
            return (task, type) => {
                if (task.wfTaskResult === 0) {
                    if (!type) {
                        return 'info'
                    }
                    return '撤回'
                } else {
                    if (task.wfTaskStatus === '1') {
                        if (!type) {
                            return 'warning'
                        }
                        return '未完成';
                    } else if (task.wfTaskStatus === '2') {
                        if (!type) {
                            return 'success'
                        }
                        return '完成';
                    } else {
                        if (!type) {
                            return 'danger'
                        }
                        return '终止';
                    }
                }
            }
        },
    },
    methods: {

        openFileDialog(fileList) {
            this.curFileList = fileList;
            this.$nextTick(() => {
                this.isVisible = true;
            });
        },

        setRecordList(){
            this.recordList = [];

            let projectLogList = [];

            let companyLogList = [];

            let officeLogList = [];

            let proStepList = this.processRecordData.proStepList;

            let applicantList = proStepList.map((step) => {
                let itemData = JSON.parse(JSON.stringify(step));

                itemData.taskList = this.processRecordData.taskList.filter((task) => task.procedureStepId === step.procedureStepId);

                itemData.taskList.forEach((task) => {
                    let taskHeader = this.processRecordData.taskHeaderList.find((th) => task.taskHeaderId === th.taskHeaderId);

                    Object.assign(task, taskHeader);
                });

                return itemData;
            });

            let procedureList = this.processRecordData.procedureList;

            procedureList.forEach((procedure) => {
                let itemData = JSON.parse(JSON.stringify(procedure));

                itemData.applicantList = applicantList.filter((applicant) => applicant.procedureId === procedure.procedureId);

                if (itemData.procedureLevel === 3) {
                    officeLogList.push(itemData);
                } else if (itemData.procedureLevel === 2) {
                    companyLogList.push(itemData);
                } else {
                    projectLogList.push(itemData);
                }
            });

            this.setLogList(officeLogList, 3);
            this.setLogList(companyLogList, 2);
            this.setLogList(projectLogList, 1);
        },

        /**
         * 设置logList
         * @param list
         * @param level
         */
        setLogList(list = [], level) {
            if (list.length === 0) {
                return;
            }

            let row = {
                procedureId: level,
                procedureName: level === 3 ? '局' : (level === 2 ? '公司' : '项目部'),
                children: list
            };

            this.recordList.push(row);
        },

        setHolderOrgName(taskList = []){
            return taskList.length > 0 ? taskList[0].holderOrgName : '';
        },

        setHolderOrgStatus(taskList = [], type){
            if (taskList.every((task) => task.wfTaskResult === 0)) {
                if (!type) {
                    return 'info'
                }
                return '撤回'
            } else {
                if (taskList.some((task) => task.wfTaskStatus === '2')) {
                    if (!type) {
                        return 'success'
                    }
                    return '完成';

                } else {
                    if (!type) {
                        return 'warning'
                    }
                    return '未完成';
                }
            }
        },

        setHolderName(taskList = []){
            let holderNames = taskList.map((task) => task.holderName);

            return holderNames.join(' ');
        },

        mouseEnter(ref) {
            if (this.$refs[ref] && this.$refs[ref].length > 0) {
                this.$refs[ref].forEach((item) => {
                    item.style.backgroundColor = 'rgba(230,162,60, .2)';
                })
            }
        },
        mouseLeave(ref) {
            if (this.$refs[ref] && this.$refs[ref].length > 0) {
                this.$refs[ref].forEach((item) => {
                    item.style.backgroundColor = '';
                })
            }
        },
        setRowStyle({row}) {
            let isAllFinish = true;

            if (row.applicantList) {
                isAllFinish = row.applicantList.every((applicant) => {
                    if (row.isDept) {
                        return applicant.taskList.some((task) => task.wfTaskStatus === '2');
                    } else {
                        return applicant.taskList.every((task) => task.wfTaskStatus === '2')
                    }
                });
            } else {
                isAllFinish = false;
            }


            return isAllFinish ? {backgroundColor: '#f0f9eb'} : {};
        }
    }
};
</script>

<style lang="scss" scoped>
    .hd-process-record {
        .holder-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
        }

        .name-span {
            color: #096db6;
        }

        .time-version {
            color: #909399;
            line-height: 24px;
        }

        .wf-comment {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            color: #303133;
            line-height: 24px;
            margin-left: 10px;

            .comment-left {
                flex-shrink: 0
            }
        }

        /deep/ .all-success-row {
            background-color: #67C23A;
        }
    }
</style>