<template>
	<view class="container">
		<view class="search-wrap" :style="{ top: `${top}px` }">
			<view class="top">
				<view class="ipt">
					<u-input
						placeholder="请输入订单号"
						prefixIcon="search"
						shape="circle"
						clearable
						v-model="queryForm.orderNo"
						@confirm="resetGetList(1)"
						@clear="resetGetList(1)"
					></u-input>
				</view>
				<div class="ipt" @click="dateRef.open()">
					<u-input placeholder="支付时间范围" readonly v-model="time" suffixIcon="arrow-down"></u-input>
				</div>
			</view>
			<view class="tab-wrap">
				<view class="item" :class="{ active: statusActive == index }" v-for="(item, index) in tabs" :key="index" @click="tabChange(index)">
					<text class="t">{{ item.label }}</text>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="item" v-for="item in listData.list" :key="item.id">
				<view class="header">
					<view class="left">
						<text class="t1">订单号：{{ item.orderNo }}</text>
						<text class="t1">团单号：{{ item.groupOrderNo }}</text>
					</view>
					<view class="status">
						<u-tag plain plainFill :type="statusFilter(item.status).type" :text="item.status"></u-tag>
					</view>
				</view>
				<view class="user-info">
					<text class="t1">用户：{{ item.userName }} {{ item.userPhone }}</text>
					<text class="t2">核销码：{{ item.verifyCode }}</text>
				</view>
				<view class="goods-info">
					<image class="img" :src="item.wareJson.wareImgs.split(',')[0]" mode="aspectFill"></image>
					<view class="info">
						<view class="left">
							<text class="t1">{{ item.wareJson.wareName }}</text>
							<text class="t1">x{{ item.num }}</text>
						</view>
						<view class="price">
							<text class="t1">{{ item.payAmount }}元</text>
						</view>
					</view>
				</view>
				<view class="time-wrap">
					<text class="t">下单时间：{{ item.createTime }}</text>
					<text class="t" v-if="item.verifyTime">核销时间：{{ item.verifyTime }}</text>
				</view>
				<view class="footer-wrap">
					<view class="btn">
						<u-button shape="circle" style="width: 100%" v-if="includesString(item.status, '退款中')" @click="showRefundPopupHandle(item)">审核</u-button>
					</view>
					<view class="btn" v-if="includesString(item.status, '待核销') || includesString(item.status, '待成团')">
						<u-button shape="circle" style="width: 100%" @click="refundHandle(item)">退款</u-button>
					</view>
					<view class="btn" v-if="includesString(item.status, '待核销')">
						<u-button type="primary" shape="circle" style="width: 100%" @click="checkoutHandle(item)">核销</u-button>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="listData.status"></u-loadmore>
		<my-date-pickerview ref="dateRef" @confirm="dateConfirmHandle"></my-date-pickerview>
		<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 dayjs from 'dayjs';
import { ref, reactive, onMounted } from 'vue';
import { includesString } from '@/utils/index.js';
import { gbOrderPage, agreeRefund, rejectRefund, checkout } from '@/http/api/ware.js';

const dateRef = ref(null);

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

const time = ref('');
const queryForm = reactive({
	status: '',
	orderNo: '',
	orderStartTime: '',
	orderEndTime: ''
});

// 确认选择时间
function dateConfirmHandle(e) {
	queryForm.orderStartTime = e.start;
	queryForm.orderEndTime = e.end;
	time.value = e.text;
	resetGetList();
}

const statusActive = ref(0);
const tabs = ref([
	{
		value: '',
		label: '全部'
	},
	{
		value: '待成团',
		label: '待成团'
	},
	{
		value: '待核销',
		label: '待核销'
	},
	{
		value: '已核销',
		label: '已核销'
	},
	{
		value: '退款中',
		label: '退款'
	}
]);

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

// 过滤状态
function statusFilter(status) {
	let obj = statusList.value.find((item) => item.value == status);
	if (obj) {
		return obj;
	} else {
		return {
			value: status,
			type: 'info'
		};
	}
}

function tabChange(index) {
	statusActive.value = index;
	listData.page = 1;
	queryForm.status = tabs.value[index].value;
	resetGetList();
}

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

// 滚动到底部，方法需要暴露给父级
function reachBottom() {
	if (listData.status != 'nomore') {
		listData.page++;
		gbOrderPageAjax();
	}
}

// 退款
function refundHandle(item) {
	uni.showModal({
		title: '注意',
		content: `确定要给[${item.userName}/${item.userPhone}]退款吗?`,
		success: async (res) => {
			try {
				if (res.confirm) {
					uni.showLoading({
						title: '退款中...'
					});
					const res = await agreeRefund({
						recordId: item.id,
						orderNo: item.orderNo,
						reason: ''
					});
					setTimeout(() => {
						uni.showToast({
							title: '退款成功',
							icon: 'none'
						});
					}, 100);
					resetGetList();
				}
			} catch (error) {
				uni.hideLoading();
			}
		}
	});
}

// 退款popup
const refundLoading = ref(false);
const showRefundPopup = ref(false);
const refundForm = ref({
	type: 1,
	recordId: '',
	orderNo: '',
	reason: ''
});
// 显示退款popup
function showRefundPopupHandle(item) {
	showRefundPopup.value = true;
	refundForm.value.recordId = item.id;
	refundForm.value.orderNo = item.orderNo;
}
// 退款操作
async function returnCostConfirmHandle() {
	try {
		refundLoading.value = true;
		if (refundForm.value.type == 1) {
			// 同意
			await agreeRefund(refundForm.value);
		} else {
			// 驳回
			await rejectRefund(refundForm.value);
		}
		showRefundPopup.value = false;
		setTimeout(() => {
			uni.showToast({
				title: '操作成功',
				icon: 'none'
			});
		}, 100);
		resetGetList();
	} catch (error) {
		console.log(error);
	}
	refundLoading.value = false;
}

// 核销操作
async function checkoutHandle(item) {
	uni.showModal({
		title: '注意',
		content: '确认要核销吗?',
		success: async (res) => {
			if (res.confirm) {
				try {
					uni.showLoading({
						title: '核销中...',
						mask: true
					});
					await checkout(item.verifyCode);
					setTimeout(() => {
						uni.showToast({
							title: '已核销',
							icon: 'none'
						});
					}, 100);
					resetGetList();
				} catch (error) {
					console.log(error);
				}
				uni.hideLoading();
			}
		}
	});
}

// 重置列表请求
function resetGetList() {
	listData.page = 1;
	gbOrderPageAjax();
}

// 获取拼团商品:订单列表
async function gbOrderPageAjax() {
	try {
		const res = await gbOrderPage({
			page: listData.page,
			size: listData.size,
			...queryForm
		});

		res.records.forEach((item) => {
			item.wareJson = JSON.parse(item.wareJson);
		});

		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);
	}
}

defineExpose({
	reachBottom,
	resetGetList
});

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

<style scoped lang="scss">
.container {
	padding-top: 100px;
}
.search-wrap {
	width: 100%;
	height: 100px;
	position: fixed;
	left: 0;
	background-color: #fff;
	z-index: 999;
	.top {
		height: 50px;
		display: flex;
		align-items: center;
		gap: 28upx;
		padding: 0 28upx;
		.ipt {
			flex: 1;
		}
	}
	.tab-wrap {
		height: 50px;
		display: flex;
		padding: 0 28upx;
		.item {
			--activeColor: #318afe;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			&.active {
				position: relative;
				&::after {
					content: '';
					width: 100%;
					border-bottom: 1px solid var(--activeColor);
					position: absolute;
					bottom: 8px;
					left: 0;
				}
				.t {
					color: var(--activeColor);
				}
			}
			.t {
				font-size: 28upx;
				color: #333;
			}
		}
	}
}
.list {
	padding-bottom: 28upx;
	.item {
		background-color: #fff;
		border-radius: 20upx;
		padding: 28upx;
		&:not(:first-child) {
			margin-top: 28upx;
		}
		.header {
			display: flex;
			align-items: center;
			gap: 28upx;
			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				.t1 {
					color: #999;
					font-size: 28upx;
				}
			}
		}
		.user-info {
			display: flex;
			margin-top: 20upx;
			justify-content: space-between;
			.t1 {
				font-size: 28upx;
				color: #666;
			}
			.t2 {
				font-size: 28upx;
				color: #333;
			}
		}
		.goods-info {
			display: flex;
			margin-top: 20upx;
			.img {
				$size: 90upx;
				width: $size;
				height: $size;
				border-radius: 8upx;
			}
			.info {
				flex: 1;
				display: flex;
				align-items: center;
				.left {
					flex: 1;
					display: flex;
					flex-direction: column;
					padding: 0 20upx;
					.t1 {
						font-size: 28upx;
						color: #333;
					}
				}
				.price {
					.t1 {
						font-size: 32upx;
						color: #333;
						font-weight: bold;
					}
				}
			}
		}
		.time-wrap {
			display: flex;
			flex-direction: column;
			margin-top: 20upx;
			.t {
				font-size: 24upx;
				color: #999999;
			}
		}
		.footer-wrap {
			display: flex;
			justify-content: flex-end;
			padding-top: 20upx;
			gap: 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>
