<template>
	<view class="detail-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">{{historyType=='1'?'入库详情':'核销详情'}}</text>
				</view>
			</template>
		</wd-navbar>

		<!-- 导航栏背景 -->
		<view class="nav-bg-layer"></view>

		<!-- 状态卡片 -->
		<view class="status-card li-w-92% li-mx-auto li-mt-20 li-rd-20 li-py-30">
			<view class="status-header li-flex li-items-center li-justify-between li-px-30">
				<view class="li-flex li-items-center">
					<text class="status-icon ri-checkbox-circle-fill"></text>
					<text class="status-text">入库成功</text>
				</view>
				<text class="status-time">2025-03-05 12:34:56</text>
			</view>
			<view class="li-divider li-my-20"></view>
			<view class="order-info li-px-30">
				<view class="order-id li-flex li-items-center li-mb-15">
					<text class="ri-barcode-line li-text-36 li-text-#666 li-mr-10"></text>
					<text class="li-text-32 li-text-#333">JD202503050001</text>
				</view>
				<view class="li-flex li-justify-between li-text-30 li-text-#666 li-mb-10">
					<text>操作人员：张三</text>
					<text>负责仓库：北京仓</text>
				</view>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="product-section li-w-92% li-mx-auto li-mt-30 li-rd-20 li-p-30 li-bg-white">
			<view class="section-title li-mb-20">
				<text class="ri-shopping-bag-line li-text-38 li-text-#0070F0 li-mr-10"></text>
				<text class="li-text-36 li-text-#333">商品信息</text>
			</view>

			<view class="product-card li-flex li-mb-30">
				<image src="../../static/swiper/1.png" mode="aspectFill" class="product-image"></image>
				<view class="product-info li-ml-20">
					<view class="product-name li-text-32 li-text-#333 li-mb-10">示例商品名称</view>
					<view class="product-code li-text-26 li-text-#999 li-mb-10">商品编码：SP202505126</view>
					<view class="li-flex li-items-center li-justify-between">
						<text class="li-text-28 li-text-#666">规格：默认</text>
						<view class="product-quantity li-flex li-items-center">
							<text class="li-text-28 li-text-#666 li-mr-10">数量：</text>
							<text class="li-text-32 li-text-#0070F0">1</text>
						</view>
					</view>
				</view>
			</view>

			<view class="product-attrs">
				<view class="attr-item li-flex li-justify-between li-mb-15">
					<text class="li-text-28 li-text-#666">商品分类</text>
					<text class="li-text-28 li-text-#333">电子产品</text>
				</view>
				<view class="attr-item li-flex li-justify-between li-mb-15">
					<text class="li-text-28 li-text-#666">供应商</text>
					<text class="li-text-28 li-text-#333">京东自营</text>
				</view>
				<view class="attr-item li-flex li-justify-between li-mb-15">
					<text class="li-text-28 li-text-#666">单价</text>
					<text class="li-text-28 li-text-#333">¥299.00</text>
				</view>
				<view class="attr-item li-flex li-justify-between li-mb-15">
					<text class="li-text-28 li-text-#666">库存状态</text>
					<text class="li-text-28 li-text-#07c160">正常</text>
				</view>
			</view>
		</view>

		<!-- 入库详情 -->
		<view class="detail-section li-w-92% li-mx-auto li-mt-30 li-rd-20 li-p-30 li-bg-white">
			<view class="section-title li-mb-20">
				<text class="ri-information-line li-text-38 li-text-#0070F0 li-mr-10"></text>
				<text class="li-text-36 li-text-#333">入库详情</text>
			</view>

			<view class="detail-list">
				<view class="detail-item li-flex li-justify-between li-mb-15">
					<text class="li-text-28 li-text-#666">入库单号</text>
					<text class="li-text-28 li-text-#333">RK202503050001</text>
				</view>
				<view class="detail-item li-flex li-justify-between li-mb-15">
					<text class="li-text-28 li-text-#666">入库方式</text>
					<text class="li-text-28 li-text-#333">扫码入库</text>
				</view>
				<view class="detail-item li-flex li-justify-between li-mb-15">
					<text class="li-text-28 li-text-#666">入库类型</text>
					<text class="li-text-28 li-text-#333">普通入库</text>
				</view>
				<view class="detail-item li-flex li-justify-between li-mb-15">
					<text class="li-text-28 li-text-#666">所属库位</text>
					<text class="li-text-28 li-text-#333">A-12-03</text>
				</view>
				<view class="detail-item li-flex li-justify-between li-mb-15">
					<text class="li-text-28 li-text-#666">入库备注</text>
					<text class="li-text-28 li-text-#333">正常入库</text>
				</view>
			</view>
		</view>

		<!-- 操作时间轴 -->
		<view class="timeline-section li-w-92% li-mx-auto li-mt-30 li-rd-20 li-p-30 li-bg-white li-mb-40">
			<view class="section-title li-mb-20">
				<text class="ri-time-line li-text-38 li-text-#0070F0 li-mr-10"></text>
				<text class="li-text-36 li-text-#333">操作记录</text>
			</view>

			<view class="timeline">
				<view class="timeline-item">
					<view class="timeline-dot active"></view>
					<view class="timeline-content li-ml-20">
						<view class="timeline-title li-text-30 li-text-#333">入库完成</view>
						<view class="timeline-info li-text-26 li-text-#999">2025-03-05 12:34:56</view>
						<view class="timeline-desc li-text-26 li-text-#666">操作人：张三</view>
					</view>
				</view>
				<view class="timeline-line"></view>

				<view class="timeline-item">
					<view class="timeline-dot active"></view>
					<view class="timeline-content li-ml-20">
						<view class="timeline-title li-text-30 li-text-#333">商品确认</view>
						<view class="timeline-info li-text-26 li-text-#999">2025-03-05 12:33:42</view>
						<view class="timeline-desc li-text-26 li-text-#666">操作人：张三</view>
					</view>
				</view>
				<view class="timeline-line"></view>

				<view class="timeline-item">
					<view class="timeline-dot active"></view>
					<view class="timeline-content li-ml-20">
						<view class="timeline-title li-text-30 li-text-#333">扫码录入</view>
						<view class="timeline-info li-text-26 li-text-#999">2025-03-05 12:32:18</view>
						<view class="timeline-desc li-text-26 li-text-#666">操作人：张三</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮区域 -->
		<view class="footer-actions li-w-92% li-mx-auto li-flex li-justify-between li-mb-30">
			<wd-button custom-class="action-btn secondary" @click="printDetail">打印详情</wd-button>
			<wd-button custom-class="action-btn primary" @click="shareDetail">分享详情</wd-button>
		</view>
		<zero-loading type="wobble" v-if="loading"></zero-loading>
	</view>
</template>

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

	const loading = ref<boolean>(false)
	const order_no = ref<string>('')
	const historyType = ref<string>('1')

	// 打印详情
	const printDetail = () => {
		uni.showToast({
			title: '打印功能开发中',
			icon: 'none'
		})
	}

	// 分享详情
	const shareDetail = () => {
		uni.showToast({
			title: '分享功能开发中',
			icon: 'none'
		})
	}

	const toPages = (item : any) => {
		console.log(item);
		switch (item.type) {
			case 'nav':
				uni.navigateBack({
					delta: 1
				});
				break;
			case 'home':
				uni.switchTab({
					url: '/pages/index/index'
				})
				break;
			default:
				break;
		}
	}

	const getScanCodeGet = async () => {
		loading.value = true
		try {
			const res = await scanCodeGet({ order_no: order_no.value })
	
		} catch (error) {
		} finally {
			loading.value = false
		}
	}

	onLoad((options) => {
		order_no.value = options.order_no
		historyType.value = options.type
		checkRouteStack()
		getScanCodeGet()
		console.log('入库详情页参数:', options)
	})
</script>

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

	.detail-page {
		padding-bottom: 30rpx;

		// 导航栏背景
		.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);
		}

		// 状态卡片
		.status-card {
			background: linear-gradient(135deg, #f6fafe 0%, #edf6ff 100%);
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.status-header {
				.status-icon {
					color: #07c160;
					font-size: 44rpx;
					margin-right: 10rpx;
				}

				.status-text {
					color: #07c160;
					font-size: 36rpx;
					font-weight: 500;
				}

				.status-time {
					color: #999;
					font-size: 26rpx;
				}
			}

			.li-divider {
				height: 2rpx;
				background-color: rgba(0, 0, 0, 0.05);
			}
		}

		// 商品卡片
		.product-section,
		.detail-section,
		.timeline-section {
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);

			.section-title {
				display: flex;
				align-items: center;
				font-weight: bold;
				margin-bottom: 30rpx;
			}
		}

		.product-card {
			.product-image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 16rpx;
				background-color: #f5f5f5;
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			}

			.product-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
		}

		.product-attrs,
		.detail-list {
			background-color: #f9f9f9;
			border-radius: 16rpx;
			padding: 20rpx 30rpx;
		}

		// 时间轴
		.timeline {
			position: relative;

			.timeline-item {
				display: flex;
				align-items: flex-start;
				position: relative;
				z-index: 1;
			}

			.timeline-dot {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				background-color: #ddd;
				margin-top: 14rpx;

				&.active {
					background-color: #0070F0;
					box-shadow: 0 0 0 6rpx rgba(0, 112, 240, 0.2);
				}
			}

			.timeline-line {
				position: relative;
				width: 2rpx;
				height: 60rpx;
				background-color: #ddd;
				margin-left: 9rpx;
				z-index: 0;
			}

			.timeline-content {
				margin-bottom: 20rpx;
			}
		}

		// 底部按钮
		.footer-actions {
			margin-top: 40rpx;

			.action-btn {
				width: 46%;
				height: 85rpx;
				border-radius: 10rpx;
				font-size: 30rpx;

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

				&.secondary {
					background: #ffffff !important;
					color: #0070F0 !important;
					border: 2rpx solid #0070F0 !important;
				}
			}
		}
	}
</style>