<template>
	<view class="my-coupon-page">
		<!-- Tab 切换 -->
		<!-- 		<view class="tab-container">
			<view class="tab-item" :class="{ active: currentTab === 'available' }" @click="switchTab('available')">
				<text class="tab-text">{{ $t('myCoupon.available') }}</text>
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'used' }" @click="switchTab('used')">
				<text class="tab-text">{{ $t('myCoupon.used') }}</text>
			</view>
			<view class="tab-item" :class="{ active: currentTab === 'expired' }" @click="switchTab('expired')">
				<text class="tab-text">{{ $t('myCoupon.expired') }}</text>
			</view>
		</view> -->

		<!-- 优惠券列表 -->
		<view class="coupon-list" v-if="filteredCoupons.length > 0">
			<view v-for="coupon in filteredCoupons" :key="coupon.id" class="coupon-item-wrapper">
				<view class="coupon-item" :class="getCouponClass(coupon.status)">

					<!-- 虚线上下圆形缺口 -->
					<view class="coupon-circle-top"></view>
					<view class="coupon-circle-bottom"></view>

					<view class="coupon-left">
						<view class="coupon-value">
							<text v-if="coupon.type === 'cash'" class="coupon-unit">¥</text>
							<text class="coupon-amount">{{ coupon.type === 'discount' ? coupon.discount : coupon.value }}</text>
							<text v-if="coupon.type === 'discount'" class="coupon-unit">折</text>
						</view>
						<view style="display: flex;flex-direction: column;">
							<text class="coupon-condition">{{ coupon.condition }}</text>
							<text class="coupon-validity-left">{{ coupon.validity }}</text>
						</view>
					</view>
					<view class="coupon-divider"></view>
					<view class="coupon-right">
						<!-- <text class="coupon-name">{{ coupon.name }}</text> -->
						<!-- <text class="coupon-region" v-if="coupon.positionName"
							style="font-size: 22rpx; color: #999; margin-top: 4rpx;">
							{{ $t('myCoupon.onlyForRegionBefore') }}{{ coupon.positionName }}{{ $t('myCoupon.onlyForRegionAfter') }}
						</text> -->
						<view class="use-btn" v-if="coupon.status === 'available'" @click="useCoupon(coupon)">
							<text class="use-text">{{ $t('myCoupon.useNow') }}</text>
						</view>
						<text class="coupon-status" v-else>{{ getStatusText(coupon.status) }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<image class="empty-icon" src="/static/empty-coupon.png" mode="aspectFit"></image>
			<text class="empty-text">{{ getEmptyText() }}</text>
			<view class="buy-btn" @click="goToBuy" v-if="currentTab === 'available'">
				<text class="buy-text">{{ $t('myCoupon.buyNow') }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useI18n } from '@/utils/i18n.js'
import { getUserCoupons } from '@/config/api/coupon.js'
import { getQueryString } from '@/util/index.js'
import { getDeviceInfo } from '@/config/api/device.js'
import { getInUseOrder, getUnpaidOrder } from '@/config/api/order.js'

const { t } = useI18n()

// 当前选中的 Tab
const currentTab = ref('available')

// // Tab 与 API 状态的映射
// const tabToStatusMap = {
// 	available: 'unused',
// 	used: 'used',
// 	expired: 'expired'
// }

// 优惠券列表
const couponList = ref([])

// 过滤后的优惠券
const filteredCoupons = computed(() => {
	return couponList.value.filter(coupon => coupon.status === currentTab.value)
})

// 获取优惠券列表
const getCouponList = async () => {
	try {
		// const apiStatus = tabToStatusMap[currentTab.value]
		const res = await getUserCoupons('')

		if (res.code === 200 && res.data) {
			// 将后端数据转换为前端需要的格式
			couponList.value = (res.data || []).map(item => {
				// 判断优惠券类型：discount_coupon 折扣券，deduction_coupon 抵扣券
				const isCashCoupon = item.couponType === 'deduction_coupon'

				// 格式化使用条件
				let condition = '无门槛'
				if (item.usableCondition && item.usableCondition > 0) {
					condition = `满${item.usableCondition}可用`
				}

				// 格式化有效期
				let validity = ''
				if (currentTab.value === 'used') {
					// 已使用显示使用时间
					validity = item.couponStartTime ? `使用时间 ${item.couponStartTime.split(' ')[0]}` : ''
				} else if (item.couponEndTime) {
					validity = `于 ${item.couponEndTime.split(' ')[0]} 过期`
				}

				return {
					id: item.id,
					name: item.couponName || '优惠券',
					type: isCashCoupon ? 'cash' : 'discount',
					value: item.deductAmount ? parseFloat(item.deductAmount) : 0,
					discount: item.discountRate ? parseFloat(item.discountRate) * 10 : null,
					condition: condition,
					validity: validity,
					status: currentTab.value,
					positionName: item.positionName
				}
			})
		} else {
			couponList.value = []
		}
	} catch (error) {
		console.error('获取优惠券列表失败:', error)
		couponList.value = []
		uni.showToast({
			title: t('myCoupon.getListFailed'),
			icon: 'none'
		})
	}
}

// 切换 Tab
const switchTab = (tab) => {
	currentTab.value = tab
	getCouponList()
}

// 获取优惠券样式类名
const getCouponClass = (status) => {
	return status === 'available' ? '' : 'disabled'
}

// 获取状态文本
const getStatusText = (status) => {
	const statusMap = {
		'used': t('myCoupon.usedStatus'),
		'expired': t('myCoupon.expiredStatus')
	}
	return statusMap[status] || ''
}

// 获取空状态文本
const getEmptyText = () => {
	const textMap = {
		'available': t('myCoupon.noAvailableCoupons'),
		'used': t('myCoupon.noUsedCoupons'),
		'expired': t('myCoupon.noExpiredCoupons')
	}
	return textMap[currentTab.value] || ''
}

// 使用优惠券
const useCoupon = async (coupon) => {
	try {
		const scanResult = await new Promise((resolve, reject) => {
			uni.scanCode({
				success: resolve,
				fail: reject
			})
		})

		console.log('扫码结果:', scanResult);
		let deviceNo;
		// 兼容不同平台的扫码结果
		if (scanResult.scanType === 'QR_CODE' || scanResult.scanType === 'qrCode') {
			deviceNo = getQueryString(scanResult.result, 'deviceNo')
		} else if (scanResult.path) {
			deviceNo = getQueryString(scanResult.path, 'deviceNo')
		} else {
			deviceNo = scanResult.result
		}

		if (!deviceNo) {
			uni.showToast({
				title: t('home.invalidQRCode'),
				icon: 'none'
			})
			return
		}

		uni.showLoading({
			title: t('common.getting')
		})

		// 检查是否有使用中的订单
		const inUseRes = await getInUseOrder()
		if (inUseRes && inUseRes.code === 200 && inUseRes.data) {
			uni.hideLoading()
			const inUseOrder = inUseRes.data
			uni.reLaunch({
				url: `/pages/order/detail?orderId=${inUseOrder.orderId}&deviceId=${deviceNo || inUseOrder.deviceNo}`
			})
			return
		}

		// 检查是否有待支付订单
		const orderRes = await getUnpaidOrder()
		if (orderRes && orderRes.code === 200 && orderRes.data) {
			uni.hideLoading()
			const unpaidOrder = orderRes.data
			uni.navigateTo({
				url: `/pages/order/payment?orderId=${unpaidOrder.orderId}`
			})
			return
		}

		// 获取设备信息并跳转详情
		const deviceInfoRes = await getDeviceInfo(deviceNo)
		uni.hideLoading()

		if (deviceInfoRes.code === 200 && deviceInfoRes.data && deviceInfoRes.data.device) {
			const deviceInfo = deviceInfoRes.data.device
			let url = `/pages/device/detail?deviceNo=${deviceNo}`
			if (deviceInfo.feeConfig) {
				url += `&feeConfig=${encodeURIComponent(deviceInfo.feeConfig)}`
			}
			uni.navigateTo({
				url
			})
		} else {
			uni.navigateTo({
				url: `/pages/device/detail?deviceNo=${deviceNo}`
			})
		}
	} catch (error) {
		console.error('扫码处理失败:', error)
		if (error && error.errMsg !== 'scanCode:fail cancel') {
			uni.showToast({
				title: t('home.scanFailed'),
				icon: 'none'
			})
		}
	}
}

// 去购买
const goToBuy = () => {
	uni.navigateTo({
		url: '/pages/purchase/index?tab=coupon'
	})
}

onMounted(() => {
	uni.setNavigationBarTitle({
		title: t('user.myCoupons')
	})
	getCouponList()
})
</script>

<style lang="scss" scoped>
// 优惠券样式变量封装
$coupon-theme-color: #A16300;
$coupon-divider-color: #B8741A;
$coupon-bg-faded: #f5f5f5;
$coupon-active-bg-start: #FFF4E6;
$coupon-active-bg-end: #FFE8CC;
$coupon-divider-left: 65%;
$coupon-circle-radius: 16rpx;

.my-coupon-page {
	min-height: 100vh;
	background-color: #f5f5f5;
}

/* Tab 切换 */
.tab-container {
	position: sticky;
	top: 0;
	display: flex;
	background-color: #ffffff;
	z-index: 999;
	padding: 20rpx 0;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	position: relative;

	.tab-text {
		font-size: 28rpx;
		color: #666;
		font-weight: 500;
	}

	&.active {
		.tab-text {
			color: #333;
			font-weight: 600;
		}

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 60rpx;
			height: 6rpx;
			background-color: #FFA928;
			border-radius: 3rpx;
		}
	}
}

.coupon-list {
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.coupon-item-wrapper {
	position: relative;
}

.coupon-item {
	background: #FFF4E3;
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	display: flex;
	align-items: stretch;
	position: relative;
	overflow: visible;
	min-height: 180rpx;
	box-sizing: border-box;
	border: 2rpx solid transparent;
	transition: all 0.3s;

	&.selected {
		border-color: $coupon-divider-color;
		box-shadow: 0 4rpx 20rpx rgba(184, 116, 26, 0.2);

		.coupon-circle-top,
		.coupon-circle-bottom {
			background-color: $coupon-active-bg-start;
			border: 2rpx solid $coupon-divider-color;
		}
	}

	&.disabled {
		background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
		opacity: 0.6;

		.coupon-value,
		.coupon-condition,
		.coupon-name {
			color: #999;
		}

		.coupon-circle-top,
		.coupon-circle-bottom {
			background-color: #f5f5f5;
		}
	}
}

/* 虚线顶部圆形缺口 */
.coupon-circle-top {
	position: absolute;
	left: $coupon-divider-left+4%;
	top: -$coupon-circle-radius;
	transform: translateX(-50%);
	width: $coupon-circle-radius * 2;
	height: $coupon-circle-radius * 2;
	border-radius: 50%;
	background-color: $coupon-bg-faded;
	z-index: 10;
}

/* 虚线底部圆形缺口 */
.coupon-circle-bottom {
	position: absolute;
	left: $coupon-divider-left+4%;
	bottom: -$coupon-circle-radius;
	transform: translateX(-50%);
	width: $coupon-circle-radius * 2;
	height: $coupon-circle-radius * 2;
	border-radius: 50%;
	background-color: $coupon-bg-faded;
	z-index: 10;
}

.coupon-left {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8rpx;
}

.coupon-value {
	display: flex;
	align-items: flex-end; // 单位在脚
	color: $coupon-theme-color;
	line-height: 1;
	width:120rpx;
}

.coupon-amount {
	font-size: 56rpx; // 值要大
	font-weight: 700;
}

.coupon-unit {
	font-size: 24rpx; // 单位小
	font-weight: 500;
	margin-bottom: 6rpx; // 微调单位垂直位置，使其更贴合“脚”
	margin-left: 4rpx;
	margin-right: 4rpx;
}

.coupon-condition {
	font-size: 24rpx;
	color: #000;
	font-weight: 600;
}

.coupon-validity-left {
	font-size: 22rpx;
	color: #999;
	margin-top: 8rpx;
}

.coupon-divider {
	width: 2rpx;
	height: 100%;
	position: absolute;
	left: $coupon-divider-left;
	transform: translateX(-50%);
	top: 0;
	bottom: 0;
	align-self: stretch;
	background: repeating-linear-gradient(to bottom,
			$coupon-divider-color 0rpx,
			$coupon-divider-color 8rpx,
			transparent 8rpx,
			transparent 16rpx);
	margin: 0 30rpx;
}

.coupon-right {
	// flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
	align-items: center;
	margin: auto 0;
	width: 160rpx;
	// align-content: center;
	// transform: translateY(50%);
}

.coupon-name {
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
}

.coupon-validity {
	font-size: 22rpx;
	color: #999;
}

.use-btn {
	// margin-top: 10rpx;
	// padding: 12rpx 28rpx;
	// background-color: #B8741A;
	// border-radius: 40rpx;

	.use-text {
		font-size: 28rpx;
		color: #A16300;
		font-weight: 600;
	}
}

.coupon-status {
	margin-top: 10rpx;
	font-size: 24rpx;
	color: #999;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120rpx 0;

	.empty-icon {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 40rpx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 40rpx;
	}

	.buy-btn {
		padding: 20rpx 60rpx;
		background-color: #B8741A;
		border-radius: 48rpx;

		.buy-text {
			font-size: 28rpx;
			color: #ffffff;
			font-weight: 500;
		}
	}
}
</style>
