<template>
	<view class="order-detail-container">
		<!-- 头部信息 -->
		<view style="width: 100%;background: #f4f5f6;box-sizing: border-box;padding-top: 88px;">
			<headers titles="订单详情">
				<uni-icons type="left" color="#000000" size="22px"></uni-icons>
			</headers>
			<view class="status-card" :class="'status-' + orderData.paymentStatus">
				<text class="status-text">{{ getStatusText(orderData.paymentStatus) }}</text>
			</view>
		</view>

		<!-- 课程信息 -->
		<view class="course-card">
			<view class="course-header">
				<!-- <text class="course-type" :class="'type-' + orderData.courseType">{{ orderData.courseType }}</text> -->
				<text class="order-time">{{ formatTime(orderData.createTime) }}</text>
			</view>

			<view class="course-info">
				<image :src="imageUrl + '/' + orderData.photo" class="course-image"></image>
				<view class="course-detail">
					<text class="course-title">{{ orderData.courseName }}</text>
					<view class='course-twoType'>
						<text class="course-type">{{ getLicenseTypeDescription(orderData.courseType) }}</text>
						<text class="course-type">{{ orderData.courseType }}</text>
					</view>
					<text class="course-desc">{{ courseDetails.tittle }}</text>
				</view>
			</view>
		</view>

		<!-- 用户信息 -->
		<view class="info-card">
			<view class="info-item">
				<text class="info-title">学员姓名</text>
				<text class="info-value">{{ orderData.userName }}</text>
			</view>
			<view class="info-item">
				<text class="info-title">学员电话</text>
				<text class="info-value">{{ orderData.userPhone }}</text>
			</view>
			<view class="info-item">
				<text class="info-title">证件号码</text>
				<text class="info-value">{{ orderData.userNo }}</text>
			</view>
			<view class="info-item" v-if="orderData.coachUserName">
				<text class="info-title">教练姓名</text>
				<text class="info-value">{{ orderData.coachUserName }}</text>
			</view>
			<view class="info-item" v-if="schoolDetails.corpName">
				<text class="info-title">驾校名称</text>
				<text class="info-value">{{ schoolDetails.corpName }}</text>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="info-card">
			<view class="info-item">
				<text class="info-title">订单编号</text>
				<text class="info-value">{{ orderData.orderNo }}</text>
			</view>
			<view class="info-item">
				<text class="info-title">下单时间</text>
				<text class="info-value">{{ formatTime(orderData.createTime) }}</text>
			</view>
			<view class="info-item">
				<text class="info-title">支付方式</text>
				<text class="info-value">{{ getPayTypeText(orderData.payType) }}</text>
			</view>
			<view class="info-item">
				<text class="info-title">支付状态</text>
				<text class="info-value">{{ getStatusText(orderData.paymentStatus) }}</text>
			</view>
			<view class="info-item">
				<text class="info-title">是否面签</text>
				<text class="info-value">{{ orderData.isSign ? '已面签' : '未面签' }}</text>
			</view>
			<view class="info-item">
				<text class="info-title">是否终止</text>
				<text class="info-value">{{ orderData.ifEnd ? '已终止' : '未终止' }}</text>
			</view>
			<view class="info-item" v-if="orderData.endReason">
				<text class="info-title">终止原因</text>
				<text class="info-value">{{ orderData.endReason }}</text>
			</view>
		</view>

		<!-- 价格信息 -->
		<view class="price-card">
			<!-- <view class="price-row">
        <text class="price-label">课程{{ orderData.payType === '2' ? '定金' : '全款' }}</text>
        <text class="price-value">¥{{ orderData.reserveMoney.toFixed(2) }}</text>
      </view> -->

			<view class="price-row">
				<text class="price-label">课程金额</text>
				<text class="price-value">¥{{ courseDetails.price }}</text>
			</view>

			<view class="price-row" v-if="orderData.payType === '1' && orderData.paymentStatus === '0' ">
				<text class="price-label">定金金额</text>
				<text class="price-value">¥{{ courseDetails.reserveMoney }}</text>
			</view>

			<view class="price-row" v-if="orderData.payType === '1' && orderData.paymentStatus === '0' ">
				<text class="price-label">尾款金额</text>
				<text class="price-value">¥{{ orderData.restMoney.toFixed(2) }}</text>
			</view>

			<view class="price-row" v-if="orderData.payType === '1' && orderData.paymentStatus === '2' ">
				<text class="price-label">待付尾款</text>
				<text class="price-value">¥{{ orderData.restMoney.toFixed(2) }}</text>
			</view>



			<view class="price-row total" v-if="orderData.reserveMoney && orderData.paymentStatus === '2'">
				<text class="price-label">实付款</text>
				<text class="price-value">¥{{ orderData.reserveMoney.toFixed(2) }}</text>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="footer" v-if="orderData.paymentStatus === '0'">
			<view class="cancel-button" @click="cancelOrder">
				<text class="pay-button-text">取消订单</text>
			</view>
			<view class="pay-button" @click="handlePay">
				<text class="pay-button-text">立即支付</text>
			</view>
		</view>
		<!-- <view class="footer" v-else-if="orderData.payType === '1'">
	  <view class="pay-button" @click="handlePay">
	    <text class="pay-button-text">支付尾款</text>
	  </view>
	</view> -->
	</view>
</template>

<script>
	import headers from "@/components/header/headers.vue";
	import request from '@/utils/request.js'
	export default {
		components: {
			headers
		},
		data() {
			return {
				imageUrl: this.$imagesUrl,
				courseDetails: [],
				schoolDetails: [],
				orderData: {
					/* coachUserId: 4289,
					coachUserName: null,
					courseId: "1",
					courseName: "测试课程",
					courseType: "C1",
					createTime: 1744179195000,
					creator: "5171",
					deleted: false,
					endReason: "测试",
					endTime: null,
					gradTime: null,
					id: "6aea0dbe2c22ec7eaf2859ad6d0bc7ea",
					ifAssignmentCoach: 0,
					ifEnd: false,
					isCreated: false,
					isSign: 0,
					oldOrderId: null,
					orderNo: "69975643780792",
					passTime: null,
					payType: "1",
					paymentStatus: "0",
					photo: "lanan/5181406098997f57fbd12b968e65aec7d899c4e84f9011f754f5d6074eaa2888.png",
					reserveMoney: null,
					restMoney: 0.01,
					tenantId: 180,
					type: "C1",
					updateTime: 1744179195000,
					updater: "5171",
					userId: 5171,
					userName: "刘松源",
					userNo: "612701199307280651",
					userPhone: "15305306404",
					userSex: "0" */
				}
			}
		},
		onLoad(options) {
			const order = JSON.parse(decodeURIComponent(options.data));
			console.log('order', order)
			this.orderData = order;
			this.getCourseDetails()
		},
		methods: {
			getStatusText(status) {
				const statusMap = {
					'0': '待支付',
					'1': '已取消',
					'2': '已支付',
					'7': '退款中',
					'8': '退款成功'
				}
				return statusMap[status] || '未知状态'
			},

			getPayTypeText(type) {
				const typeMap = {
					'2': '全款支付',
					'1': '定金支付'
				}
				return typeMap[type] || '未知支付方式'
			},

			getCourseTypeText(type) {
				const typeMap = {
					'C1': 'C1驾照课程',
					'C2': 'C2驾照课程'
				}
				return typeMap[type] || type
			},

			formatTime(timestamp) {
				if (!timestamp) return '无'
				const date = new Date(timestamp)
				return `${date.getFullYear()}-${this.padZero(date.getMonth() + 1)}-${this.padZero(date.getDate())} ${this.padZero(date.getHours())}:${this.padZero(date.getMinutes())}:${this.padZero(date.getSeconds())}`
			},

			padZero(num) {
				return num < 10 ? `0${num}` : num
			},

			/* handlePay() {
      uni.showLoading({ title: '跳转支付中...' })
	  this.directWxPay(this.orderData.orderId, this.orderData.orderNo, this.orderData.payType)
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({ title: '支付成功', icon: 'success' })
      }, 1500)
    }, */
			async handlePay() {
				uni.showLoading({
					title: '跳转支付中...'
				});
				try {
					const res = await this.directWxPay(this.orderData.id, this.orderData.orderNo, this.orderData
						.payType);
					if (res === 'success') {
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						});
					} else if (res === 'cancelled') {
						uni.showToast({
							title: '已取消支付',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: '支付失败，请重试',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.showToast({
						title: '支付异常',
						icon: 'none'
					});
					console.error('支付异常', error);
				} finally {
					uni.hideLoading();
				}
			},

			getCourseDetails() {
				request({
					url: '/app-api/dl-drive-school-course-small/get',
					method: 'GET',
					params: {
						id: this.orderData.courseId,
						tenantId: this.orderData.tenantId,
					},
					tenantIdFlag: false
				}).then(res => {
					this.courseDetails = res.data;
					this.getSchoolDetails()
				})
			},
			getSchoolDetails() {
				request({
					url: '/userClient/base/companySmallProgram/pageNoTenantId',
					method: 'GET',
					params: {
						id: this.orderData.tenantId,
						serviceCodes: 'jiaxiao',
					},
					tenantIdFlag: false
				}).then(res => {
					const data = res.data.records;
					this.schoolDetails = Array.isArray(data) && data.length > 0 ? data[0] : null;
				})
			},

			async directWxPay(orderId, orderNo, payType) {
				try {
					// 1. 获取预支付参数
					const prepayRes = await request({
						url: `/small/jxInfo/prepayment?type=jsapi&orderNo=${orderNo}&orderId=${orderId}&payType=${payType}&tenantId=${this.orderData.tenantId}`,
						method: 'get'
					});

					// 2. 调用微信支付
					const result = await this.handleWxPayment(prepayRes);

					// 3. 支付成功后处理逻辑（可选）
					if (result === 'success') {
						await this.updateOrderStatus(orderId, '2');
						await this.insertSchoolStudent(); // 如果有插入学员信息
						this.signContract(); // 如果还需要签约
					}

					return result;
				} catch (error) {
					console.error("支付失败：", error);
					uni.showToast({
						title: '支付失败，请重试',
						icon: 'none'
					});
					return 'fail';
				}
			},

			handleWxPayment(paymentParams) {
				return new Promise((resolve) => {
					wx.requestPayment({
						...paymentParams,
						success: (res) => {
							resolve(res.errMsg === 'requestPayment:ok' ? 'success' : 'fail');
						},
						fail: (err) => {
							resolve(err.errMsg === 'requestPayment:fail cancel' ? 'cancelled' :
								'fail');
						}
					});
				});
			},

			// 插入学员信息
			insertSchoolStudent() {
				request({
					url: '/app-api/small/dl-drive-school-student/create',
					method: 'post',
					data: {
						name: this.orderData.userName,
						sex: this.orderData.userSex,
						phone: this.orderData.userPhone,
						idCard: this.orderData.userNo,
						registAddress: this.Address,
						userId: this.orderData.userId,
						tenantId: this.orderData.tenantId,
					}
				})
				this.updateSysUsersNickName()
			},

			// 修改users信息
			updateSysUsersNickName() {
				request({
					url: '/app-api/system/user/update',
					method: 'PUT',
					data: {
						nickname: this.orderData.userName,
						id: this.orderData.userId,
					}
				})
			},

			// 更新订单状态
			async updateOrderStatus(orderId, status) {
				await request({
					url: '/app-api/small/drive/school-course-order/update',
					method: 'put',
					data: {
						id: orderId,
						paymentStatus: status
					}
				});
			},

			// 签合同
			signContract() {
				const contractData = {
					adress: '',
					name: this.orderData.userName,
					tenantId: this.orderData.tenantId,
					type: this.orderData.type,
					carType: this.getLicenseTypeDescription(this.orderData.type),
					money: (this.orderData.reserveMoney * 100 + this.orderData.restMoney * 100) / 100,
					indent: this.orderData.userNo,
					phone: this.orderData.userPhone,
					time: this.getCurrentDateTime(),
					endTime: this.getEndTime(),
				};
				uni.navigateTo({
					url: '/pages/index/contract?data=' + encodeURIComponent(JSON.stringify(contractData))
				})
			},

			// 格式化时间
			getCurrentDateTime() {
				const now = new Date();

				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}`;
				// return now;
			},
			// 获取三年后的时间
			getEndTime() {
				const now = new Date();
				now.setFullYear(now.getFullYear() + 3); // 加三年

				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},


			getLicenseTypeDescription(code) {
				const licenseMap = {
					C1: "小型手动挡汽车",
					C2: "小型自动档汽车",
					B1: "中型客车",
					B2: "大型货车",
					A1: "大型客车",
					A2: "牵引车",
					A3: "城市公交车",
					D: "三轮摩托车",
					E: "两轮摩托车",
					F: "轻便摩托车"
				};

				return licenseMap[code] || "未知类型";
			},

			// 取消订单
			cancelOrder() {
				request({
					url: '/app-api/small/drive/school-course-order/update',
					method: 'PUT',
					data: {
						id: this.orderData.id,
						paymentStatus: '1',
					}
				}).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: '取消成功',
							icon: 'success',
							duration: 2000
						});
						this.orderData.paymentStatus = '1';
					}
				});
			},

		}
	}
</script>


<style scoped>
	.order-detail-container {
		padding-bottom: 200rpx;
		background-color: #f7f7f7;
		min-height: 100vh;
	}

	/* 头部样式 */
	.header {
		position: relative;
	}

	.navbar {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
		position: relative;
	}

	.navbar-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.status-card {
		height: 40rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.status-0 {
		background: linear-gradient(to right, #ff976a, #ff6600);
	}

	.status-1 {
		background: linear-gradient(to right, #ffcc00, #ff9900);
	}

	.status-2 {
		background: linear-gradient(to right, #19be6b, #00b050);
	}

	.status-3 {
		background: linear-gradient(to right, #dd6161, #cc0000);
	}

	.status-4 {
		background: linear-gradient(to right, #909399, #808080);
	}

	.status-text {
		font-size: 28rpx;
		margin-top: 2rpx;
	}

	/* 卡片通用样式 */
	.info-card,
	.course-card,
	.price-card {
		margin: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	/* 信息项样式 */
	.info-item {
		padding: 24rpx 30rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.info-title {
		color: #666;
		font-size: 28rpx;
	}

	.info-value {
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
	}

	/* 课程卡片样式 */
	.course-header {
		padding: 30rpx 30rpx 0;
		display: flex;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}

	.course-twoType {
		width: 90%;
		display: flex;
		justify-content: flex-start;
	}

	.course-type {
		font-size: 22rpx;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
		color: #fff;
		background-color: #2979ff;
		margin-right: 10rpx;
	}

	.type-C1 {
		background-color: #19be6b;
	}

	.type-C2 {
		background-color: #2979ff;
	}

	.order-time {
		font-size: 24rpx;
		color: #909399;
	}

	.course-info {
		padding: 0 30rpx 30rpx;
		display: flex;
	}

	.course-image {
		width: 240rpx;
		height: 180rpx;
		border-radius: 8rpx;
	}

	.course-detail {
		flex: 1;
		margin-left: 24rpx;
		display: flex;
		flex-direction: column;
	}

	.course-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 12rpx;
		color: #333;
	}

	.course-desc {
		font-size: 24rpx;
		color: #909399;
		line-height: 1.5;
		margin-bottom: 8rpx;

		display: -webkit-box;
		-webkit-line-clamp: 3;
		/* 限制显示3行 */
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* 价格卡片样式 */
	.price-card {
		padding: 30rpx;
	}

	.price-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}

	.price-row.total {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 2rpx dashed #eee;
		font-weight: bold;
		font-size: 32rpx;
	}

	.price-label {
		color: #666;
	}

	.price-value {
		color: #ff6600;
	}

	/* 底部按钮样式 */
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx;
		background: #fff;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
		display: flex;
		justify-content: space-around;
	}

	/* .pay-button {
  height: 80rpx;
  background-color: #ff9900;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cancel-button {
  height: 80rpx;
  background-color: #ff0105;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
} */
	.pay-button,
	.cancel-button {
		flex: 1;
		height: 80rpx;
		margin: 0 10rpx;
		/* 两个按钮之间留点间距 */
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pay-button {
		background-color: #ff9900;
	}

	.cancel-button {
		background-color: #ff0105;
	}

	.pay-button-text {
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}
</style>