<template>
    <div class="out">
        <div class="box" v-for="(item,index) in data" :key="index+3000" :style="!(item.arr&&item.arr.length!==0)||item.result==='审批未通过'||item.result==='审批不通过'?{border:'none'}:(index==data.length-1)?{borderLeft:'none',paddingBottom:'0px',}:{}" :class="data[index+1]&&data[index+1].result==='审批中'?'dashedbd':''">
            <div class="circle" :style="!(item.arr&&item.arr.length!==0)?{borderColor:'#ffc95c'}:item.result==='审批未通过'||item.result==='审批不通过'?{borderColor:'#de3b4b'}:{}"></div>
            <div class="card" :style="item.result==='审批未通过'||item.result==='审批不通过'?{backgroundColor:'#fcfafa'}:{}">
                <p class="card_title" :style="!(item.arr&&item.arr.length!==0)?{backgroundColor:'#fcefd6'}:item.result==='审批未通过'||item.result==='审批不通过'?{backgroundColor:'#f7d5d5'}:{}">
                    <span>{{item.title}}</span>
                    <span :style="!(item.arr&&item.arr.length!==0)?{color:'#ef9433'}:item.result==='审批未通过'||item.result==='审批不通过'?{color:'#e15260'}:{}">{{item.result}}</span>
                </p>
                <div class="card_contain" v-if="item.arr&&item.arr.length!==0">
                    <info-list :list_arr="item.arr"></info-list>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import infoList from './infoList'
export default {
    props: ['data','type'],
    components: {
        infoList
    },
    data() {
        return {

        };
    },
    watch: {

    },
    computed: {

    },
    created() {
        if(this.data.length<=1&&this.data[this.data.length-1].result=='审批通过'){
            this.data.push({
                title: "二级审批",
                result: "审批中",
            })
        }
    },
    mounted() {

    },
    methods: {

    },
};
</script>

<style scoped>
.out{
    width: 820px;
    margin-top: 40px;
}
.box{
    position: relative;
    border-left: 2px solid #e3e5ef;
    padding-left: 25px;
    padding-bottom: 24px;
}
.circle{
    width: 12px;
	height: 12px;
	background-color: #ffffff;
	border: solid 4px #515fe7;
    border-radius: 50%;
    position: absolute;
    top: -6px;
    left: -6px;
}
.card{
    width: 786px;
	background-color: #f8f9fd;
	border-radius: 12px;
    overflow: hidden; 
    transform: translateY(-24px);
    
}
.card .card_title{
    width: calc(100% - 40px);
    height: 45px;
    line-height: 45px;
	background-color: #e5f0ff;
    overflow: hidden;
    padding: 0 20px;
}
.card .card_title span{
    font-size: 16px;
}
.card .card_title span:nth-of-type(1){
    float: left;
    color: #58617a;
}
.card .card_title span:nth-of-type(2){
    float: right;
    color: #515fe7;
}
.card_contain{
    padding: 20px;
}
.dashedbd{
    border-left-style:dashed;
}
</style>
