<template>
	<view class="wrapper">
		<view v-for="item in approvals" class="approval" :approved="item.approved">
			<view>
				<view class="title mb-6">{{ item.approved ? '审批通过' : '待审批' }}</view>
				<view class="mb-12" v-if="item.approved">{{ item.handlerDeptName + ' ' + item.handlerName }}</view>
			</view>
			<view class="comment" v-if="item.comment">
				<view class="mb-12">
					<text class="info">{{ item.handlerDeptName + item.handlerName }}意见</text>
				</view>
				<view class="content">{{ item.comment }}</view>
			</view>
		</view>
		<view style="font-size: 12px;" v-if="!approvals.length">
			<text class="info">无审批意见</text>
		</view>
	</view>
	
</template>

<script setup>
	import { inject } from 'vue'
	const approvals = inject("approvals");
	console.log(approvals)
</script>

<style lang="scss" scoped>
	.wrapper {
		padding: 12px 18px;
	}
	.approval {
		background-color: #fff;
		margin-left: 30px;
		margin-bottom: 12px;
		padding: 12px 15px;
		position: relative;
		font-size: 14px;
		&::after {
			position: absolute;
			top: 12px;
			left: -18px;
			content: '';
			display: block;
			height: 12px;
			width: 12px;
			transform: translateX(-50%);
			border: 2px solid #E0E0E0;
			border-radius: 50%;
		}
		&::before {
			position: absolute;
			top: 30px;
			left: -18px;
			content: '';
			display: block;
			height: calc(100% - 8px);
			width: 1px;
			border-radius: 50%;
			background-color: #D8D8D8;
		}
		&:last-child::before {
			display: none;
		}
		&[approved=true] {
			&::after {
				height: 22px;
				width: 22px;
				border-color: var(--primary-color);
				content: '';
				font-family: fuiFont;
				color: var(--primary-color);
				font-size: 22px;
			}
			.title {
				color: var(--primary-color);
			}
		}
		.title {
			font-size: 16px;
		}
		.comment {
			background: #F5F6FF;
			padding: 12px;
			font-size: 11px;
			.content {
				font-size: 12px;
				color: #333;
			}
		}
	}
</style>