<template>
	<view class="payment-page">
		<!-- 自定义导航栏 -->
		<view class="navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="nav-left" @click="goBack">
					<uni-icons type="left" size="24" color="#333"></uni-icons>
				</view>
				<view class="nav-title">课程支付</view>
				<view class="nav-right"></view>
			</view>
		</view>

		<!-- 页面内容 -->
		<view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
			<!-- 课程信息卡片 -->
			<view class="course-card">
				<view class="course-left">
					<image :src="courseInfo.image" mode="aspectFill" class="course-image"></image>
				</view>
				<view class="course-right">
					<text class="course-title">{{ courseInfo.title }}</text>
					<view class="course-tags">
						<view class="tag-item" v-for="(tag, index) in courseInfo.tags" :key="index">
							<text class="tag-text">{{ tag }}</text>
						</view>
					</view>
					<text class="course-price">¥{{ courseInfo.price.toFixed(2) }}</text>
				</view>
			</view>

			<!-- 支付方式选择 -->
			<view class="payment-methods">
				<view class="method-item" :class="{ disabled: pointsValueYuan <= 0 }" @click="togglePaymentMethod('points')">
					<view class="method-info">
						<text class="method-label">账户积分（{{ userInfo.points }}积分）</text>
						<text class="method-desc" v-if="userInfo.points > 0">约 ¥{{ (userInfo.points / userInfo.pointsExchangeRate).toFixed(2) }} 元</text>
					</view>
					<view class="radio-button" :class="{ active: usePoints }">
						<view class="radio-inner" v-if="usePoints"></view>
					</view>
				</view>
				<view class="method-item" :class="{ disabled: balanceYuan <= 0 }" @click="togglePaymentMethod('balance')">
					<view class="method-info">
						<text class="method-label">账户余额（¥{{ (userInfo.balance/100).toFixed(2) }} 元）</text>
					</view>
					<view class="radio-button" :class="{ active: useBalance }">
						<view class="radio-inner" v-if="useBalance"></view>
					</view>
				</view>
			</view>

			<!-- 支付明细 -->
			<view class="payment-summary">
				<view class="summary-item">
					<text class="summary-label">课程总金额</text>
					<text class="summary-value">¥{{ courseInfo.price.toFixed(2) }}</text>	
				</view>
				<view class="summary-item" v-if="usePoints && pointsUsedYuan > 0">
					<text class="summary-label">使用积分</text>
					<text class="summary-value">-¥{{ pointsUsedYuan.toFixed(2) }}</text>
				</view>
				<view class="summary-item" v-if="useBalance && balanceUsedYuan > 0">
					<text class="summary-label">使用余额</text>
					<text class="summary-value">-¥{{ balanceUsedYuan.toFixed(2) }}</text>
				</view>
				<view class="summary-item total">
					<text class="summary-label">合计:</text>
					<text class="summary-value total-price">¥{{ finalPrice.toFixed(2) }}</text>
				</view>
			</view>
		</view>

		<!-- 底部支付栏 -->
		<view class="bottom-payment">
			<view class="payment-left">
				<text class="final-price">¥{{ finalPrice.toFixed(2) }}</text>
				<!-- <text class="payment-method" v-if="selectedMethod === 'points'">使用积分支付</text>
				<text class="payment-method" v-if="selectedMethod === 'balance'">使用余额支付</text> -->
			</view>
			<view class="payment-right">
				<button class="pay-button" @click="confirmPayment" :disabled="!canPay">实际支付</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import course_api from "@/api/course_api.js"
import { requestPayment } from '@/utils/payment.js'

import { onLoad } from '@dcloudio/uni-app'



// 响应式数据
const statusBarHeight = ref(0)
const navBarHeight = ref(88)
const selectedMethod = ref('points') // 默认选择积分支付（兼容旧逻辑）
const usePoints = ref(true) // 是否使用积分
const useBalance = ref(false) // 是否使用余额
const courseInfo = ref({
	title: '找到已购买课程即学习找到已购买课程即可学习',
	price: 39.00,
	tags: ['佑安医院', '临床思维', '陈煜'],
	image: '/static/icon_home_my_patient.png'
})
const userInfo = ref({
	points: 0,
	balance: 0.00,
	pointsExchangeRate: 50 // 积分兑换比例，50积分=1元
})

// 计算属性
// 金额与抵扣（单位元）
const pointsValueYuan = computed(() => {
	const rate = userInfo.value.pointsExchangeRate || 50
	if (!rate) return 0
	return (userInfo.value.points || 0) / rate
})
const balanceYuan = computed(() => {
	// 后端余额单位为分
	return (userInfo.value.balance || 0) / 100
})

// 组合抵扣：先用积分再用余额
const pointsUsedYuan = computed(() => {
	const price = courseInfo.value.price || 0
	if (!usePoints.value || price <= 0) return 0
	return Math.min(pointsValueYuan.value, price)
})
const balanceUsedYuan = computed(() => {
	const price = courseInfo.value.price || 0
	if (!useBalance.value || price <= 0) return 0
	const remainAfterPoints = Math.max(0, price - pointsUsedYuan.value)
	return Math.min(balanceYuan.value, remainAfterPoints)
})
const finalPrice = computed(() => {
	const price = courseInfo.value.price || 0
	const remain = Math.max(0, price - pointsUsedYuan.value - balanceUsedYuan.value)
	return Number(remain.toFixed(2))
})
const canPay = computed(() => {
	const price = courseInfo.value.price || 0
	if (price === 0) return true // 免费
	if (finalPrice.value > 0) return true // 第三方可支付剩余
	return (usePoints.value || useBalance.value)
})

// 方法
const getSystemInfo = () => {
	const systemInfo = uni.getSystemInfoSync()
	statusBarHeight.value = systemInfo.statusBarHeight
	// #ifdef MP-WEIXIN
	navBarHeight.value = systemInfo.statusBarHeight + 44
	// #endif
	// #ifdef APP-PLUS
	navBarHeight.value = systemInfo.statusBarHeight + 44
	// #endif
}

const goBack = () => {
	uni.navigateBack()
}

const togglePaymentMethod = (method) => {
	if (method === 'points') {
		usePoints.value = !usePoints.value
	} else if (method === 'balance') {
		useBalance.value = !useBalance.value
	}
}

const order_pay_type = ref(0)

// 组合支付类型编码：
// 0免费；1余额；2积分；3余额+积分；4第三方；5余额+第三方；6积分+第三方；7余额+积分+第三方
const computeOrderPayType = () => {
    const price = courseInfo.value.price || 0
    // 免费
    if (price === 0) return 0

    const useP = usePoints.value && pointsUsedYuan.value > 0
    const useB = useBalance.value && balanceUsedYuan.value > 0
    const useThirdParty = finalPrice.value > 0

    if (useThirdParty && useB && useP) return 7
    if (useThirdParty && useB) return 5
    if (useThirdParty && useP) return 6
    if (useThirdParty) return 4
    if (useB && useP) return 3
    if (useB) return 1
    if (useP) return 2
    // 回退：如果都没选但也不免费，则第三方
    return 4
}

const confirmPayment = () => {
	if (!canPay.value) {
		uni.showToast({
			title: '积分/余额不足以完成支付',
			icon: 'none'
		})
		return
	}

	order_pay_type.value = computeOrderPayType()
	console.log('确认支付，支付方式:', { usePoints: usePoints.value, useBalance: useBalance.value, order_pay_type: order_pay_type.value })
	let openid = ""
	
	if (process.env.UNI_PLATFORM == "h5") {
		if (process.env.NODE_ENV === 'development') {
			openid = uni.getStorageSync('DEV_APPID');
		} else {
			openid = uni.getStorageSync('AUTH_APPID');
		}
	} else if(process.env.UNI_PLATFORM == "mp-weixin") {
		const {
			envVersion
		} = uni.getAccountInfoSync().miniProgram;
		if (envVersion == "release") {
			openid = uni.getStorageSync('DEV_APPID');
		} else {
			openid = uni.getStorageSync('AUTH_APPID');
		}
	}else{
		//app
	}
	course_api.createExcellencourseMixedOrder(courseId.value, order_pay_type.value, openid).then(res => {
		console.log('创建订单:', res)
		if (res.code == 200) {
			
			const payParams = res.data.order
			
			console.log(payParams)
			requestPayment(
			  payParams,
			  // 支付成功
			  (res) => {
				uni.showToast({ title: '支付成功', icon: 'none' })
				// 可以跳转到支付成功页，或者查询订单状态
			  },
			  // 支付失败
			  (err) => {
				console.error('支付失败', err)
				uni.showToast({ title: '支付失败或取消', icon: 'none' })
			  }
			)
			// uni.redirectTo({
			// 	url: '/pages_course/course_detail/course_detail?id='+courseId.value
			// })
		}else{
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	})
	
}

const courseId = ref(0)
const getCourseInfo = () => {
	// 获取课程详情
	course_api.excellencourseDetail(courseId.value).then(res => {
		console.log('课程详情:', res)
		if (res.code == 200) {
			const data = res.data
			// 根据优惠类型计算价格（单位：分）
			const now = Date.now()
			const beginTs = data.discount_begin_date ? new Date(data.discount_begin_date).getTime() : null
			const endTs = data.discount_end_date ? new Date(data.discount_end_date).getTime() : null
			let finalPriceCents = data.account || 0
			if (data.discount_type === 1 && data.discount_price > 0) {
				// 永久优惠
				finalPriceCents = data.discount_price
			} else if (data.discount_type === 2 && data.discount_price > 0) {
				// 限时优惠：仅在有效期内生效
				const inWindow = (!beginTs || beginTs <= now) && (!!endTs && endTs > now)
				if (inWindow) finalPriceCents = data.discount_price
			}
			courseInfo.value = {
				title: data.title || '课程标题',
				price: (finalPriceCents || 0) / 100,
				tags: [data.special_type_name || '精品课程'],
				image: data.index_img || '/static/icon_home_my_patient.png'
			}
		}
	}).catch(err => {
		console.error('获取课程详情失败:', err)
	})

	// 获取用户账户信息
	course_api.excellencoursePayPage(courseId.value).then(res => {
		console.log('用户账户信息:', res)
		if (res.code == 200) {
			const data = res.data
			userInfo.value = {
				points: data.totalPoints || 0,
				balance: data.availableBalance || 0,
				pointsExchangeRate: parseInt(data.points_price_exchange) || 50
			}
			
			// 根据可用余额和积分自动选择支付方式
			updatePaymentMethod()
		}
	}).catch(err => {
		console.error('获取用户账户信息失败:', err)
	})
}

// 更新支付方式选择
const updatePaymentMethod = () => {
	const coursePrice = courseInfo.value.price
	const pointsValue = userInfo.value.points / userInfo.value.pointsExchangeRate
	const balance = userInfo.value.balance
	
	// 如果积分足够，优先选择积分支付
	if (pointsValue >= coursePrice) {
		selectedMethod.value = 'points'
	}
	// 如果余额足够，选择余额支付
	else if (balance >= coursePrice) {
		selectedMethod.value = 'balance'
	}
	// 如果都不够，默认选择积分支付
	else {
		selectedMethod.value = 'points'
	}
}

onLoad((options) => {
  courseId.value = options.id // 已支持 App-Plus
  console.log('课程ID:', options.id)
})

// 生命周期
onMounted(() => {
	getSystemInfo()
	getCourseInfo()
})
</script>

<style lang="scss">
.payment-page {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 120rpx;
}

// 导航栏
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: #fff;
	border-bottom: 1rpx solid #e5e5e5;
	
	.nav-content {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		
		.nav-left, .nav-right {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.nav-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #FF4757; // 红色标题
		}
	}
}

.page-content {
	padding: 24rpx;
}

// 课程信息卡片
.course-card {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;
	display: flex;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
	
	.course-left {
		margin-right: 24rpx;
		
		.course-image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 12rpx;
		}
	}
	
	.course-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		.course-title {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
			line-height: 1.4;
			margin-bottom: 16rpx;
			// 文字溢出处理
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		
		.course-tags {
			display: flex;
			gap: 12rpx;
			margin-bottom: 16rpx;
			
			.tag-item {
				.tag-text {
					border: 1rpx solid #e0e0e0;
					color: #333;
					font-size: 20rpx;
					padding: 6rpx 12rpx;
					border-radius: 8rpx;
					background-color: #fff;
				}
			}
		}
		
		.course-price {
			font-size: 36rpx;
			color: #FF4757;
			font-weight: 600;
		}
	}
}

// 支付方式选择
.payment-methods {
	background-color: #fff;
	border-radius: 16rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
	
	.method-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx;
		border-bottom: 1rpx solid #f0f0f0;
		transition: all 0.3s;
		
		&:last-child {
			border-bottom: none;
		}
		
		&.disabled {
			opacity: 0.5;
			background-color: #f8f9fa;
			
			.method-label,
			.method-value,
			.method-desc {
				color: #999;
			}
		}
		
		.method-info {
			display: flex;
			flex-direction: column;
			gap: 4rpx;
			
			.method-label {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
			
			.method-value {
				font-size: 24rpx;
				color: #666;
			}
			
			.method-desc {
				font-size: 20rpx;
				color: #999;
			}
		}
		
		.radio-button {
			width: 40rpx;
			height: 40rpx;
			border: 2rpx solid #e0e0e0;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s;
			
			&.active {
				border-color: #FF4757;
				background-color: #FF4757;
			}
			
			.radio-inner {
				width: 20rpx;
				height: 20rpx;
				background-color: #fff;
				border-radius: 50%;
			}
		}
	}
}

// 支付明细
.payment-summary {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
	
	.summary-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		&.total {
			border-top: 1rpx solid #f0f0f0;
			padding-top: 20rpx;
			margin-top: 20rpx;
			
			.summary-label {
				font-weight: 600;
				color: #333;
			}
			
			.total-price {
				color: #FF4757;
				font-weight: 600;
			}
		}
		
		.summary-label {
			font-size: 28rpx;
			color: #666;
		}
		
		.summary-value {
			font-size: 28rpx;
			color: #333;
		}
	}
}

// 底部支付栏
.bottom-payment {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	background-color: #fff;
	border-top: 1rpx solid #e5e5e5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24rpx;
	z-index: 999;
	
	.payment-left {
		.final-price {
			font-size: 40rpx;
			color: #FF4757;
			font-weight: 600;
			margin-bottom: 8rpx;
		}
		
		.payment-method {
			font-size: 24rpx;
			color: #666;
		}
	}
	
	.payment-right {
		.pay-button {
			background-color: #FF4757;
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
			padding: 20rpx 60rpx;
			border-radius: 44rpx;
			border: none;
			box-shadow: 0 4rpx 16rpx rgba(255, 71, 87, 0.3);
			transition: all 0.3s;
			
			&:disabled {
				background-color: #ccc;
				box-shadow: none;
				opacity: 0.6;
			}
		}
	}
}
</style>
