<template>
	<view>
		<view class="info-dot">审批进度</view>
		<view class="flow-list">
			<up-steps current="2" direction="column">
				<up-steps-item v-for="(flow, index) in flowList" :key="index" class="position-relative"
					:title="flow.nodeTitle">
					<template #icon>
						<view class="flow-icon"></view>
					</template>
					<template #desc>
						<view class="position-absolute flow-time" style="top: 0;right: 0;">
							{{flow.createTime??' '}}
						</view>
						<view class="flow-des">
							<view class="flow-des-top">
								<view>{{flow.operateName??'匿名'}}</view>
								<view :class="`flow-des-top-tips flow-des-top-tips${flow.state}`">{{nameHandle(flow)}}
								</view>
							</view>
							<view :class="`flow-des-des`" v-if="flow.remark">
								{{flow.remark}}
							</view>
						</view>
					</template>
				</up-steps-item>
				<!-- <up-steps-item title="已出库">
					<template #icon>
						<view class="flow-icon"></view>
					</template>
					<template #desc>
						<view class="position-absolute flow-time" style="top: 0;right: 0;">
							2023-05-01 12:30:23
						</view>
						<view class="flow-des">
							<view class="flow-des-top">
								<view>王晓霞</view>
								<view class="flow-des-top-tips flow-des-top-tips1">同意</view>
							</view>
							<view class="flow-des-des">
								意见：同意此次申请，继续努力！同意此次申请，继续努力！
							</view>
						</view>
					</template>
				</up-steps-item>
				<up-steps-item title="结束">
					<template #icon>
						<view class="flow-icon"></view>
					</template>
					<template #desc>
						<view class="position-absolute flow-time" style="top: 0;right: 0;">
							2023-05-01 12:30:23
						</view>
						<view class="flow-des">
							<view class="flow-des-top">
								<view>王晓霞</view>
								<view class="flow-des-top-tips flow-des-top-tips2">待审</view>
							</view>
						</view>
					</template>
				</up-steps-item> -->
			</up-steps>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		reactive,
		ref,
		watch
	} from 'vue';
	import {
		getDict
	} from '@/common/status/index.js';
	import {
		getCareRecords
	} from '@/common/config/application-api.js'

	const props = defineProps({
		item: {
			type: Object,
			default () {
				return {}
			}
		}
	})

	// 0 不同意 1 待审  2 同意
	const defaultFlow = [{
		nodeTitle: '资料提交',
		operateName: '乡镇民政所',
		createTime: '',
		remark: '',
		state: 0,
	}]
	const flowList = ref([])

	function nameHandle(flow) {
		if (flow.statusName) return flow.statusName;
		if (flow.state == 0) return '未开始';
		if (flow.state == 1) return '已完成';
		if (flow.state == 2) return '已退回';
		return '--'
	}

	function initFlowList() {
		console.log('props', props.item);
		getCareRecords({
			params: {
				applyId: props.item.applyId
			}
		}).then(res => {
			console.log('res', res);
			flowList.value = res;
			if (flowList.value.length === 0) {
				flowList.value = [...defaultFlow];
			}
		})

	}

	watch(() => props.item, (newVal, oldVal) => {
		console.log('watch');
		if (props.item.status !== 'assigned') {
			initFlowList();
		}
	})

	onMounted(() => {
		console.log('onMounted');
		// if (props.item.status !== 'assigned') {
		// 	initFlowList();
		// }
		initFlowList();
	})
</script>

<style lang="scss" scoped>
	.flow-icon {
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		background: #207DFF;
	}

	.info-dot {
		position: relative;
		margin: 20rpx;
		padding-left: 20rpx;
		font-size: 36rpx;
		color: #0B0B0B;
	}

	.info-dot::before {
		content: '';
		position: absolute;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		top: calc(50% - 6rpx);
		left: 0;
		background: #4794FF;
	}

	.flow-list {
		margin: 24rpx !important;
		padding: 30rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.flow-time {
		font-size: 28rpx;
		color: #888888;
	}

	.flow-des {
		background: rgba(115, 190, 255, 0.08);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 24rpx 40rpx 30rpx 40rpx;
		margin-top: 30rpx;

		&-top {
			font-size: 32rpx;
			color: #222222;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-tips {
				font-size: 28rpx;
				color: #207DFF;
			}

			&-tips1 {
				color: #1FBC99;
			}

			&-tips0 {
				color: #FA7E00;
			}

			&-tips2 {
				color: #fa3534;
			}
		}

		&-des {
			margin-top: 25rpx;
			font-size: 28rpx;
			color: #888888;
		}
	}
</style>