<template >
    <el-timeline :reverse="false">
        <el-timeline-item v-for="(item, index) in flowList" :key="index" placement="top">
            <template #dot>
                <div class="dot">
                    <div class="dot-inner"></div>
                </div>
            </template>

            <div class="title-box">
                <div class="title-inner">
                    <span> {{ item.title }}</span>
                    <div class="line"></div>
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAaCAYAAADWm14/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUJGQTI0QTMzQkI0MTFFQ0E3NTJDQUZFNkNBMThERDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUJGQTI0QTQzQkI0MTFFQ0E3NTJDQUZFNkNBMThERDMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQkZBMjRBMTNCQjQxMUVDQTc1MkNBRkU2Q0ExOEREMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQkZBMjRBMjNCQjQxMUVDQTc1MkNBRkU2Q0ExOEREMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pq/IJioAAAMGSURBVHjaxFZLa1NBFL4z9+bmZdPQJPZBLS5Uuted6M7WRQUXQkXoxj7wB6gL/4c0UEREKAquK3RZXEnTfUFBVGi0IfaV3DxnPBPOpKfXuUkaoR34mDt3Zs75zpzHDJt5/sI6z8atc25OH3sY+ZZ9zJ+aACPohwDFqQkwdJOCjb0m4xfMfITVfwFoYq/RMwGGSh1ECHsb57VAaSBroeI6ooHrmP8knC7KlVIXEEG4uIehggaSYL5TslCxB6gAqkGucLooDwPigAHsNQkLlWvBWrmGQMWHOCcJ4Y5pSI9dKb8ASAIygFHAOGCi5nlPcTwCuIj9mJpnnI/ffbL0DPcMAmJImpvS3gkgoDZEAQlACjAMGFJjUD4rhLwO3+uAElqr1oe5bUemlxYfpC+N34DxB3SDOokyymWdCFA/ushcEUgrC6WUqZpXmZVCTDLWkpNGkqpF3Gg0PL24cD85MjyJ/5LoggN0p91LGjIDgSFQngHL56SQly3WNiKBgllsMBGfWpi/N5BKTRBZcSQYItazXghwEoAxIcRo3assAIlRw954Ip2O35l/PAMkMgYDddbwoLLvdKh6rYiuV6pzVDk7LjmtonT70cOpAOUWUWyqosYsoLmq0qYZioTfgs/zJ2qvbBei5sbqu/Xy/kEhgIC/WMleCAiMXpXjZc75jhuLrjDOvvnWqpwuHRQKux+z2feHxeJ3A4EaKVail+tYW17D1FERXIQT2IUofwM5vm3JthFqbg/wR53A2svl1b38r20iq4SVsI4yZbcToJcHJaCONw8kdsKx6Ctu8xxKKSB+q3nIkvzacvZ14cfPTZSnyB1hHdAk/mn2tZu3TP9lAKmKHQrlRLPhQv8JxvuY64psCWpE6evW1uexq1fcL5u5DSSh5yvEHcdRb3iSdboLdF4zEif0LnBI7fdQ+RFxR9VPwAmwvukbN1BAv7dhLcgFQdcxJUED0/QesMhdb3oPNHyB2PODRJJN2tr/eRHJ0xKgQSiJtWf6JrQMm8/8VRyUov3On2h/BRgA5kE6fuL3jaYAAAAASUVORK5CYII="
                        alt="" />
                </div>
            </div>
            <div class="content" :class="{ cPadding: item.data.length > 2 }">
                <div class="content-inner" v-for="iitem in item.data">
                    <img src="@/views/electromechanicalMange/assets/flow-1.png" alt="" />
                    <span>{{ iitem.subtitle }} </span>
                    <span> {{ iitem.amount }}</span>
                </div>
            </div>
        </el-timeline-item>
    </el-timeline>
</template>
<script>
export default {
    props: {
        flowList: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            list: [],
        };
    },
};
</script>
<style lang="scss" scoped>
:deep(.el-timeline-item) {
    padding-bottom: 0 !important;
}

:deep(.el-timeline-item__dot) {
    top: -5px;
    left: -5px;
}

:deep(.el-timeline) {
    margin: 0 0 0 10px !important;
}

.dot {
    display: flex;
    width: 20px;
    height: 20px;
    background-color: transparent;
    border: 2px solid #10355d;
    border-radius: 50%;
    align-items: center;
    justify-content: center;

    .dot-inner {
        width: 10px;
        height: 10px;
        background-color: #1553bf;
        border: 2px solid #a0f0f9;
        border-radius: 50%;
        box-shadow: 0 0 5px #a0f0f9;
    }
}

:deep(.el-timeline-item__content) {
    position: relative;
    color: #fefefe;

    .title-box {
        position: absolute;
        top: -14px;
        width: 100%;

        .line {
            width: 70%;
            border-top: 1px solid #4a7278;
        }
    }

    .title-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #99e5e7;

        img {
            width: 20px;
        }
    }

    .content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 10px 60px 0 15px;
    }

    .cPadding {
        padding: 20px 0 0 0;
    }

    .content-inner {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas:
            "a b"
            "a c";
        height: 55px;
        img {
            width: 36px;
        }

        span:nth-of-type(1) {
            font-size: 11px;
        }

        span:nth-of-type(2) {
            font-size: 13px;
        }
    }

    .item {
        grid-row-start: span 2;
    }
}

:deep(.el-timeline-item__tail) {
    border-left: 1px dashed #a0f0f9;
}
</style>
