<template>
    <div class="geg-flow-history">
        <div v-for="(item, index) in items" :class="{ sep: index !== 0 }" class="item">
            <template v-if="mode === 'simple'"></template>
            <template v-if="mode === 'complex'">
                <div class="row">
                    <div class="col-1">审批人</div>
                    <div class="col-2">用时：1小时10分</div>
                    <div class="col-3 agree">{{ item.nodeName }}</div>
                </div>
                <div class="row">
                    <div class="col-1 position">职务</div>
                    <div class="col-2">2023-03-27 12:00:00</div>
                    <div class="col-3">{{ item.comment }}</div>
                </div>
            </template>
        </div>
    </div>
</template>

<style lang="less">
    .geg-flow-history {
        .row {
            display: flex;
            flex-direction: row;
            margin: 6px 0;
            line-height: 20px;
            font-size: 14px;
        }

        .col-1 {
            width: 180px;
        }

        .col-2 {
            width: 180px;
            color: #5a6875;
        }

        .col-3 {
            flex: 1;

            &.agree {
                color: #52c41a;
            }
        }

        .position{
            color: #90a0af;
        }

        .item {
            padding: 8px 0;

            &.sep {
                border-top: 1px solid #e9e9e9;
            }
        }
    }
</style>

<script setup>
    import { defineProps, ref } from 'vue';

    const props = defineProps({
        mode: {
            type: String,
            default: 'complex'
        },
        items: Array,
        autoHide: {
            type: Boolean,
            default: true
        },
        sort: {
            type: String,
            default: 'desc'
        }
    });
</script>
