<template>
	<view>
		<!-- 时间线 -->
		<view class="processBox">
			<!-- 背景 线 -->
			<view class="flex mac processRc h0" :style="{ width: `calc(100% - ${100 / processList.length}%)` }">
				<view v-for='index in processList.length-1' :key="index" class="flex1 processLine"
					:class="processList[index+1] ? 'bg-m' : 'bg-mb'"></view>
			</view>
			<!-- 背景 点 -->
			<view class="flex mac msb processRc h36" :style="{ width: `calc(100% - ${100 / processList.length}%)` }">
				<view v-for="(item, index) in processList" :key="index" class="rad-c"
					:class="[processList[index] ? 'bg-m' : 'bg-mb', index === lastNonEmptyIndex ? 'wh40' : 'wh20']">
					<u-icon name="checkbox-mark" size="40rpx" color="#fff" v-if="lastNonEmptyIndex ===index"></u-icon>
				</view>
			</view>
		</view>
		<!-- 时间线描述 -->
		<view class="flex m-t-12">
			<template v-if='processType ==="申请中" || processType ==="已同意"'>
				<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===0?'':'fcb'">
					<view class="fz28">申请退款</view>
					<view class="fz20">{{ formatTime(processList[0]) }}</view>
				</view>
				<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===1?'':'fcb'">
					<view class="fz28">{{ processList[1]?'卖家已同意':'等待卖家处理' }}</view>
					<view class="fz20">{{ processList[1]?formatTime(processList[1]) : '&nbsp;' }}
					</view>
				</view>
				<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===2?'':'fcb'">
					<view class="fz28">退款成功</view>
					<view class="fz20">{{ processList[2]?formatTime(processList[2]) : '&nbsp;' }}
					</view>
				</view>
			</template>
			<template v-if='processType ==="主动退"'>
				<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===0?'':'fcb'">
					<view class="fz28">卖家取消订单</view>
					<view class="fz20">{{ formatTime(processList[0]) }}</view>
				</view>
				<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===1?'':'fcb'">
					<view class="fz28">已退款</view>
					<view class="fz20">{{ processList[1]?formatTime(processList[1]) : '&nbsp;' }}
					</view>
				</view>
			</template>
			<template v-if='processType ==="拒绝退"'>
				<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===0?'':'fcb'">
					<view class="fz28">申请退款</view>
					<view class="fz20">{{ formatTime(processList[0]) }}</view>
				</view>
				<view class="flex1 flex mc mac column" :class="lastNonEmptyIndex===1?'':'fcb'">
					<view class="fz28">卖家拒绝退款</view>
					<view class="fz20">{{ processList[1]?formatTime(processList[1]) : '&nbsp;' }}
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		parseTime,
		formatPrice
	} from '@/utils/index.js'
	export default {
		name: "process",
		data() {
			return {

			}
		},
		created() {},
		props: {
			processList: {
				type: Array,
				deep: true
			},
			processType: {
				type: String
			}
		},
		computed: {
			// 计算属性：查找最后一个非空值的下标
			lastNonEmptyIndex() {
				// 从数组末尾开始遍历
				for (let i = this.processList.length - 1; i >= 0; i--) {
					// 如果当前值不是空的，则返回其下标
					if (this.processList[i] !== '' && this.processList[i] !== null) {
						return i;
					}
				}
				return -1; // 如果没有找到非空值，返回-1
			}
		},
		methods: {
			formatTime(time) {
				return parseTime(time, '{m}-{d} {h}:{i}')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.processBox {
		height: 60rpx;
	}

	.processLine {
		height: 2rpx;
	}

	.processRc {
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.h0 {
		height: 0rpx;
	}

	.h30 {
		height: 30rpx;
	}

	.wh20 {
		width: 20rpx;
		height: 20rpx;
	}

	.wh40 {
		width: 40rpx;
		height: 40rpx;
	}
</style>