<template>
	<view class="wrapper">
		<view class="header">
			<text>总耗时</text>
			<text class="ml-8">{{ getTotalTime() }}</text>
		</view>
		<view class="body" >
			<view v-for="item in flows" class="flow-node">
				<view class="flex gap flow-info">
					<text class="info">{{ item.createTime }}</text>
					<text>{{ item.handlerDeptName }}</text>
					<text class="primary bold">{{ item.flowAfterName }}</text>
				</view>
				<view class="flex-inline gap flow-time">
					<text class="info">用时</text>
					<text class="primary bold">{{ formatTimeText(item.consumingTime) }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { inject } from 'vue'
	import { formatTimeText } from '@/common/util'
	const flows = inject("flows");
	
	function getTotalTime() {
	    if (!flows.value.length) {
	        return "";
	    }
	    const sum = flows.value
	        .map((item) => item.consumingTime)
	        .reduce((a, b) => a + b);
	    return formatTimeText(sum);
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		background-color: #fff;
		
		.header {
			border-bottom: 1px solid #E5E5E5;
			padding: 18px 12px;
			line-height: 1;
			font-size: 14px;
		}
		.body {
			font-size: 12px;
			padding: 12px;
			.flow-node {
				margin-bottom: 8px;
				.flow-info {
					margin-bottom: 8px;
					padding-left: 18px;
					position: relative;
					&:before {
						content: '';
						display: block;
						position: absolute;
						left: 0;
						top: 50%;
						transform: translate(-50%, -50%);
						width: 10px;
						height: 10px;
						background-color: #bfbfbf;
						border: 1px solid #f1fff1;
						border-radius: 50%;
					}
				}
				.flow-time {
					height: 28px;
					padding: 0 16px;
					line-height: 28px;
					background: #F5F6FF;
					border-left: 2px solid #00D050;
				}
			}
		}
	}
</style>