<template>
	<view class="container">
		<view class="tab-wrap" :style="{ top: `${top}px` }">
			<view class="item" :class="{ active: tabsActive == index }" v-for="(item, index) in tabs" :key="index" @click="changeTabHandle(index)">
				<text class="t">{{ item.label }}</text>
			</view>
		</view>
		<view class="list">
			<view class="loader"></view>
			<view class="item" v-for="item in listData.list" :key="item.id">
				<view class="top">
					<text class="t">{{ item.orderNo }}</text>
					<u-tag :type="statusFilter(item.status).type" plain plainFill :text="item.status"></u-tag>
				</view>
				<view class="row">
					<text class="name">用户：{{ item.nickName }} {{ item.phone }}</text>
				</view>
				<view class="goods-wrap">
					<view class="left">
						<view class="icon" v-if="includesString(item.goodsCategory, '其它商品')">
							<image class="img" :src="item.goodsImageUrl" mode="aspectFill"></image>
						</view>
						<view class="icon border" v-if="includesString(item.goodsCategory, '优惠券')">
							<couponIcon :item="item.couponInfo" typeKey="couponType" v-if="item.couponInfo" />
						</view>
						<view class="info-wrap">
							<text class="name">{{ item.pointsGoodsName }}</text>
							<text class="num">x{{ item.number }}</text>
						</view>
					</view>
					<view class="status-wrap">
						<text class="t">{{ item.spendPoints }}积分 + {{ item.extraPaymentAmount }}元</text>
					</view>
				</view>
				<view class="row">
					<text class="t">下单时间：{{ item.createTime }}</text>
				</view>
				<view class="row" v-if="item.checkoutTime">
					<text class="t">核销时间：{{ item.checkoutTime }}</text>
				</view>
				<view class="footer-wrap" v-if="includesString(item.status, '退款中') || includesString(item.status, '待核销')">
					<view class="btn" v-if="includesString(item.status, '退款中')">
						<u-button type="error" shape="circle" @click="refundCostHandle(item)">审核</u-button>
					</view>
					<view class="btn" v-if="includesString(item.status, '待核销')">
						<u-button type="primary" shape="circle" @click="checkoutHandle(item)">核销</u-button>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="listData.status"></u-loadmore>
		<u-popup :show="showRefundPopup" :round="20" mode="bottom" closeable @close="showRefundPopup = false">
			<view class="refund-popup-content">
				<view class="refund-popup-title">
					<text class="t">退款审核</text>
				</view>
				<view class="form">
					<u-form :model="refundForm" label-width="70" label-position="left">
						<u-form-item label="是否同意">
							<u-radio-group v-model="refundForm.type">
								<u-radio label="同意" :name="1" :customStyle="{ marginRight: '15px' }"></u-radio>
								<u-radio label="驳回" :name="0"></u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item label="驳回原因" v-if="refundForm.type === 0">
							<u-textarea type="textarea" v-model="refundForm.reason" placeholder="请输入驳回原因"></u-textarea>
						</u-form-item>
					</u-form>
				</view>
				<view class="dialog-footer">
					<view class="btn">
						<u-button @click="showRefundPopup = false" shape="circle" style="width: 100%">取消</u-button>
					</view>
					<div class="btn">
						<u-button type="primary" shape="circle" @click="returnCostConfirmHandle" :loading="refundLoading" style="width: 100%">确认</u-button>
					</div>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { goodsRecordPage, goodsRecordCkecout, goodsRecordAgreeRefund, goodsRecordRejectRefund } from '@/http/api/market/point.js';
import { includesString } from '@/utils/index.js';
import couponIcon from './coupon-icon.vue';

const props = defineProps({
	top: {
		type: Number,
		default: 0
	}
});

const tabsActive = ref(0);

const tabs = ref([
	{
		value: '',
		label: '全部'
	},
	{
		value: '待核销',
		label: '待核销'
	},
	{
		value: '已完成',
		label: '已完成'
	},
	{
		value: '已退款',
		label: '售后'
	}
]);

const statusList = ref([
	{
		label: '待支付',
		type: 'info'
	},
	{
		label: '待核销',
		type: 'warning'
	},
	{
		label: '已完成',
		type: 'info'
	},
	{
		label: '退款中',
		type: 'error'
	},
	{
		label: '已退款',
		type: 'info'
	}
]);

function statusFilter(status) {
	const obj = statusList.value.find((item) => item.label == status);
	if (obj) {
		return obj;
	} else {
		return {
			label: status,
			type: 'info'
		};
	}
}

// 切换tab
function changeTabHandle(index) {
	tabsActive.value = index;
	listData.status = 'loading';
	listData.page = 1;
	listData.list = [];
	goodsRecordPageAjax();
}

const listData = reactive({
	page: 1,
	size: 10,
	status: 'loading',
	list: []
});

function reachBottom() {
	if (listData.status != 'nomore') {
		listData.page++;
		goodsRecordPageAjax();
	}
}

// 确认核销
function checkoutHandle(item) {
	uni.showModal({
		title: '注意',
		content: `确认要核销吗？`,
		success: (res) => {
			if (res.confirm) {
				checkoutAjax(item.couponCode);
			}
		}
	});
}

// 核销请求
async function checkoutAjax(couponCode) {
	try {
		uni.showLoading({
			title: '核销中...',
			mask: true
		});
		await goodsRecordCkecout(couponCode);
		goodsRecordPageAjax();

		setTimeout(() => {
			uni.showToast({
				title: '已核销',
				icon: 'none'
			});
		}, 300);
	} catch (error) {
		console.log(error);
	}
	uni.hideLoading();
}

const refundLoading = ref(false);
const showRefundPopup = ref(false);
const refundForm = ref({
	type: 1,
	recordId: '',
	orderNo: '',
	reason: ''
});

// 显示退款操作
function refundCostHandle(row) {
	refundForm.value.recordId = row.id;
	refundForm.value.orderNo = row.orderNo;
	showRefundPopup.value = true;
}

// 退款操作
async function returnCostConfirmHandle() {
	try {
		refundLoading.value = true;
		if (refundForm.value.type == 1) {
			// 同意
			await goodsRecordAgreeRefund(refundForm.value);
		} else {
			// 驳回
			await goodsRecordRejectRefund(refundForm.value);
		}
		showRefundPopup.value = false;
		uni.showToast({
			title: '操作成功',
			icon: 'none'
		});
		goodsRecordPageAjax();
	} catch (error) {
		console.log(error);
	}
	setTimeout(() => {
		refundLoading.value = false;
	}, 500);
}

// 积分:积分商品:兑换记录
async function goodsRecordPageAjax(page = listData.page, isPull = false) {
	try {
		const res = await goodsRecordPage({
			page: page,
			size: listData.size,
			status: tabs.value[tabsActive.value].value
		});

		if (listData.page == 1) {
			listData.list = res.records;
		} else {
			listData.list.push(...res.records);
		}

		if (res.pageNumber >= res.totalPage) {
			listData.status = 'nomore';
		}
	} catch (error) {
		console.log(error);
	}
	if (isPull) {
		setTimeout(() => {
			uni.showToast({
				title: '刷新成功',
				icon: 'none'
			});
			uni.stopPullDownRefresh();
		}, 300);
	}
}

defineExpose({
	reachBottom,
	goodsRecordPageAjax,
	checkoutAjax
});

onMounted(() => {
	goodsRecordPageAjax();
});
</script>

<style scoped lang="scss">
.loader {
	width: 5px;
	aspect-ratio: 1;
	border-radius: 50%;
	animation: l5 1s infinite linear alternate;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%) translateY(-80upx);
}
@keyframes l5 {
	0% {
		box-shadow: 20px 0 #000, -20px 0 #0002;
		background: #000;
	}
	33% {
		box-shadow: 20px 0 #000, -20px 0 #0002;
		background: #0002;
	}
	66% {
		box-shadow: 20px 0 #0002, -20px 0 #000;
		background: #0002;
	}
	100% {
		box-shadow: 20px 0 #0002, -20px 0 #000;
		background: #000;
	}
}
.container {
	padding-top: 40px;
}
.tab-wrap {
	$color: #318afe;
	width: 100%;
	height: 50px;
	position: fixed;
	left: 0;
	background-color: #fff;
	display: flex;
	z-index: 999;
	.item {
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #fff;
		.t {
			font-size: 28upx;
			color: #333;
		}
		&.active {
			border-bottom-color: $color;
			.t {
				color: $color;
			}
		}
	}
}
.list {
	padding-bottom: 28upx;
	position: relative;
	.item {
		background-color: #fff;
		border-radius: 20upx;
		padding: 28upx;
		&:not(:first-child) {
			margin-top: 28upx;
		}
		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.t {
				font-size: 28upx;
				color: #999;
			}
		}
		.row {
			.name {
				font-size: 28upx;
				color: #333;
			}
			.t {
				font-size: 24upx;
				color: #999;
			}
		}
		.goods-wrap {
			display: flex;
			padding: 28upx 0;
			.left {
				flex: 1;
				display: flex;
				align-items: center;
				.icon {
					$size: 180upx;
					width: $size;
					height: $size;
					&.border {
						border: 1px solid #ececec;
						border-radius: 16upx;
						padding: 16upx;
					}
					.img {
						width: 100%;
						height: 100%;
						border-radius: 16upx;
					}
				}
				.info-wrap {
					display: flex;
					flex-direction: column;
					gap: 28upx;
					padding-left: 20upx;
					.name {
						font-size: 28upx;
						font-weight: bold;
						color: #333;
					}
				}
			}
			.status-wrap {
				display: flex;
				align-items: center;
				.t {
					font-size: 32upx;
					color: #333;
					font-weight: bold;
				}
			}
		}

		.footer-wrap {
			display: flex;
			justify-content: flex-end;
			gap: 28upx;
			padding-top: 28upx;
			.btn {
				width: 180upx;
			}
		}
	}
}
.refund-popup-content {
	padding: 0 28upx;
	.refund-popup-title {
		padding: 28upx;
		display: flex;
		justify-content: center;
		.t {
			font-size: 32upx;
			color: #333;
			font-weight: bold;
		}
	}
	.form {
		padding: 28upx;
	}
	.dialog-footer {
		display: flex;
		gap: 28upx;
		.btn {
			flex: 1;
		}
	}
}
</style>
