<template>
	<view class="task-info-view">
		<view class="task-item" v-for="item in taskList" :key="item.nid">
			<view class="task-item-date">
				{{$moment(item.operateTime).format('YYYY-MM-DD HH:mm')}}
			</view>
			<view class="task-item-circle">
				<view class="task-item-circle-bg">

				</view>
			</view>
			<view class="task-item-name">
				{{item.approvalInfo}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "task-info",
		props: {
			taskInfoList: {
				type: Object,
				default: () => ({})
			}
		},
		computed: {
			taskList() {
				return Object.entries(this.taskInfoList).map(item => item[1])
			}
		},

	}
</script>

<style lang="scss">
	.task-info-view {
		.task-item {
			height: 80px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			&-date {
				width: 90px;
				text-align: right;
				color: #5E6F8A;
				position: absolute;
				right: calc(50% + 24px);
			}

			&-name {
				color: #363F4D;
				font-weight: bold;
				background: rgba(0, 102, 255, 0.1);
				padding: 6px 12px;
				position: absolute;
				left: calc(50% + 24px);
				max-width: 125px;
			}

			&-circle {
				position: relative;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				margin: 0 12px;
				background: conic-gradient(from 0deg at 50% 50%, #2663BF 0%, rgba(38, 99, 191, 0) 100%);

				&-bg {
					width: 16px;
					height: 16px;
					background: #ffffff;
					position: absolute;
					left: 2px;
					top: 2px;
					border-radius: 50%;
				}

				&::after {
					content: '';
					display: block;
					width: 12px;
					height: 12px;
					border-radius: 50%;
					background: #2663BF;
					position: absolute;
					left: 4px;
					top: 4px;
				}

				&::before {
					content: '';
					display: block;
					width: 0px;
					height: 53px;
					border: 1px dashed #2663BF;
					position: absolute;
					left: 9px;
					top: 22px;
				}


			}



			&:last-child {
				.task-item-circle {
					&::before {
						display: none;
					}
				}
			}
		}
	}
</style>