<template>
	<view class="refund-button-wrapper" :class="{ 'compact-mode': compact }" :style="wrapperStyle">
		<view class="pay-button-container">
			<pay-button-sdk
				:mode="mode"
				:order-status="orderStatus"
				:order-id="orderId"
				:refund-total-amount="refundTotalAmount"
				@getgoodsinfo="handleGetGoodsInfo"
				@placeorder="handlePlaceOrder"
				@pay="handlePay"
				@refund="handleRefund"
				@error="handleError"
				
			>
				<text class="refund-text">退款</text>
			</pay-button-sdk>
		</view>
	</view>
</template>

<script>
	export default {
		name: "RefundButton",
		props: {
			// 模式：1-仅退款，2-退货退款
			mode: {
				type: [String, Number],
				default: '1'
			},
			// 订单状态：1-待发货，2-待收货，3-已完成
			orderStatus: {
				type: [String, Number],
				default: '1'
			},
			// 订单ID
			orderId: {
				type: String,
				required: true
			},
			// 退款总金额（单位：分）
			refundTotalAmount: {
				type: Number,
				default: 0
			},
			// 是否使用紧凑模式（适合订单列表页）
			compact: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			wrapperStyle() {
				if (!this.compact) {
					return {
						flex: '1',
						width: '100%',
						display: 'flex',
						height: '48px'
					}
				}
				return {}
			}
		},
		methods: {
			// 抖音官方组件生命周期回调 - 获取商品信息
			handleGetGoodsInfo(e) {
				console.log('抖音组件获取商品信息回调:', e.detail)
				// 退款模式下不需要额外处理，直接返回成功即可
				e.detail.success({
					// 可根据实际业务补充商品信息
					amount: this.refundTotalAmount
				})
			},
			
			// 抖音官方组件生命周期回调 - 下单
			handlePlaceOrder(e) {
				console.log('抖音组件下单回调:', e.detail)
				// 退款模式下不需要额外处理，直接返回成功即可
				e.detail.success({
					orderId: this.orderId
				})
			},
			
			// 抖音官方组件生命周期回调 - 支付
			handlePay(e) {
				console.log('抖音组件支付回调:', e.detail)
				// 退款模式下不需要额外处理，直接返回成功即可
				e.detail.success()
			},
			
			// 退款成功回调
			handleRefund(e) {
				console.log('抖音退款组件退款成功回调:', e.detail)
				this.$emit('refund', {
					detail: {
						status: 'success',
						data: e.detail
					}
				})
			},
			
			// 错误回调
			handleError(e) {
				console.error('抖音退款组件错误回调:', e.detail)
				this.$emit('error', {
					detail: {
						status: 'error',
						message: e.detail.errMsg || '退款失败'
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.refund-button-wrapper {
		height: 73rpx !important;
		border-radius: 100px;
		border: 2rpx solid #FF19A0;
		color: #FF19A0;
		background: transparent;
		display: flex !important;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		overflow: hidden;
		flex: 1 !important;
		width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}

	.pay-button-container {
		width: 100% !important;
		height: 100% !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		flex: 1 !important;
		min-width: 0 !important;
	}

	.refund-button-sdk {
		width: 100% !important;
		height: 100% !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		flex: 1 !important;
	}
	
	// 强制设置 pay-button-sdk 内部元素样式
	::v-deep .pay-button-sdk {
		width: 100% !important;
		height: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		flex: 1 !important;
	}

	.refund-text {
		color: #FF19A0;
		font-family: PingFang SC;
		font-size: 14px;
	}

	.refund-button-wrapper.compact-mode {
		width: 70px;
		height: 34px;
		border-radius: 64rpx;
		border: 1px solid #FF19A0;
		margin-left: 20rpx;
		font-size: 24rpx;
		flex: none;
		display: flex !important;
		align-items: center;
		justify-content: center;
		padding: 0;
	}

	.compact-mode .refund-text {
		font-size: 24rpx;
	}
</style>
