<template>
    <view class="b-progress">
        <view v-if="progressData.title" class="c-font-big c-color-gray c-gap-inner-top c-gap-inner-bottom">
            {{ progressData.title }}
        </view>
        <view
            v-if="progressData.list && progressData.list.length"
            class="c-gap-bottom-large">
            <view
                v-for="(item, index) in progressData.list"
                :key="index"
                class="progress-item c-color-gray">
                <view
                    class="progress-bar c-gap-right-large"
                    :style="{'background-color': item.color ? item.color : '#d8d8d8'}">
                </view>
                <view class="progress-cont">
                    <view v-if="item.title" class="c-font-normal" :style="{'color': item.color ? item.color : '#999'}">
                        {{ item.title }}
                    </view>
                    <view v-if="item.text" class="c-font-small">
                        {{ item.text }}
                    </view>
                    <div v-if="item.time" class="c-font-small">
                        {{ item.time }}
                    </div>
                </view>
            </view>
        </view>
    </view>
</template>

<script>

export default {
    config: {
        component: true
    },
    props: {
        progressData: Object
    },
    data() {
        return {
        };
    },
    components: {

    },
    methods: {
    }
};
</script>
<style lang="less" scoped>
.b-progress {
    .progress-item {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        position: relative;

        &:not(:last-child) {
            &::before {
                content: "";
                position: absolute;
                width: 1px;
                background-color: #d8d8d8;
                top: .08rem;
                bottom: -.08rem;
                left: .03rem;
                z-index: 2;
            }

            .progress-cont {
                margin-bottom: .2rem;
            }
        }

        .progress-bar {
            width: .07rem;
            height: .07rem;
            border-radius: 100%;
            background-color: #d8d8d8;
            margin-top: .08rem;
            z-index: 3;
        }

        .progress-cont {
            flex: 1;
        }
    }

}
</style>


