<template>
	<view class="my-card-page">
		<!-- 会员卡列表 -->
		<view class="card-list" v-if="cardList.length > 0">
			<view v-for="card in cardList" :key="card.id" style="position: relative;background-color: #f5f5f5;"
				@click="viewCardDetail(card)" :style="card.cardType==='COUNT'?'height: 240rpx;':'height: 200rpx;'">
				<view
					style="height: 120rpx;background-color: #ffffff;z-index: 999;border-radius: 25rpx;padding: 32rpx;position: absolute;top: 0;left: 0;right: 0;">
					<!-- 卡片头部：标题和日期 -->
					<view class="card-header">
						<text class="card-name">{{ card.name }}</text>
						<view class="card-date">
							<text class="date-text" v-if="card.status !== 'expired'">{{ card.endDate }}{{
								$t('myCard.expire') }}</text>
							<text class="date-text expired" v-else>{{ $t('myCard.expiredOn') }}{{ card.endDate }}</text>
						</view>
					</view>

					<!-- 地区信息 -->
					<view class="card-region">
						<text
							class="region-text">{{ $t('myCard.onlyForRegionBefore') }}{{ card.positionName }}{{ $t('myCard.onlyForRegionAfter') }}</text>
						<!-- 状态标签 / 去使用按钮 -->
						<view v-if="card.status !== 'expired'" class="status-tag active"
							style="display: flex; align-items: center; gap: 4rpx; background-color: #FFE2B8; border-radius: 26rpx; padding: 6rpx 20rpx;"
							@click.stop="handleUseCard(card)">
							<text class="status-text" style="color: #D4A574;">{{ $t('myCard.toUse') }}</text>
							<!-- <uv-icon name="scan" size="12" color="#D4A574"></uv-icon> -->
						</view>
						<view v-else class="status-tag" :class="getStatusClass(card.status)">
							<text class="status-text">{{ getStatusText(card.status) }}</text>
						</view>
					</view>
				</view>
				<!-- 使用情况和操作按钮 -->
				<view style="position: absolute; bottom: -10rpx; left: 0; right: 0; padding: 20rpx;z-index:1;"
					v-if="card.cardType==='COUNT'">
					<view class="card-footer">
						<!-- 次卡信息 -->
						<view v-if="card.cardType === 'COUNT'" class="card-usage-info">
							<text class="usage-text">{{ $t('myCard.remainingTimes') }}{{ card.remainingCount }}{{
								$t('myCard.times') }}</text>
						</view>
						<!-- 时长卡信息 -->
						<view v-if="card.cardType === 'TIME'" class="card-usage-info">
							<text class="usage-text">{{ $t('myCard.durationCard') }}</text>
						</view>

						<!-- 操作按钮 -->
						<view class="card-actions">
							<!-- 续卡按钮（仅次卡显示） -->
							<view v-if="card.cardType === 'COUNT'" class="renew-btn" @click.stop="renewCard(card)">
								<text class="renew-text">{{ $t('myCard.renew') }}</text>
								<uv-icon name="arrow-right" size="14" color="#D4A574"></uv-icon>
								<!-- <text class="arrow">{{ '>' }}</text> -->
							</view>

						</view>
					</view>
				</view>

			</view>
		</view>

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

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		useI18n
	} from '@/utils/i18n.js'
	import {
		getMemberCardsByStatus
	} from '@/config/api/member.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()

	// 会员卡列表
	const cardList = ref([])

	// 获取会员卡列表
	const getCardList = async () => {
		try {
			const response = await getMemberCardsByStatus()
			// 处理API返回的数据，转换为模板需要的格式
			if (response.code === 200 && response.data) {
				cardList.value = response.data.map(item => ({
					id: item.id,
					name: item.cardName,
					cardType: item.cardType, // TIME 或 COUNT
					// 次卡相关
					totalCount: item.totalCount,
					remainingCount: item.remainingCount,
					singleLimitMinutesForCount: item.singleLimitMinutesForCount,
					// 时长卡相关
					cycleDays: item.cycleDays,
					dailyLimitCount: item.dailyLimitCount,
					singleLimitMinutes: item.singleLimitMinutes,
					currentCycleStartTime: item.currentCycleStartTime,
					currentCycleUsedCount: item.currentCycleUsedCount,
					// 通用信息
					status: item.status,
					startDate: item.startTime?.split(' ')[0] || item.startTime,
					endDate: item.endTime?.split(' ')[0] || item.endTime,
					positionId: item.positionId,
					positionName: item.positionName,
					purchasePrice: item.purchasePrice,
					remark: item.remark
				}))
			} else {
				cardList.value = []
			}
		} catch (error) {
			console.error('获取会员卡列表失败:', error)
			uni.showToast({
				title: t('myCard.getListFailed'),
				icon: 'none'
			})
		}
	}

	// 计算进度条宽度
	const getProgressWidth = (used, total) => {
		if (!total || total === 0) return '0%'
		const percentage = (used / total) * 100
		return `${Math.min(percentage, 100)}%`
	}

	// 获取状态类名
	const getStatusClass = (status) => {
		const statusMap = {
			'unused': 'active',
			'expired': 'expired',
			'used': 'used',
			'active': 'active' // 兼容原始状态
		}
		return statusMap[status] || 'active' // 默认为active
	}

	// 获取状态文本
	const getStatusText = (status) => {
		const statusMap = {
			'unused': t('myCard.active'), // unused表示未使用，即活跃状态
			'expired': t('myCard.expired'),
			'used': t('myCard.used'),
			'active': t('myCard.active') // 兼容原始状态
		}
		return statusMap[status] || t('myCard.active') // 默认为active
	}

	// 查看卡详情
	const viewCardDetail = (card) => {
		// TODO: 跳转到卡详情页面
		// uni.showToast({
		// 	title: t('common.functionDeveloping'),
		// 	icon: 'none'
		// })
	}

	// 续卡
	const renewCard = (card) => {
		uni.navigateTo({
			url: `/pages/purchase/index?positionId=${card.positionId}`
		})
	}

	// 去使用会员卡
	const handleUseCard = async (card) => {
		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'
		})
	}

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

<style lang="scss" scoped>
	.my-card-page {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 24rpx;
	}

	.card-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.card-item {
		// background-color: #ffffff;
		border-radius: 25rpx;
		padding: 32rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 5;

	}

	// 卡片头部
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 16rpx;
	}

	.card-name {
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
	}

	.card-date {
		.date-text {
			font-size: 24rpx;
			color: #999999;
			line-height: 34rpx;

			&.expired {
				color: #999999;
			}
		}
	}

	// 地区信息
	.card-region {
		margin-bottom: 24rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
		gap: 16rpx;

		.region-text {
			font-size: 26rpx;
			color: #666666;
			line-height: 36rpx;
		}
	}

	// 卡片底部
	.card-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* padding-top: 24rpx ; */
		position: absolute;
		background: rgba(255, 244, 227, 1);
		z-index: 1;
		right: 0;
		bottom: 0;
		left: 0;
		border-radius: 0 0 25rpx 25rpx;
		padding: 20rpx;
		/* text-align: 30rpx ; */
	}

	.card-usage-info {
		flex: 1;

		.usage-text {
			font-size: 26rpx;
			color: #D4A574;
			font-weight: 500;
			line-height: 36rpx;
		}
	}

	.card-actions {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	// 续卡按钮
	.renew-btn {
		display: flex;
		align-items: center;
		gap: 4rpx;
		padding: 8rpx 16rpx;
		// background-color: #FFF9F0;
		border-radius: 8rpx;

		.renew-text {
			font-size: 24rpx;
			color: #D4A574;
			line-height: 34rpx;
		}

		.arrow {
			font-size: 24rpx;
			color: #D4A574;
		}
	}

	// 状态标签
	.status-tag {
		padding: 8rpx 20rpx;
		border-radius: 8rpx;

		.status-text {
			font-size: 24rpx;
			line-height: 34rpx;
		}

		&.active {
			// background-color: #FFF9F0;

			.status-text {
				color: #D4A574;
			}
		}

		&.expired {
			// background-color: #F5F5F5;

			.status-text {
				color: #999999;
			}
		}

		&.used {
			// background-color: #F5F5F5;

			.status-text {
				color: #999999;
			}
		}
	}

	.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>