<template>
	<view class="refund-wrapper" v-if="vdata.list.length > 0">
		<view class="refund-title">退款记录</view>
		<!-- 列表循环部分 start border-none 去掉边框类名 -->
		<block v-for="(item, i) in vdata.list" :key="i">
			<view class="refund-item border-none">
				<view class="refund-money">
					<view>退：￥{{ cal.cert2Dollar(item.refundAmount) }}</view>
					<view>余：￥{{ calSubAmount(i) }}</view>
				</view>
				<view class="refund-time">{{ item.createdAt }}</view>
			</view>
		</block>
		<!-- 列表循环部分end -->
		<view v-if="props.refundBtn" class="refund-button flex-center" hover-class="touch-button" hover-stay-time="150" @tap="emits('refund')">发起退款</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { reqLoad, API_URL_REFUND_LIST } from '@/http/apiManager.js';
import { onPageScroll, onLoad } from '@dcloudio/uni-app';
import cal from '@/commons/utils/cal.js';
import datamap from '@/commons/utils/datamap.js';
import infoBox from '@/commons/utils/infoBox.js';
import ent from '@/commons/utils/ent.js';
import go from '@/commons/utils/go.js';
import emit from '@/commons/utils/emit.js';

const props = defineProps({
	refundBtn: { type: Boolean, default: false },
	orderInfo: {
		type: Object,
		default: () => {
			return {};
		}
	}
});

const vdata = reactive({
	list: []
});

// 刷新列表
function refList(payOrderId) {
	reqLoad.list(API_URL_REFUND_LIST, { payOrderId: payOrderId, state: 2, pageSize: -1 }).then(({ bizData }) => {
		vdata.list = bizData.records;
		emits('refRefundCountFunc', bizData.total);
	});
}

function calSubAmount(index) {
	let allRefundAmount = 0;

	for (var i = index; i < vdata.list.length; i++) {
		allRefundAmount += vdata.list[i].refundAmount;
	}

	return cal.cert2Dollar(props.orderInfo.amount - allRefundAmount);
}

const emits = defineEmits(['refund', 'refRefundCountFunc']);

defineExpose({ refList });
</script>

<style lang="scss" scoped>
.refund-wrapper {
	padding: 0 75rpx;
	padding-bottom: 70rpx;
	box-sizing: border-box;
	.refund-title {
		margin: 70rpx 0 30rpx 0;
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
	}
	.refund-item {
		height: 160rpx;
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);

		.refund-money {
			display: flex;
			justify-content: space-between;
			margin: 30rpx 0 20rpx 0;
			color: #fff;
			font-size: 30rpx;
			font-weight: 400;
		}
		.refund-time {
			margin-bottom: 30rpx;
			color: rgba(255, 255, 255, 0.65);
			font-size: 30rpx;
			font-weight: 400;
		}
	}
	.border-none {
		border: none;
	}
	.refund-button {
		margin-top: 70rpx;
		height: 110rpx;
		font-size: 33rpx;
		font-weight: 500;
		color: #ff5b4c;
		background-color: $J-bg-ff;
		border-radius: $v-b-r20;
	}
}
.touch-button {
	opacity: 0.5;
}
</style>
