<template>
	<view class="steps">
		<view class="step" v-for="step in stepList" :key="step.taskId">
			<image v-if="step.finishTime" class="icon" src="../../static/success.png" mode="widthFix"></image>
			<image style="width:34rpx;" v-else class="icon" src="../../static/wating.png" mode="widthFix">
			</image>
			<image class="line" src="../../static/step-line.png" mode="widthFix"></image>
			<view class="right">
				<text>{{step.taskName}}:</text>
				<text>{{step.assigneeName}}</text>
			</view>
		</view>
		<view class="loading-more-top" v-if="stepList.length==0">
			<uni-load-more status="loading" />
		</view>
	</view>
</template>

<script>
	import {
		flowRecord
	} from "@/api/flowRecord/flowRecord.js";
	export default {
		name: "flow-step",
		props:["procInsId","deployId"],
		data() {
			return {
				stepList: [], //流程进度列表
			};
		},
		created() {
			console.log(this.procInsId);
			console.log(this.deployId);
			this.getFlowRecord();
		},
		methods:{
			async getFlowRecord() {
				let res = await flowRecord({
					procInsId: this.procInsId,
					deployId: this.deployId
				});
				this.stepList = res.data.flowList.reverse();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.steps {
		margin-top: 20px;

		.step {
			display: flex;
			align-items: center;
			margin-bottom: 50rpx;

			.icon {
				width: 35rpx;
			}

			.line {
				flex: 0.7;
				margin: 0 10px;
			}

			.right {
				flex: 1.4;

				text:first-child {
					color: #9E9E9E;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>