<template>
	<view class="pageContent">
		<!-- 吸顶自定义导航栏 -->
		<u-sticky offset-top="0"><my-backNar /></u-sticky>
		<view class="content">
			<view class="orderStatusline">
				{{orderInfo.status_txt}}
			</view>
			<view class="userAddress">
				<view class="addressInfo">
					<view class="addressName">
						<span
							v-if="orderInfo.delivery.area">{{orderInfo.delivery.area}}</span>{{orderInfo.delivery.address}}
					</view>
					<view class="userInfo">
						<span>{{orderInfo.delivery.contacts}}</span>
						<span>{{orderInfo.delivery.phone}}</span>
						<span class="active">{{orderInfo.delivery_typename}}</span>
					</view>
				</view>
				<view class="navigationModel"
					@click="gotoHere(orderInfo.delivery.address,orderInfo.delivery.lat,orderInfo.delivery.lng)"
					v-if="orderInfo.delivery_type == 1">
					<view class="navigationIcon">
						<image class="init_image" src="http://amy.yyinhong.cn/uploads/wximg/dh.png" mode=""></image>
					</view>
					<view class="navigationText">
						导航
					</view>
				</view>
			</view>
			<view :class="[orderInfo.order_status == 3?'orderModel1':'orderModel']"
				v-for="(item,index) in orderInfo.order_goods" :key="index">
				<view class="orderImg" @click="$utils.goProductDetails(item.goods_id)">
					<image class="init_image" :src="item.goods_img" mode=""></image>
				</view>
				<view class="orderProductInfo" @click="$utils.goProductDetails(item.goods_id)">
					<view class="orderName">
						{{item.goods_name}}
					</view>
					<view class="orderNorms">
						<span>{{item.goods_attr}}</span>
						<span>x{{item.goods_number}}</span>
					</view>
					<view class="orderPrice">
						<span>¥</span>{{item.goods_price}}
					</view>
				</view>
				<view class="orderOtherBtn" style="position: absolute;right: 30rpx;bottom: 20rpx;"
					@click="gowriteEvaluation(item.og_id)" v-show="item.is_comment == 0">
					去评价
				</view>
				<view class="orderOtherBtn" style="position: absolute;right: 30rpx;bottom: 20rpx;"
					v-show="item.is_comment != 0">
					已评价
				</view>
			</view>
			<view class="orderInfo">
				<view class="orderLine">
					<span>订单号</span>
					<span>{{orderInfo.order_sn}}</span>
				</view>
				<view class="orderLine">
					<span>下单时间</span>
					<span>{{orderInfo.created_at}}</span>
				</view>
				<view class="orderLine">
					<span>合计金额</span>
					<span class="active">{{orderInfo.order_amount}}</span>
				</view>
			</view>
			<view class="orderBtnList">
				<view class="orderBtn" @click="payMthods(orderInfo.id)" v-show="orderInfo.order_status == 0">
					去支付
				</view>
				<view class="orderBtn" @click="goCode(orderInfo.verification_code)"
					v-show="orderInfo.order_status == 2">
					核销码
				</view>
				<view class="orderOtherBtn" @click="del_order"
					v-show="orderInfo.order_status == 0 || orderInfo.order_status == 1">
					取消
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo: {
					status_txt: null,
					order_sn: null,
					created_at: null,
					order_amount: null,
				},
				id: '', // 订单ID
				order_sn: '', // 订单号
				btnFlag: false,
				navBarHeight: getApp().globalData.navBarHeight,
			}
		},
		onLoad(option) {
			// 检查是否是扫码或微信消息模板进入，参数可能在option.q中
			if (option.q) {
				try {
					// 解码URL
					const url = decodeURIComponent(option.q)
					console.log('扫码/消息模板URL:', url)
						
					// 提取查询参数
					if (url.includes('?')) {
						const paramStr = url.split('?')[1]
						const params = {}
						paramStr.split('&').forEach(item => {
							const [key, value] = item.split('=')
							if (key && value) {
								params[key] = decodeURIComponent(value)
							}
						})
							
						// 获取id或order_sn参数
						if (params.id) {
							this.id = params.id
							console.log('从扫码/消息模板获取的订单ID:', this.id)
						} else if (params.order_sn) {
							this.order_sn = params.order_sn
							console.log('从扫码/消息模板获取的订单号:', this.order_sn)
						}
					}
				} catch (error) {
					console.error('解析扫码/消息模板参数失败:', error)
				}
			} else {
				// 普通页面跳转传参
				this.id = option.id || '';
				this.order_sn = option.order_sn || '';
			}
		},
		onShow() {
			this.btnFlag = false
			this.getOrder()
		},
		methods: {
			goCode(code) {
				uni.navigateTo({
					url: '/pageSub-pc/pages/orderCode/orderCode?code=' + code
				})
			},
			payMthods(order_id) {
				if (this.btnFlag) {
					return
				}
				this.btnFlag = true
				setTimeout(() => {
					this.btnFlag = false
				}, 10000)
				this.$utils.payOrder(order_id)
			},
			gotoHere(address, lat, lng) {
				console.log(address, lat, lng)
				uni.openLocation({
					longitude: parseFloat(lng), // 经度，范围为-180~180，负数表示西经
					latitude: parseFloat(lat), // 纬度，范围为-90~90，负数表示南纬
					scale: 28, // 缩放比例
					name: address, //终点名称
					address: address, //终点详细地址
					success: function(res) {
						console.log('success:', res);
					}
				});
			},
			//获取订单详情
			getOrder() {
				// 构建请求参数，优先使用 order_id，没有则使用 order_sn
				let params = {};
				if (this.id) {
					params.order_id = this.id;
				} else if (this.order_sn) {
					params.order_sn = this.order_sn;
				}
				
				this.$request('/order-info', 'GET', params).then(res => {
					console.log(res.data)
					this.orderInfo = res.data;
					// 如果通过 order_sn 获取，保存 id 供后续使用
					if (!this.id && res.data.id) {
						this.id = res.data.id;
					}
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			},
			del_order() {
				if (this.btnFlag) {
					return
				}
				this.btnFlag = true
				setTimeout(() => {
					this.btnFlag = false
				}, 4000)
				this.$request('/cance-order', 'POST', {
					order_id: this.id
				}).then(res => {
					console.log(res.data)
					this.$refs.uToast.show({
						type: 'success',
						message: "订单取消成功！",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/jump.png',
						complete() {
							uni.navigateBack()
						}
					})
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: '' + err.message
					})
				})
			},
			//写评价
			gowriteEvaluation(id) {
				uni.navigateTo({
					url: '/pageSub-pc/pages/writeEvaluation/writeEvaluation?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pageContent {
		position: relative;
	}

	/* 其他样式 */
	.content {
		width: 100vw;
		height: calc(100vh - 220rpx);
		padding-top: 30rpx;
		overflow-y: scroll;
		background: linear-gradient(to bottom, #f3d4d7, #f8f8f8, #f8f8f8);
	}

	.orderStatusline {
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		color: #333333;
		font-weight: 600;
	}

	.userAddress {
		width: calc(100% - 120rpx);
		margin: 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
	}

	.addressInfo {
		flex: 1;
	}

	.addressName {
		width: 100%;
		font-size: 30rpx;
		color: #333333;
		line-height: 44rpx;
		display: -webkit-box;
		/* 使用弹性盒模型 */
		-webkit-box-orient: vertical;
		/* 垂直方向的弹性盒 */
		-webkit-line-clamp: 2;
		/* 显示两行 */
		overflow: hidden;
		/* 隐藏超出部分 */
		text-overflow: ellipsis;
	}

	.userInfo {
		line-height: 34rpx;
		font-size: 24rpx;
		color: #999999;

		span {
			margin-right: 20rpx;
		}

		.active {
			color: #D3195E;
		}
	}

	.navigationModel {
		width: 40rpx;
		margin-left: 20rpx;
		font-size: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.navigationIcon {
			width: 44rpx;
			height: 44rpx;
			margin-bottom: 10rpx;
			border-radius: 44rpx;
		}
	}

	.orderModel {
		width: calc(100% - 120rpx);
		margin: 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
	}

	.orderModel1 {
		width: calc(100% - 120rpx);
		margin: 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
		padding-bottom: 80rpx;
		position: relative;
	}

	.orderImg {
		background-color: #f3d4d7;
		width: 180rpx;
		height: 180rpx;
		margin-right: 30rpx;
	}

	.orderProductInfo {
		height: 180rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.orderName {
		font-size: 30rpx;
		color: #333333;
		line-height: 36rpx;
		display: -webkit-box;
		/* 使用弹性盒模型 */
		-webkit-box-orient: vertical;
		/* 垂直方向的弹性盒 */
		-webkit-line-clamp: 2;
		/* 显示两行 */
		overflow: hidden;
		/* 隐藏超出部分 */
		text-overflow: ellipsis;
		/* 使用省略号 */
	}

	.orderNorms {
		line-height: 58rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		color: #999999;
		font-size: 24rpx;
	}

	.orderPrice {
		height: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: baseline;
		color: #D61A62;
		font-size: 36rpx;

		span {
			font-size: 24rpx;
			margin-right: 10rpx;
		}
	}

	.orderInfo {
		width: calc(100% - 120rpx);
		margin: 30rpx;
		padding: 30rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		border-radius: 20rpx;
		height: 200rpx;
	}

	.orderLine {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #333333;

		.active {
			color: #D61A62;
		}
	}

	.orderBtnList {
		position: fixed;
		bottom: 0;
		left: 0;
		width: calc(100% - 120rpx);
		padding: 60rpx;
		padding-top: 30rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		height: 60rpx;
		line-height: 58rpx;
	}

	.orderBtn {
		height: 58rpx;
		width: 160rpx;
		text-align: center;
		border-radius: 58rpx;
		border: 1rpx solid #D3195E;
		background-color: #D3195E;
		color: #ffffff;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.orderOtherBtn {
		height: 58rpx;
		line-height: 58rpx;
		width: 160rpx;
		text-align: center;
		border-radius: 58rpx;
		border: 1rpx solid #777777;
		background-color: #ffffff;
		color: #777777;
		margin-left: 20rpx;
		font-size: 28rpx;
	}
</style>