<template>
	<view class="content">
		<view class="common-box">
			<view class="common-types">
				<view @click="setType(0)" :class="['common-type',type==0?'active':'']">扫码核销</view>
				<view @click="setType(1)" :class="['common-type',type==1?'active':'']">核销码核销</view>
				<view @click="setType(2)" :class="['common-type',type==2?'active':'']">手机号核销</view>
			</view>
		</view>
		
		<view class="content-area flex-1 h-1rpx">
			<view class="type0-container" v-show="type==0">
				<image src="https://static.ticket.sz-trip.com/uploads/20241107/3480f83dd4b5346e04ad184f61cc848a.png"></image>
				<view @click="scanCode">点击扫码核销</view>
			</view>
			<view class="type1-container" v-show="type==1">
				<view class="flex flex-items-center">
					<view class="hexiao-text">输入核销码</view>
					<input v-model="HXCode" class="hexiao-code"  placeholder="请输入内容" />
				</view>
				<view class="hexiao-btn" @click="verifyByCode">立即核销</view>
			</view>
			<view class="type1-container" v-show="type==2">
				<view v-if="orderList.length<=0">
					<view class="flex flex-items-center">
						<view class="hexiao-text">输入手机号</view>
						<input v-model="HXPhone" class="hexiao-code"  placeholder="请输入内容" />
					</view>
					<view class="tips">
						<view>注：仅支持查询当日订单 </view>
						<view>支持手机号模糊搜索（不少于4位）</view>
					</view>
					<view class="hexiao-btn" style="margin-top: 100rpx;" @click="searchByPhone">查询</view>
				</view>
				
				<view class="order-list" v-else>
					<view class="order-item">
						<view class="title">订单详情</view>
						<view class="flex">
							<view class="label">下单日期:</view>
							<view class="text">2024-11-21</view>
						</view>
						<view class="flex">
							<view class="label">订单号:</view>
							<view class="text">2024-11-21</view>
						</view>
						<view class="flex">
							<view class="label">订单名称:</view>
							<view class="text">订单名称订单名称订单名称订单名称 订单名称订单名称订单名称订单名称</view>
						</view>
						<view class="flex">
							<view class="label">数量:</view>
							<view class="text">2024-11-21</view>
						</view>
						<view class="flex">
							<view class="label">订单状态:</view>
							<view class="text">2024-11-21</view>
						</view>
						<view class="flex">
							<view class="label">时段:</view>
							<view class="text">2024-11-21</view>
						</view>
						<view class="flex">
							<view class="label">出行人:</view>
							<view class="text">2024-11-21</view>
						</view>
						<view class="flex">
							<view class="label">出行人手机号:</view>
							<view class="text">2024-11-21</view>
						</view>
						<view class="flex">
							<view class="label">出行人身份证:</view>
							<view class="text">2024-11-21</view>
						</view>
						
						<view class="hexiao-btn" @click="verifyByPhone">核销</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 核销弹窗 -->
		<uni-popup ref="popup" type="center" style="width: 100%;">
			<view class="pop-order-detail order-item">
					<view class="title flex-shrink-0">确认是否核销</view>
					<view class="pop-order-content flex-1 h-1rpx">
						<view class="flex">
							<view class="label">下单日期:</view>
							<view class="text">2024-11-21</view>
						</view>
						<view class="flex">
							<view class="label">订单号:</view>
							<view class="text">2024-11-21</view>
						</view>
						<view class="flex">
							<view class="label">订单名称:</view>
							<view class="text"> 订单名称</view>
						</view>
						<view class="flex">
							<view class="label">数量:</view>
							<view class="text">2024-11-21</view>
						</view>
						<view class="flex">
							<view class="label">订单状态:</view>
							<view class="text">2024-11-21</view>
						</view>
						<view class="flex">
							<view class="label">时段:</view>
							<view class="text">2024-11-21</view>
						</view>
						<view class="flex">
							<view class="label">出行人:</view>
							<view class="text">2024-11-21</view>
						</view>
						<view class="flex">
							<view class="label">出行人手机号:</view>
							<view class="text">2024-11-21</view>
						</view>
						<view class="flex">
							<view class="label">出行人身份证:</view>
							<view class="text">2024-11-21</view>
						</view>
					</view>
					
					<view class="bottom-btn">
						<view class="hexiao-btn" @click="confirmVerify">核销</view>
					</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import wxsdk from 'weixin-js-sdk'
	// todo扫码 微信内H5扫码
	// https://ask.dcloud.net.cn/article/35380
	export default {
		data() {
			return {
				type: 0,
				HXCode: '', // 核销码
				HXPhone:"",
				orderList: [],
			};
		},
		onShow() {
		},
		async onLoad() {
			await this.initWXSKD()
		},
		methods: {
			async initWXSKD () {
				try {
					if (window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
						let that = this
						let res = await this.Post({
							web_url: encodeURIComponent(window.location.href.split('#')[0]),
							apis: 'scanQRCode'
						}, '/api/wx/jsSdk')

						if (res) {
						    let data = res.jssdk
						    //初始化微信功能
						    wxsdk.config({
								debug: false,
								appId: data.appId,
								timestamp: data.timestamp,
								nonceStr: data.nonceStr,
								signature: data.signature,// + "asdfasdf",//测试获取地理位置失败
								jsApiList: ['scanQRCode']
						    });
						}
					}
				} catch (e) {}
			},
			// 调起微信扫码
			scanCode () {
				let _this = this
				uni.showLoading()
				wxsdk.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
					success: function (res) {
						uni.hideLoading()
						alert(res.resultStr.split('?')[1].split('=')[1])
						// _this.getOrderByCode(res.resultStr.split('?')[1].split('=')[1])
					},
					fail: function (error) {
						uni.hideLoading()
					}
				})
			},
			
			
			setType (type) {
				this.type = type
			},
			// 微信扫码获取订单详情
			getOrderByCode (code) {
				this.Post({
					
				}, '/api/wx/jsSdk')
			},
			// 核销码核销
			verifyByCode () {
				this.$refs.popup.open()
			},
			confirmVerify () {
				
			},
			
			// 手机搜索核销单
			searchByPhone () {
				if (this.HXPhone == '') {
					this.$toast('请输入手机号')
					return
				} else if (this.HXPhone.length < 4) {
					this.$toast('查询手机号最低4位')
					return
				}
				// this.Post({
				// 	mobile: this.HXPhone
				// }, '/api/wx/jsSdk').then(res=>{
					
				// })
				this.orderList =  [{}]
			},
			// 手机号核销
			verifyByPhone () {
				let _this = this
				uni.showModal({
					title: '',
					content: '确认是否核销此订单',
					confirmColor: '#96684F',
					success: function (res) {
						if (res.confirm) {
							
							// todo
							uni.showToast({title:'核销成功'})
							_this.orderList = []
						}
					}
				});

			},
			
			getInfo() {
				this.Post({
					scenic_id: this.scenicId,
					goods_id: this.goodsId,
					offset: this.list.length,
					limit: 10
				}, '/api/scenic/getGoodsCommentByScenicId').then(res => {
					if (res) {
						this.list = [...this.list, ...res.data]
						this.list.forEach(item => {
							item.close = false
							item.needShowExpande = false
						})
						console.log('添加close的list',this.list);
						if (res.data.length < 10) {
							this.finished = true
						}
					}
				})
			},
			
		},
		
	}
</script>

<style lang="scss" scoped>
	*{
		box-sizing: border-box;
	}
	.content {
		height: calc(100vh - 44px - 50px);
		overflow-x: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
	}
	
	.common-box {
		height: 106rpx;
		width: 100%;
		flex-shrink: 0;
		
		.common-types {
			width: 100%;
			background: white;
			height: 106rpx;
			font-size: 31rpx;
			z-index: 10;
			color: #010101;
			font-weight: bold;
			overflow: hidden;
			padding: 0 88rpx;
			display: flex;
			justify-content: space-between;
		}
		
		.common-type {
			flex-shrink: 0;
			line-height: 106rpx;
			height: 106rpx;
			position: relative;
			width: 150rpx;
			text-align: center;
		}
		
		.common-type.active:after {
			display: block;
			width: 50%;
			font-size: 0;
			content: '1';
			margin: auto;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 1rpx;
			height: 6rpx;
			background: #96684F;
			border-radius: 6rpx;
		}
	}
	
	.content-area{
		overflow-y: auto;
		overflow-x: hidden;
	}
	
	.type0-container{
		padding: 185rpx 0 0 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		font-size: 32rpx;
		color: #707070;
		image{
			width: 176.67rpx;
			height: 176.67rpx;
			display: block;
			margin-bottom: 25rpx;
		}
	}
	
	.type1-container{
		padding: 39rpx 26rpx;
		.hexiao-text{
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
		}
		.hexiao-code{
			margin-left: 22rpx;
			width: 537rpx;
			height: 107rpx;
			border-radius: 7rpx;
			border: 1px solid #666666;
			font-size: 28rpx;
			line-height: 107rpx;
			padding: 0 27rpx;
		}
		.hexiao-btn{
			width: 307rpx;
			height: 80rpx;
			background: #96684F;
			border-radius: 40rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			display: block;
			margin: 174rpx auto 0;
		}
		
		.tips{
			padding: 20rpx 0 0 180rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			line-height: 40rpx;
		}
	}
	
	.order-item{
		width: 100%;
		background: #FFFFFF;
		border-radius: 13rpx;
		padding: 30rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		&>view{
			margin-bottom: 26rpx;
		}
		.title{
			font-size: 32rpx;
			text-align: center;
		}
		
		.label{
			width: 200rpx;
			flex-shrink: 0;
		}
		.text{
			flex: 1;
			width: 1rpx;
			color: #646464;;
		}
		
		.hexiao-btn{
			margin: 0;
			margin-left: auto;
		}
	}
	
	.pop-order-detail{
		width: 640rpx;
		height: 800rpx;
		background: #FFFFFF;
		border-radius: 13rpx;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.pop-order-content{
			overflow-x: hidden;
			overflow-y: auto;
			&>view{
				margin-bottom: 12rpx;
			}
		}
		.bottom-btn{
			display: flex;
			width: 100%;
			padding: 20rpx 0 0;
			align-items: center;
			justify-content: space-between;
			margin: 0;
		}
		.hexiao-btn{
			width: 160rpx;
			height: 60rpx;
			background: #96684F;
			border-radius: 30rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 60rpx;
			text-align: center;
			display: block;
		}
		
	}
</style>