<template>
	<view class="v-order-cancel">
		<view class="v-card container-fluid">
			<view class="row v-timeline-title">
				<view>退款金额:</view>
				<view class="price">
					<text class="num_pr">￥</text><text class="num_jd">{{homestayOrderRefund.sumRefundPrice}}</text>
				</view>
			</view>
			<view class="row v-timeline-title m-t-24">退款进度</view>
			<view class="v-timeline m-t-24">
				<view class="v-timeline-item" v-for="item in homestayOrderRefund.list">
					<view class="v-timeline-item__content">{{item.refundName}}</view>
					<view class="v-timeline-item__timestamp">{{parseTime(item.refundTime,'{y}-{m}-{d} {h}:{i}:{s}')}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		parseTime
	} from "@/common/util";
	export default {
		data() {
			return {
				homestayOrderRefund: {}
			}
		},
		onLoad(option) {
			console.log(option.orderId)
			this.getInitPage(option.orderId)
		},
		methods: {
			getInitPage(orderId) {
				let data = {
					'orderId': orderId
				}
				this.$Request.get(this.$config.getHomestayOrderRefund, data, null, null, false, true).then((res) => {
					console.log(res)
					if (res.code == 0) {
						this.homestayOrderRefund = res.data
					} else {
						uni.showToast({
							title: res.data,
							icon: 'none',
							duration: 2000
						})
					}
				});
			},
			parseTime(val, par) {
				return parseTime(val, par)
			},

		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import '@/static/css/common.scss';

	.v-timeline-title {
		font-size: 30rpx;
		color: #1B1B1B;

		.price {
			.num_pr {
				font-size: 24rpx;
				color: #e02222;
			}

			.num_jd {
				margin: 0 4rpx;
				font-size: 40rpx;
				color: #e02222;
				font-weight: bold;
			}
		}
	}

	.v-timeline {
		padding: 20rpx;
		background-color: rgba(250, 251, 255, 1);

		.v-timeline-item {
			position: relative;
			padding: 0 30rpx 20rpx 30rpx;
			margin-bottom: 20rpx;

			&:before {
				content: "";
				position: absolute;
				left: -10rpx;
				top: 10rpx;
				z-index: 1;
				height: 20rpx;
				width: 20rpx;
				border-radius: 20rpx;
				background-color: #0983FF;
			}

			&:after {
				content: "";
				position: absolute;
				left: 0;
				top: 15rpx;
				height: 100%;
				width: 1rpx;
				background-color: #eeeeee;
			}

			.v-timeline-item__content {
				font-size: 28rpx;
				color: #1B1B1B;
			}

			.v-timeline-item__tip {
				margin: 8rpx 0;
				font-size: 26rpx;
				color: #1B1B1B;
			}

			.v-timeline-item__timestamp {
				font-size: 24rpx;
				color: #808080;
			}

			&.active {
				.v-timeline-item__content {
					color: #0983FF;
				}

				&:after {
					display: none;
				}

				&:before {
					width: 30rpx;
					height: 30rpx;
					border-radius: 30rpx;
					top: 0;
					left: -15rpx;
				}
			}
		}
	}
</style>