<template>
	<el-timeline>
		<div style="padding-top: 30px">
			<el-timeline-item
				v-for="(activity, index) in activities"
				:key="index"
				:icon="activity.icon"
				:type="activity.type"
				:color="activity.color"
				:size="activity.size"
				:hollow="activity.hollow"
				:timestamp="activity.timestamp"
				placement="top"
			>
				<template #timestamp> 我是谁 </template>
				<!-- :timestamp="activity.timestamp" -->
				<div class="content_box" v-if="activity.Originator">
					<div class="content">
						<div>发起人: {{ activity.Originator }}</div>
						<div class="pt-6">
							审批时间: {{ activity.OriginatorTime }}
						</div>
						<div class="pt-6">
							审批意见: {{ activity.OriginatorTime }}
						</div>
					</div>
				</div>
			</el-timeline-item>
		</div>
	</el-timeline>
</template>

<script setup>
// import { MoreFilled } from '@element-plus/icons-vue';
const activities = [
	{
		Originator: 'Custom icon',
		// OriginatorTime
		OriginatorTime: '2018-04-12 20:46',
		size: 'large',
		type: 'info',
		timestamp: '直属上级',
		// icon: MoreFilled,
	},
	{
		Originator: 'Custom color',
		OriginatorTime: '2018-04-03 20:46',
		color: 'red',
		timestamp: '部门负责人',
	},
	{
		Originator: 'Custom size',
		OriginatorTime: '2018-04-03 20:46',
		size: 'large',
		timestamp: '指定成员',
	},
	{
		timestamp: '未通过',
		// Originator: 'Custom hollow',
		// OriginatorTime: '2018-04-03 20:46',
		// type: 'primary',
	},
];
</script>

<style lang="scss" scoped>
.content_box {
	background: #000;
	width: 234px;
	border-radius: 4px;
	background: rgba(242, 243, 245, 1);
	display: flex;
	font-weight: 500;
	.content {
		padding: 10px 24px;
	}
}
.pt-6 {
	padding-top: 6px;
}
::v-deep(.el-timeline-item__timestamp) {
	font-size: 14px;
	font-weight: 700;
	color: rgba(31, 31, 31, 1);
	margin-bottom: 12px;
}
::v-deep(.el-timeline-item__tail) {
	position: absolute;
	left: 4px;
	top: 20px;
	height: 75%;
	border-left: 2px dashed rgba(205, 209, 216, 1);
}
</style>
