<template>
    <div class="item-wrap">
        <div class="icon-wrap">
            <div :class="['icon',node.nodeStatus]">
                <img :src="require(`@/assets/img/approve_m/${node.nodeStatus}-icon.svg`)" alt="">
            </div>
            <div :class="['line',isLast?'last':'',node.nodeStatus]"></div>
        </div>
        <div class="info-wrap">
            <!-- 发起人或审批人 -->
            <div class="normal-text">
                <p>{{node.nodeText}}</p>
            </div>
            <ul class="approve-list">
                <li v-for="(item,itemIndex) in node.approveList" :key="itemIndex">
                    <div class="approve-item-wrap">
                        <!-- 审批人(审批状态) 审批时间-->
                        <div class="normal-text">
                            <p :class="{'passed':item.approveStatus==='已同意'}">{{item.approverName}} <span v-if="item.approveStatus">{{'('+item.approveStatus+')'}}</span> </p>
                            <span class="time">{{item.approveTime||''}}</span>
                        </div>
                        <!-- 驳回理由 -->
                        <div class="approve-reason" v-if="item.approveReason">
                            驳回理由:{{item.approveReason}}
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        node:{
            type:Object,
            default:{}
        },
        isLast:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {

        };
    },
    methods: {

    },
};
</script>

<style scoped lang="scss">
.item-wrap{
    display: flex;
    width:100%;
    .icon-wrap{
        width:25px;
        /* border:1px solid black; */
        position:relative;
        .icon,.line{
            position:absolute;
            left:50%;
            transform: translateX(-50%);
        }
        .icon{
            width:16px;
            height:16px;
            border-radius: 50%;
            background-color: #fff;
            overflow: hidden;
            img{
                width:100%;
                height:100%;
            }
        }
        .line{
            top:16px;
            width:1px;
            height:calc(100% - 16px);
            background-color: gray;
            &.passed{
                background-color: #0052D9;
            }
            &.last{
                background-color: transparent;
            }
        }
    }
    .info-wrap{
        flex:1;
        margin-left: 15px;
        margin-bottom: 20px;
        .approve-list{
            .approve-item-wrap{
                .normal-text{
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 10px;
                    color:gray;
                    &.passed{
                        color:#0052D9;
                    }
                }
                .approve-reason{
                   /*  margin-left: -40px; */
                    padding:10px;
                    /* padding-left: 40px; */
                    color:#AD352F;
                    background-color: #FFF0ED;
                }
            }
        }
        
    }
}
</style>
