<template>
    <el-col :span="12" :offset="6" class="mt10">
        <el-timeline class="box">
            <el-timeline-item
                v-for="(item, index) in flowRecordList"
                :key="index"
                :icon="setIcon(item.finishTime)"
                :color="setColor(item.finishTime)"
            >
                <p style="font-weight: 700">{{ item.taskName }}</p>
                <el-card :body-style="{ padding: '10px' }">
                    <el-descriptions :column="1" border>
                        <el-descriptions-item v-if="item.assigneeName">
                            <template #label>
                                <Icon class="elIcon" name="el-icon-User" />
                                办理人
                            </template>

                            {{ item.assigneeName }}
                            <el-tag type="info">{{ item.deptName }}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item v-if="item.candidate">
                            <template #label>
                                <Icon class="elIcon" name="el-icon-User" />
                                候选办理
                            </template>
                            {{ item.candidate }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <Icon class="elIcon" name="el-icon-Calendar" />
                                接收时间
                            </template>
                            {{ item.createTime }}
                        </el-descriptions-item>
                        <el-descriptions-item v-if="item.finishTime">
                            <template #label>
                                <Icon class="elIcon" name="el-icon-Calendar" />
                                处理时间
                            </template>
                            {{ item.finishTime }}
                        </el-descriptions-item>
                        <el-descriptions-item v-if="item.duration">
                            <template #label>
                                <Icon class="elIcon" name="el-icon-Timer" />
                                耗时
                            </template>
                             {{ item.duration }}
                        </el-descriptions-item>
                        <el-descriptions-item v-if="item.comment">
                            <template #label>
                                <Icon class="elIcon" name="el-icon-Tickets" />
                                处理意见
                            </template>
                            {{ item.comment.comment }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>
            </el-timeline-item>
        </el-timeline>
    </el-col>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { flowRecord } from '@/api/process-boot/bpm'
const flowRecordList: any = ref([])
// 设置icon
const setIcon = (val: any) => {
    if (val) {
        return 'el-icon-Check'
    } else {
        return 'el-icon-Time'
    }
}
// 设置颜色
const setColor = (val: any) => {
    if (val) {
        return '#2bc418'
    } else {
        return '#b3bdbb'
    }
}
const open = (row: any) => {
    flowRecord({ procInsId: row.procInsId, deployId: row.deployId }).then((res: any) => {
        flowRecordList.value = res.data.flowList
    })
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
:deep(.box) {
    .elIcon {
        font-size: 14px !important;
        position: relative;
        top: 3px;
    }
    .el-descriptions__label {
        width: 200px;
    }
}
</style>
