<template>
	<view class="min-page bg-f7 color-333 u-font-28">
		<view class="top">
			<view class="u-flex u-col-center">
				<up-image width="208rpx" height="208rpx" :src="item.goodsImageUrl"
					v-if="item.goodsCategory!='优惠券'"></up-image>
				<view class="" style="width: 208rpx;height: 208rpx;" v-else>
					<couponIcon :item="item.couponInfo" typeKey="couponType" />
				</view>
				<view class="u-p-l-28 u-flex-1">
					<view class="font-bold">{{item.pointsGoodsName}}</view>
					<view class="u-flex u-row-between u-m-t-8">
						<view class="u-flex color1 font-bold">
							<text >{{item.spendPoints}}积分</text>
							<text  v-if="item.extraPaymentAmount">+ {{item.extraPaymentAmount}}元</text>
						</view>
				
						<text class="status " :class="[returnStatusClass(item)]">{{item.status}}</text>
					</view>
					<view class="u-m-t-8 font-bold color1"> X{{item.number}} </view>
				</view>
			</view>
			<template v-if="item.goodsCategory=='其它商品'&&item.status!='已退款'&&item.status!='已完成'">
				<view class="u-m-t-16">
					<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>
			</template>

			<view class="u-m-t-16">
				<text class="color-666">领取方式</text>
				<text class="u-m-l-20" v-if="item.goodsCategory=='其它商品'">需前往店铺自行兑换领取</text>
				<text class="u-m-l-20" v-else>系统发放</text>
			</view>
		</view>

		<view class="bottom">
			<view class="u-flex u-row-between item">
				<text>兑换商品：</text>
				<text class="color-666">{{item.pointsGoodsName}}</text>
			</view>
			<view class="u-flex u-row-between item">
				<text>兑换数量：</text>
				<text class="color-666">{{item.number}}份</text>
			</view>
			<view class="u-flex u-row-between item">
				<text>消耗积分：</text>
				<text class="color-666">{{item.spendPoints}}</text>
			</view>
			<view class="u-flex u-row-between item">
				<text>支付金额：</text>
				<text class="color-666">{{item.extraPaymentAmount}}元</text>
			</view>
			<view class="u-flex u-row-between item">
				<text>下单时间：</text>
				<text class="color-666">{{item.createTime}}</text>
			</view>
			<view class="u-flex u-row-between item">
				<text>核销时间：</text>
				<text class="color-666">{{item.checkoutTime||''}}</text>
			</view>
			<view class="u-flex u-row-between item">
				<text>订单号：</text>
				<text class="color-666">{{item.orderNo}}</text>
			</view>
		</view>

		<view class="btns">
			<view class="btn cancel" @click="refund(item)" v-if="canRefund(item)">申请退款</view>
			<view class="btn success " @click="cancelRefund(item)" v-if="item.status=='退款中'">取消退款</view>
		</view>
	</view>
</template>
<script setup>
	import couponIcon from "@/components/coupon-icon/index";
	import * as pointGoodsApi from "@/common/api/order/pointGoods.js";
	const qrcode = ref();

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

	})

	function returnStatusClass(item) {
		if (item.status == '已完成' || item.status == '已退款') {
			return 'gray'
		}
		if (item.status == '待核销') {
			return 'success'
		}
		if (item.status == '退款中') {
			return 'error'
		}
	}

	function canRefund(item) {
		if (item.status == '已退款' || item.status == '退款中' || item.goodsCategory != '其它商品' || item.status == '已完成') {
			return false
		}
		return true
	}

	function init() {
		const data = uni.getStorageSync('points_order_detail')
		qrcode.value = data.couponCode
		Object.assign(item, data)

		refresh()
	}
	onLoad(init)


	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 refresh() {
		pointGoodsApi.recordOne({
			id: item.id,
			shopId: item.shopId
		}).then(res => {
			Object.assign(item, res)
		})
	}

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

	}
</script>

<style lang="scss" scoped>
	.min-page {
		padding: 28rpx;
	}

	.top {
		padding: 32rpx 24rpx;
		background: #fff;

		.color1 {
			color: #9c571f;
		}

		.status {
			padding: 8rpx 18rpx;
			border-radius: 8rpx;
			border: 2rpx solid transparent;

			&.success {
				background: rgba(123, 209, 54, 0.12);
				border-color: #7bd136;
				color: #7bd136;
			}

			&.gray {
				background: #9999991f;
				border-color: #999;
				color: #999;
			}

			&.error {
				background: #ff1c1c2e;
				border-color: #ff1c1c;
				color: #ff1c1c;
			}
		}
	}

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

	.bottom {
		background: #fff;
		border-radius: 32rpx;
		padding: 16rpx 28rpx;
		margin-top: 48rpx;

		.item {
			padding: 16rpx 0;
		}
	}

	.btns {
		margin-top: 66rpx;
		display: flex;
		justify-content: center;
		gap: 48rpx;

		.btn {
			border: 2rpx solid transparent;
			border-radius: 100rpx;
			background: #fff;
			padding: 14rpx 76rpx;
			font-size: 32rpx;

			&.success {
				background-color: #e8ad7b;
				border-color: #e8ad7b;
				color: #fff;
			}

			&.cancel {
				border-color: #e8ad7b;
				color: #e8ad7b;
			}
		}
	}
</style>