<template>
	<page-meta :page-style="`overflow:${show9 ? 'hidden' : 'visible'};`"></page-meta>
	<view class="verification-page">
		<!-- 自定义导航栏 -->
		<wd-navbar :bordered="false"
			custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
			safeAreaInsetTop fixed placeholder>
			<template #left>
				<view class="li-ml-15 li-mt-10 li-flex li-items-center">
					<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
						@click="toPages({type:'nav'})"></text>
					<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mb-8 li-mr-10"
						@click="toPages({type:'home'})"></text>
					<text class="li-text-42">商品入库</text>
				</view>
			</template>
			<!-- #ifdef MP-WEIXIN -->
			<template #right>
				<view class="li-flex-center li-mr-200" @click="toVerificationHistory">
					<text class="ri-history-line li-text-48"></text>
				</view>
			</template>

			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<template #right>
				<view class="li-flex-center li-mr-25" @click="toVerificationHistory">
					<text class="ri-history-line li-text-48"></text>
				</view>
			</template>
			<!-- #endif -->
		</wd-navbar>
		<!-- 导航栏背景 -->
		<view class="nav-bg-layer"></view>

		<!-- 功能模式切换和连续入库开关 -->
		<view class=" li-w-92% li-mx-auto li-flex li-justify-between li-items-center li-mt-20">
			<wd-tabs v-model="activeMode" :sticky="false" :line-width="18" line-height="4" active-color="#0070F0">
				<wd-tab title="扫码入库"></wd-tab>
				<wd-tab title="手动输入"></wd-tab>
			</wd-tabs>
		</view>

		<view v-if="activeMode === 0" class="li-w-90% li-mx-auto li-mt-50 li-flex li-items-center">
			<wd-tooltip placement="bottom-start" content="开启后可以连续入库多个订单">
				<view class="li-flex li-items-center li-mr-10">
					<view class="li-mr-4 li-text-28 li-text-#666">连续入库</view>
					<text class="ri-question-fill li-text-36 li-text-#666"></text>
				</view>
			</wd-tooltip>
			<wd-switch v-model="continuousMode" active-color="#0070F0" size="24" />
		</view>

		<!-- 功能区域 - 根据当前模式显示不同内容 -->
		<view class="li-w-92% li-mx-auto li-mt-40">
			<!-- 扫码模式 -->
			<view v-if="activeMode === 0" class=" li-flex li-flex-col li-items-center">
				<view class="scan-button-wrapper li-mt-50" @click="scanCode">
					<view class="scan-button li-flex li-items-center li-justify-center"
						:class="{'btn-scanning': isScanning}">
						<text class="ri-qr-scan-2-line li-text-90"></text>
						<view class="scan-line" :class="{'scan-active': isScanning}"></view>
					</view>
				</view>
				<view class="li-text-30 li-text-#666 li-mt-30">点击扫描二维码入库</view>
				<view class="li-text-24 li-text-#999 li-mt-10">{{continuousMode ? '连续入库模式已开启' : ''}}</view>
			</view>

			<!-- 手动输入模式 -->
			<view v-else class="input-mode-container li-mt-100">
				<view class="li-bg-white li-rd-20 li-px-30 li-py-40 li-shadow-sm li-mt-30">
					<view class="li-text-32 li-mb-30 li-text-#333">请输入订单号</view>
					<wd-input v-model="orderNumber" placeholder="请输入需要入库的订单号" clearable />
					<view class="li-flex li-justify-center li-mt-30">
						<wd-button custom-class="custom-shadow" type="primary" @click="submitOrderNumber"
							block>立即入库</wd-button>
					</view>
				</view>
			</view>
		</view>

		<!-- 连续入库模式下的结果展示区域 -->
		<view v-if="verificationRecords.length > 0" class="verification-records li-w-92% li-mx-auto li-mt-40">
			<view class="li-text-34 li-text-#333 li-mb-20">最近入库记录</view>

			<view class="records-list">
				<view v-for="(record, index) in verificationRecords" :key="index"
					class="record-item li-flex li-items-center li-justify-between li-bg-white li-rd-20 li-px-30 li-py-25 li-mb-20 li-shadow-sm">
					<view class="li-flex li-flex-col">
						<view class="li-flex li-items-center">
							<text class="ri-file-list-3-line li-mr-10 li-text-#009aff"></text>
							<text class="li-text-30">{{record.orderNumber}}</text>
						</view>
						<text class="li-text-24 li-text-#999 li-mt-8">{{record.time}}</text>
					</view>
					<view class="status-badge" :class="[
						record.status === 'success' ? 'status-success' : 
						record.status === 'fail' ? 'status-fail' : 'status-pending'
					]">
						{{record.status === 'success' ? '入库成功' : 
						  record.status === 'fail' ? '入库失败' : '处理中'}}
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态提示 -->

		<view v-if="verificationRecords.length==0" class="!li-mt-100">
			<wd-status-tip image="search" tip="暂无入库记录" />
		</view>


		<!-- 顶部提示条（成功/失败消息提示） -->
		<wd-toast />


		<!-- 商品确认弹出框 -->
		<wd-popup v-model="show9" position="bottom" closable :safe-area-inset-bottom="true"
			custom-style="height: auto; max-height: 80vh;">
			<view class="product-confirm-popup">
				<view class="product-header">
					<text class="ri-checkbox-circle-line li-text-42 li-text-#0070F0"></text>
					<text class="li-text-32 li-text-#333 li-ml-10">商品确认 ({{orderInfo?.product?.length}}件)</text>
				</view>
				<scroll-view scroll-y class="product-scroll">
					<view class="product-content">
						<view v-for="(item, index) in orderInfo.product" :key="index" class="product-item">
							<view class="product-image li-flex li-justify-between li-items-center li-mt-30 li-px-40">
								<view class="image-container" @click="previewImage(item.picture)">
									<image :src="item.picture" mode="aspectFill" class="product-img"></image>
									<view class="image-overlay">
										<text class="ri-zoom-in-line li-text-44 li-text-white"></text>
									</view>
								</view>
								<view class="li-ml-20 li-flex li-flex-col li-justify-center li-w-500">
									<view class="li-flex li-flex-col li-items-end">
										<view class="li-flex li-items-center">
											<text class="li-text-30 li-text-#333 li-mr-10">数量:</text>
											<text class="li-text-36 li-text-#0070F0">{{item.num}}</text>
										</view>
										<view class="li-text-24 li-text-#999 li-mt-10">商品规格: {{item.spec_name}}</view>
									</view>
								</view>
							</view>
							<view class="product-info li-mt-30 li-px-30">
								<view class="info-item li-flex li-items-center li-mb-20">
									<text
										class="ri-box-2-line li-text-36 li-text-#0070F0 li-mr-10 li-flex li-items-center li-justify-center"></text>
									<view class="info-content">
										<text class="li-text-30 li-text-#333">商品名称: {{item.product_name}}</text>
									</view>
								</view>
							</view>
							<view v-if="index !== orderInfo?.product?.length - 1" class="item-divider"></view>
						</view>

						<view class="order-info li-mt-30 li-px-30">
							<view class="info-grid">
								<view class="info-item">
									<view class="li-flex li-items-center">
										<text class="ri-barcode-line li-text-36 li-text-#0070F0"></text>
										<text class="li-text-30 li-text-#333 li-ml-15">订单号</text>
									</view>
									<view class="info-content">
										<text class="li-text-24 li-text-#999 li-mt-4">{{orderInfo.order_no}}</text>
									</view>
								</view>
								<view class="info-item">
									<view class="li-flex li-items-center">
										<text class="ri-calendar-line li-text-36 li-text-#0070F0"></text>
										<text class="li-text-30 li-text-#333 li-ml-15">下单时间</text>
									</view>
									<view class="info-content">
										<text class="li-text-24 li-text-#999 li-mt-4">{{orderInfo.create_time}}</text>
									</view>
								</view>
								<view class="info-item">
									<view class="li-flex li-items-center">
										<text class="ri-user-line li-text-36 li-text-#0070F0"></text>
										<text class="li-text-30 li-text-#333 li-ml-15">操作人</text>
									</view>
									<view class="info-content">
										<text class="li-text-24 li-text-#999 li-mt-4">{{userInfo.realname}}</text>
									</view>
								</view>
								<view class="info-item">
									<view class="li-flex li-items-center">
										<text class="ri-store-line li-text-36 li-text-#0070F0"></text>
										<text class="li-text-30 li-text-#333 li-ml-15">负责仓库</text>
									</view>
									<view class="info-content">
										<text
											class="li-text-24 li-text-#999 li-mt-4">{{orderInfo.distribute_name}}</text>
									</view>
								</view>
								<view class="info-item">
									<view class="li-flex li-items-center">
										<text class="ri-truck-line li-text-36 li-text-#0070F0"></text>
										<text class="li-text-30 li-text-#333 li-ml-15">来源</text>
									</view>
									<view class="info-content">
										<text class="li-text-24 li-text-#999 li-mt-4">{{orderInfo.supplier_name}}</text>
									</view>
								</view>
								<view class="info-item">
									<view class="li-flex li-items-center">
										<text class="ri-price-tag-3-line li-text-36 li-text-#0070F0"></text>
										<text class="li-text-30 li-text-#333 li-ml-15">订单类型</text>
									</view>
									<view class="info-content">
										<text
											class="li-text-24 li-text-#999 li-mt-4">{{orderInfo.type==1?'普通订单':(orderInfo.type==2?'秒杀订单':'拼团订单')}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="action-buttons li-px-30 li-mt-20">
					<wd-button custom-class="custom-shadow1" type="primary" block :loading="isConfirming"
						@click="GetorderStorageAct">
						{{ isConfirming ? '处理中...' : '确认入库' }}
					</wd-button>
					<view class="li-text-center li-text-28 li-text-#999 li-mt-15 li-pb-10" @click="show9 = false">稍后处理
					</view>
				</view>
			</view>
		</wd-popup>
		<zero-loading type="wobble" v-if="loading"></zero-loading>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { scanCodeGet, orderStorageAct, orderRecord } from '@/api/ticket'
	import { useNavigation } from '@/hooks/useNavigation'
	import { useToast } from '@/uni_modules/wot-design-uni'
	const Toast = useToast()
	// 使用导航 composable
	const {
		hasMultiplePages,   // 是否有多个页面在路由栈中
		isTabBarPage,       // 当前页面是否为 tabBar 页面
		checkRouteStack     // 检查当前路由栈状态的方法
	} = useNavigation()

	// 模式选择
	const activeMode = ref(0)  // 0: 扫码模式, 1: 手动输入模式
	const continuousMode = ref(false)  // 是否开启连续入库模式
	const orderNumber = ref('')  // 手动输入的订单号
	const isScanning = ref(false) // 控制扫描动画
	const isConfirming = ref(false) // 控制确认动画
	const orderInfo = ref({}) //扫码订单详情
	const userInfo = ref(uni.getStorageSync('userInfo'))
	const loading = ref<boolean>(false)

	// 入库记录
	const verificationRecords = ref([
		// 示例数据，实际应为空数组
		{
			orderNumber: 'JD202503050001',
			time: '2025-03-05 21:58:34',
			status: 'success'  // success, fail, pending
		}
	])

	const show9 = ref<boolean>(false)

	// 扫码入库
	const scanCode = async () => {
		// 激活扫描动画
		isScanning.value = true;
		// 延迟显示弹窗并停止动画
		setTimeout(() => {
			isScanning.value = false;
			// show9.value = true;
		}, 800);
		// handleVerification('20250326214053344401')
		// return;
		uni.scanCode({
			success: (res) => {
				handleVerification(res.result)
			},
			fail: (err) => {
				Toast.error('扫码失败，请重试')
			}
		})
	}


	const GetorderStorageAct = async () => {
		// 添加动画效果和成功提示
		isConfirming.value = true;
		try {
			const res = await orderStorageAct({ order_id: orderInfo.value.order_id })
			if (res.code == 200) {
				Toast.success('商品入库成功');
				show9.value = false;
				orderNumber.value = ''  // 清空输入

				// 请求入库记录接口
				getOrderRecord()
			} else {
				Toast.error(res.msg)
			}

		} catch (error) {
			Toast.error('入库失败')
		} finally {
			isConfirming.value = false;
		}
	}


	const contOrderStorageAct = async () => {
		try {
			const res = await orderStorageAct({ order_id: orderInfo.value.order_id })
			console.log('contOrderStorageAct', res);
			if (res.code == 200) {
				Toast.success('商品入库成功');
				// 请求入库记录接口
				getOrderRecord()
				setTimeout(() => {
					scanCode()
				}, 1000)
			} else {
				Toast.error(res.msg)
			}

		} catch (error) {
			Toast.error('入库失败')
		} finally {
		}
	}



	// 处理入库逻辑
	const handleVerification = async (code) => {
		const res = await scanCodeGet({ code: code })
		if (res.code == 200) {
			orderInfo.value = res.data
			if (activeMode.value == 1) {
				show9.value = true;
				return
			}
			// 连续入库
			if (continuousMode.value) {
				contOrderStorageAct()
			} else {
				// 非连续入库
				show9.value = true;
			}
		} else {
			Toast.error(res.msg)
		}

	}

	// 提交订单号入库
	const submitOrderNumber = () => {
		if (!orderNumber.value) {
			Toast.error('请输入订单号')
			return
		}
		handleVerification(orderNumber.value)
	}

	const getOrderRecord = async () => {
		try {
			const res = await orderRecord({ page: 1, limit: 10, type: 1 })
			verificationRecords.value = res.data
		} catch (error) {
		} finally {
		}
	}

	// 格式化日期时间
	const formatDateTime = (date : Date) : string => {
		const year = date.getFullYear()
		const month = String(date.getMonth() + 1).padStart(2, '0')
		const day = String(date.getDate()).padStart(2, '0')
		const hours = String(date.getHours()).padStart(2, '0')
		const minutes = String(date.getMinutes()).padStart(2, '0')
		const seconds = String(date.getSeconds()).padStart(2, '0')

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

	// 跳转到入库历史记录页面
	const toVerificationHistory = () => {
		// 这里应该跳转到历史记录页面
		// 目前示例仅显示提示
		// Toast.info('查看历史记录')
		uni.navigateTo({
			url: '/pagesA/verification/history?type=1'
		})
	}

	// 页面跳转
	const toPages = (item : any) => {
		if (item.type === 'nav') {
			uni.navigateBack()
		} else if (item.type === 'home') {
			// 这里是项目内部的跳转逻辑
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	}

	// 打开图片预览
	const previewImage = (imageUrl) => {
		uni.previewImage({
			urls: [imageUrl],
			current: 0,
			indicator: 'number',
			loop: true
		})
	}

	onLoad(() => {
		checkRouteStack()
		// 请求入库记录接口
		getOrderRecord()
	})
</script>

<style lang="scss">
	page {
		background-color: #f7f8fc;
	}

	.verification-page {

		// 导航背景层
		.nav-bg-layer {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: calc(var(--status-bar-height) + 88rpx);
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
			z-index: -1;
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
		}

		// 扫码功能区
		.scan-button-wrapper {
			width: 300rpx;
			height: 300rpx;
			position: relative;
			animation: pulse 2s ease-in-out infinite;

			.scan-button {
				width: 100%;
				height: 100%;
				background: linear-gradient(135deg, #42a5ff 0%, #0070F0 100%);
				border-radius: 50%;
				box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25);
				color: white;
				transition: all 0.3s ease;
				position: relative;
				overflow: hidden;

				&.btn-scanning {
					transform: scale(0.95);
					box-shadow: 0 4rpx 25rpx rgba(56, 165, 255, 0.4);
				}

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: -100%;
					width: 100%;
					height: 100%;
					background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
					animation: scanLight 3s ease-in-out infinite;
				}

				&:active {
					transform: scale(0.92);
					box-shadow: 0 4rpx 15rpx rgba(56, 165, 255, 0.2);
				}

				&.scanning {
					animation: scanning 0.8s ease-in-out;
				}

				.ri-qr-scan-2-line {
					animation: iconPulse 1.5s ease-in-out infinite alternate;
					display: inline-block;
				}

				.scan-line {
					position: absolute;
					width: 80%;
					height: 2rpx;
					background: rgba(255, 255, 255, 0.8);
					top: 50%;
					left: 10%;
					animation: scanAnimation 2s ease-in-out infinite;
					opacity: 0.2;

					&.scan-active {
						opacity: 1;
						animation: scanAnimation 0.8s ease-in-out infinite;
					}
				}
			}

			&::after {
				content: '';
				position: absolute;
				top: -15rpx;
				left: -15rpx;
				right: -15rpx;
				bottom: -15rpx;
				border-radius: 50%;
				border: 2rpx solid rgba(56, 165, 255, 0.3);
				z-index: -1;
				animation: ripple 2s linear infinite;
			}

			&::before {
				content: '';
				position: absolute;
				top: -8rpx;
				left: -8rpx;
				right: -8rpx;
				bottom: -8rpx;
				border-radius: 50%;
				border: 2rpx solid rgba(56, 165, 255, 0.2);
				z-index: -1;
				animation: ripple 2s linear 1s infinite;
			}
		}

		@keyframes ripple {
			0% {
				transform: scale(1);
				opacity: 1;
			}

			100% {
				transform: scale(1.2);
				opacity: 0;
			}
		}

		@keyframes pulse {

			0%,
			100% {
				transform: translateY(0);
			}

			50% {
				transform: translateY(-10rpx);
			}
		}

		@keyframes scanLight {
			0% {
				left: -100%;
			}

			50%,
			100% {
				left: 100%;
			}
		}

		@keyframes iconPulse {
			0% {
				opacity: 0.7;
				transform: scale(0.95);
			}

			100% {
				opacity: 1;
				transform: scale(1.05);
			}
		}

		@keyframes scanAnimation {
			0% {
				top: 20%;
				opacity: 0.5;
			}

			50% {
				opacity: 1;
			}

			100% {
				top: 80%;
				opacity: 0.5;
			}
		}

		@keyframes scanning {
			0% {
				transform: scale(1);
				box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25);
			}

			50% {
				transform: scale(0.92);
				box-shadow: 0 4rpx 15rpx rgba(56, 165, 255, 0.35);
			}

			100% {
				transform: scale(1);
				box-shadow: 0 8rpx 30rpx rgba(56, 165, 255, 0.25);
			}
		}

		// 入库记录状态标签
		.status-badge {
			padding: 4rpx 20rpx;
			border-radius: 30rpx;
			font-size: 24rpx;

			&.status-success {
				color: #07c160;
				background-color: rgba(7, 193, 96, 0.1);
			}

			&.status-fail {
				color: #fa5151;
				background-color: rgba(250, 81, 81, 0.1);
			}

			&.status-pending {
				color: #f0ad4e;
				background-color: rgba(240, 173, 78, 0.1);
			}
		}

		// 卡片阴影效果
		.li-shadow-sm {
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		}

		// 输入模式美化
		.input-mode-container {
			.wd-button {
				border-radius: 10rpx;
				height: 90rpx;
				font-size: 32rpx;
			}
		}

		// 底部区域间距
		.empty-state {
			padding-bottom: 40rpx;
		}
	}

	::v-deep .wd-switch {
		height: 50rpx !important;
		width: 90rpx !important;
		font-size: 22px !important;
	}

	.custom-shadow {
		color: #ffffff !important;
		background: linear-gradient(135deg, #42a5ff 0%, #0070F0 100%) !important;
	}

	.custom-shadow1 {
		color: #ffffff !important;
		height: 85rpx !important;
		background: linear-gradient(135deg, #42a5ff 0%, #0070F0 100%) !important;
	}

	.product-confirm-popup {
		.product-scroll {
			/* #ifdef MP-WEIXIN */
			max-height: calc(80vh - 280rpx);
			/* #endif */
			/* #ifdef APP-PLUS || H5 */
			max-height: calc(80vh - 380rpx);
			/* #endif */
		}

		.product-item {
			position: relative;
			padding: 20rpx 0;

			.item-divider {
				position: absolute;
				bottom: 0;
				left: 40rpx;
				right: 40rpx;
				height: 2rpx;
				background: rgba(0, 0, 0, 0.05);
			}
		}

		.product-header {
			padding: 30rpx;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
		}

		.product-content {
			padding-bottom: 30rpx;
		}

		.product-image {
			.image-container {
				position: relative;
				width: 160rpx;
				height: 160rpx;
				border-radius: 16rpx;
				overflow: hidden;

				.product-img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				.image-overlay {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(0, 0, 0, 0.3);
					display: flex;
					align-items: center;
					justify-content: center;
					opacity: 0;
					transition: opacity 0.3s;

					&:active {
						opacity: 1;
					}
				}
			}
		}

		.order-info {
			margin-top: 20rpx;
			padding-top: 20rpx;
			border-top: 2rpx solid rgba(0, 0, 0, 0.05);

			.info-grid {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 30rpx;
				padding: 20rpx 0;

				.info-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding: 20rpx 20rpx 20rpx;
					background: #f8faff;
					border-radius: 16rpx;

					.info-content {
						margin-left: 4rpx;
						flex: 1;
					}
				}
			}
		}

		.action-buttons {
			padding: 30rpx;
			padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
			background: #fff;
			border-top: 2rpx solid rgba(0, 0, 0, 0.05);

			.custom-shadow1 {
				box-shadow: 0 8rpx 16rpx rgba(0, 112, 240, 0.2);
			}
		}
	}

	::v-deep .wd-status-tip__text {
		margin: 0 auto !important;
	}
</style>