<template>
	<view class="min-page bg-f7 u-font-28">
		<up-sticky>
			<view class="top">
				<view v-for="(item, index) in tabs.list" :key="index" class="tab-item"
					:class="{ active: item.value == tabs.sel }" @click="tabs.sel = item.value">{{ item.name }}</view>
			</view>
		</up-sticky>

		<orderList :list="list" @lookCode="lookCode" @refund="refund" @cancelRefund="cancelRefund" />

		<view class="safe-bottom">
			<up-loadmore :status="isEnd?'nomore':'loadmore'"></up-loadmore>
		</view>

		<modal v-model="modalData.show" title="查看券码" :showBottom="false">
			<view class="u-p-28">
				<view class="u-flex u-row-center">
					<up-qrcode cid="ex1" :size="104" :val="qrcode"></up-qrcode>
				</view>
				<view class="u-m-t-22 u-flex u-row-center">
					<text>{{ qrcode }}</text>
					<view @click="copyCode">
						<image src="/scoreShop/static/image/copy.png" class="u-m-l-24 copy"></image>
					</view>
				</view>
			</view>
		</modal>
	</view>
</template>

<script setup>
	import modal from "@/scoreShop/components/modal.vue";
	import orderList from "./components/order-list.vue";
	import * as pointGoodsApi from "@/common/api/order/pointGoods.js";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		watch
	} from "vue";

	const modalData = reactive({
		show: false,
	});
	const qrcode = ref("");

	function copyCode() {
		uni.setClipboardData({
			data: qrcode.value,
			success: function() {
				uni.showToast({
					title: "复制成功",
					icon: "none",
				});
			},
		});
	}


	function refresh() {
		query.page = 1;
		isEnd.value = false;
		getList();
	}


	function refund(item) {
		uni.showModal({
			title: '提示',
			content: '是否申请退款',
			showCancel: true,
			success(res) {
				if (res.confirm) {
					pointGoodsApi.applyRefund({
						orderNo: item.orderNo,
						recordId: item.id
					}).then(res => {
						if (res) {
							uni.showToast({
								title: '申请退款成功',
								icon: 'none'
							})

						} else {
							uni.showToast({
								title: '申请退款失败',
								icon: 'none'
							})

						}
						setTimeout(() => {
							refresh()
						}, 1000)
					})
				}
			}
		})

	}

	function cancelRefund(item) {
		uni.showModal({
			title: '提示',
			content: '是否取消退款',
			showCancel: true,
			success(res) {
				if (res.confirm) {
					pointGoodsApi.cancelRefund({
						orderNo: item.orderNo,
						recordId: item.id
					}).then(res => {
						if (res) {
							uni.showToast({
								title: '取消退款成功',
								icon: 'none'
							})

						} else {
							uni.showToast({
								title: '取消退款失败',
								icon: 'none'
							})

						}
						setTimeout(() => {
							refresh()
						}, 1000)
					})
				}
			}
		})

	}

	function lookCode(item) {
		qrcode.value = item.couponCode
		modalData.show = true;
	}
	const tabs = reactive({
		list: [{
				name: "全部订单",
				value: "",
			},
			{
				name: "待核销",
				value: "unevaluated",
			},
			{
				name: "已完成",
				value: "evaluated",
			},
			{
				name: "售后",
				value: "after_sale",
			},
		],
		sel: "",
	});
	const list = ref([]);
	const query = reactive({
		page: 1,
		size: 10,
		shopId: '',
	});
	const isEnd = ref(false);
	watch(() => tabs.sel, (newval) => {
		refresh()
	})

	function getList() {
		const status = tabs.list.find(v => v.value == tabs.sel)
		pointGoodsApi.recordPage({
			...query,status:tabs.sel?status.name:''
		}).then(res => {
			const newList = res.records
			if (query.page == 1) {
				list.value = newList
			} else {
				list.value.push(...newList)
			}
			if (query.page >= res.totalPage * 1) {
				isEnd.value = true
			}
		})
	}
	onLoad((opt) => {
		query.shopId = opt.shopId || ''
		getList()
	})
</script>

<style scoped lang="scss">
	.top {
		background-color: #fff;
		padding: 32rpx 28rpx;
		display: flex;
		justify-content: space-between;
	}

	.tab-item {
		color: #999;
		transition: all 0.3s ease-in-out;

		&.active {
			color: #000;
			font-size: 32rpx;
			font-weight: 700;
		}
	}

	.copy {
		width: 28rpx;
		height: 28rpx;
	}

	.safe-bottom {
		padding-bottom: calc(env(safe-area-inset-bottom) + 2rpx);
	}
</style>