<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-blue" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">一键出库</block>
			</cu-custom>

			<view class="form-container">
				<!-- 查询按钮 -->
				<view class="query-section">
					<button class="query-btn" @click="queryData" :disabled="isLoading">
						<text class="cuIcon-search"></text>
						<text>查询出库数据</text>
					</button>
				</view>

				<!-- 查询结果 -->
				<view class="result-section" v-if="hasResult">
					<view class="section-title">出库数据统计</view>
					
					<!-- 总计卡片 -->
					<view class="total-card">
						<view class="total-item">
							<view class="total-value">{{queryResult.totalBagCount}}</view>
							<view class="total-label">总袋数</view>
						</view>
						<view class="total-divider"></view>
						<view class="total-item">
							<view class="total-value">{{queryResult.totalWeight}}</view>
							<view class="total-label">总重量(kg)</view>
						</view>
					</view>

					<!-- 出库人员信息 -->
					<view class="person-info-card">
						<view class="info-item">
							<view class="info-label">出库人员</view>
							<view class="info-value">{{queryResult.outUserName || '王琦'}}</view>
						</view>
						<view class="info-divider"></view>
						<view class="info-item">
							<view class="info-label">转运人员</view>
							<view class="picker-value" :class="{'has-value': selectedTransporter.name}" @click="showTransporterPicker">
								{{selectedTransporter.name || '请选择'}}
								<text class="cuIcon-right"></text>
							</view>
						</view>
					</view>

					<!-- 分类明细 -->
					<view class="type-list">
						<view class="type-header">分类明细</view>
						<view class="type-item" v-for="(item, index) in queryResult.typeList" :key="index">
							<view class="type-info">
								<text class="type-tag" :class="'tag-' + item.typeCode">{{item.typeName}}</text>
							</view>
							<view class="type-stats">
								<text class="stat-bags">{{item.bagCount}}袋</text>
								<text class="stat-weight">{{item.weight}}kg</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 空状态 -->
				<view class="empty-state" v-if="!hasResult && !isLoading">
					<text class="cuIcon-upload"></text>
					<text class="empty-text">点击上方按钮查询出库数据</text>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="footer">
				<button class="submit-btn" :disabled="!hasResult || isSubmitting" @click="showConfirmModal">
					一键出库
				</button>
			</view>

			<view class="cu-tabbar-height"></view>
		</scroll-view>

		<!-- 出库确认弹窗 -->
		<view class="modal" v-if="showModal" @click.self="closeModal">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">出库确认</text>
					<text class="modal-close" @click="closeModal">✕</text>
				</view>
				<view class="modal-body">
					<view class="confirm-section">
						<view class="confirm-label">出库人员</view>
						<view class="confirm-value">{{queryResult.outUserName || '王琦'}}</view>
					</view>
					<view class="confirm-section">
						<view class="confirm-label">转运人员</view>
						<view class="confirm-value highlight">{{selectedTransporter.name || '请选择'}}</view>
					</view>
					<view class="confirm-section">
						<view class="confirm-label">医废袋数量</view>
						<view class="confirm-value">{{queryResult.totalBagCount}}个</view>
					</view>
					<view class="confirm-section">
						<view class="confirm-label">总重量</view>
						<view class="confirm-value">{{queryResult.totalWeight}}kg</view>
					</view>
					<view class="confirm-section type-detail">
						<view class="confirm-label">类型明细</view>
						<view class="type-list">
							<view class="type-row" v-for="(item, index) in queryResult.typeList" :key="index">
								<text class="type-name">{{item.typeName}}</text>
								<text class="type-info">{{item.bagCount}}袋 / {{item.weight}}kg</text>
							</view>
						</view>
					</view>
				</view>
				<view class="modal-footer">
					<button class="btn-cancel" @click="closeModal">取消</button>
					<button class="btn-confirm" @click="confirmStorage">确认出库</button>
				</view>
			</view>
		</view>

		<!-- 加载中 -->
		<view class="loading-mask" v-if="isLoading || isSubmitting">
			<view class="loading-content">
				<view class="cuIcon-loading2 loading-icon"></view>
				<text class="loading-text">{{isSubmitting ? '提交中...' : '加载中...'}}</text>
			</view>
		</view>

		<!-- 转运人员选择弹窗 -->
		<view class="picker-modal" v-if="showTransporterPickerModal" @click.self="closeTransporterPicker">
			<view class="picker-content">
				<view class="picker-header">
					<text class="picker-title">选择转运人员</text>
					<text class="picker-close" @click="closeTransporterPicker">✕</text>
				</view>
				<view class="picker-search">
					<input class="search-input" v-model="searchKeyword" placeholder="输入姓名搜索" @input="onTransporterSearch" />
					<text class="cuIcon-search search-icon"></text>
				</view>
				<scroll-view scroll-y class="picker-list">
					<view v-if="filteredTransporters.length === 0" class="picker-empty">
						<text>未找到匹配的人员</text>
					</view>
					<view class="picker-item" :class="{'active': selectedTransporter.id === item.id}"
						v-for="(item, index) in filteredTransporters" :key="index" @click="selectTransporter(item)">
						<text class="item-name">{{item.name}}</text>
						<text class="cuIcon-check" v-if="selectedTransporter.id === item.id"></text>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryResult: {
					totalBagCount: 0,
					totalWeight: 0,
					typeList: [],
					outUserName: '王琦'
				},
				transporters: [
					{ id: 1, name: '刘强' },
					{ id: 2, name: '刘涛' }
				],
				filteredTransporters: [],
				selectedTransporter: {},
				searchKeyword: '',
				showTransporterPickerModal: false,
				hasResult: false,
				showModal: false,
				isLoading: false,
				isSubmitting: false
			}
		},
		methods: {
			// 显示转运人员选择弹窗
			showTransporterPicker() {
				this.showTransporterPickerModal = true
				this.searchKeyword = ''
				this.filteredTransporters = [...this.transporters]
			},
			// 关闭转运人员选择弹窗
			closeTransporterPicker() {
				this.showTransporterPickerModal = false
			},
			// 搜索转运人员
			onTransporterSearch() {
				const keyword = this.searchKeyword.trim().toLowerCase()
				if (!keyword) {
					this.filteredTransporters = [...this.transporters]
				} else {
					this.filteredTransporters = this.transporters.filter(item =>
						item.name.toLowerCase().includes(keyword)
					)
				}
			},
			// 选择转运人员
			selectTransporter(item) {
				this.selectedTransporter = item
				this.closeTransporterPicker()
			},
			// 查询出库数据（预留接口）
			queryData() {
				this.isLoading = true
				
				// TODO: 替换为实际接口
				// 接口示例: GET /api/onekeyOut/query
				
				// 模拟请求延迟，直接显示假数据
				setTimeout(() => {
					// 假数据
					this.queryResult = {
						totalBagCount: 230,
						totalWeight: 680.8,
						typeList: [
							{ typeName: '感染性废物', typeCode: 'infectious', bagCount: 98, weight: 285.6 },
							{ typeName: '损伤性废物', typeCode: 'injury', bagCount: 65, weight: 175.2 },
							{ typeName: '病理性废物', typeCode: 'pathology', bagCount: 32, weight: 98.5 },
							{ typeName: '化学性废物', typeCode: 'chemical', bagCount: 22, weight: 82.3 },
							{ typeName: '药物性废物', typeCode: 'pharmaceutical', bagCount: 13, weight: 39.2 }
						]
					}
					this.hasResult = true
					this.isLoading = false
				}, 800)
				
				// 实际接口调用（替换上方假数据逻辑）
				uni.request({
					url: 'https://lekapi.opmonitor.com/?c=app_api&a=getOnekeyOutData',
					success: (res) => {
						console.log('查询结果：', res.data)
						// TODO: 接口通了之后，删除上方假数据逻辑，取消注释下方代码
						// if (res.data.err_msg == 'success') {
						// 	this.queryResult = res.data.data
						// 	this.hasResult = true
						// }
					}
				})
			},
			// 显示确认弹窗
			showConfirmModal() {
				if (!this.hasResult) {
					uni.showToast({
						title: '请先查询数据',
						icon: 'none'
					})
					return
				}
				this.showModal = true
			},
			// 关闭弹窗
			closeModal() {
				this.showModal = false
			},
			// 确认出库（预留接口）
			confirmStorage() {
				this.isSubmitting = true
				
				// TODO: 替换为实际接口
				// 接口示例: POST /api/onekeyOut/submit
				const params = {
					totalBagCount: this.queryResult.totalBagCount,
					totalWeight: this.queryResult.totalWeight,
					typeList: this.queryResult.typeList
				}
				
				// 模拟请求延迟
				setTimeout(() => {
					uni.showToast({
						title: '出库成功',
						icon: 'success'
					})
					this.showModal = false
					this.resetData()
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
					this.isSubmitting = false
				}, 1000)
				
				// 实际接口调用（替换上方假数据逻辑）
				uni.request({
					url: 'https://lekapi.opmonitor.com/?c=app_api&a=onekeyOutSubmit',
					method: 'POST',
					data: params,
					success: (res) => {
						console.log('出库结果：', res.data)
						// TODO: 接口通了之后，删除上方假数据逻辑，取消注释下方代码
						// if (res.data.err_msg == 'success') {
						// 	uni.showToast({
						// 		title: '出库成功',
						// 		icon: 'success'
						// 	})
						// 	this.showModal = false
						// 	this.resetData()
						// 	setTimeout(() => {
						// 		uni.navigateBack()
						// 	}, 1500)
						// } else {
						// 	uni.showModal({
						// 		title: '提示',
						// 		content: '出库失败，请重试',
						// 		showCancel: false
						// 	})
						// }
					}
				})
			},
			// 重置数据
			resetData() {
				this.queryResult = {
					totalBagCount: 0,
					totalWeight: 0,
					typeList: [],
					outUserName: '王琦'
				}
				this.selectedTransporter = {}
				this.hasResult = false
			}
		}
	}
</script>

<style>
	.page {
		width: 100vw;
		height: 100vh;
		background: #f5f5f5;
	}

	.form-container {
		padding: 20rpx;
	}

	.query-section {
		margin-bottom: 20rpx;
	}

	.query-btn {
		height: 88rpx;
		background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
		color: #fff;
		border: none;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		font-size: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.3);
	}

	.query-btn[disabled] {
		background: #ccc;
		box-shadow: none;
	}

	.query-btn::after {
		border: none;
	}

	.result-section {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 24rpx;
	}

	.total-card {
		display: flex;
		align-items: center;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 30rpx;
	}

	.total-item {
		flex: 1;
		text-align: center;
	}

	.total-value {
		font-size: 56rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 8rpx;
	}

	.total-label {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.total-divider {
		width: 2rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 0.3);
	}

	.person-info-card {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.info-item {
		flex: 1;
		text-align: center;
	}

	.info-label {
		font-size: 30rpx;
		color: #999;
		margin-bottom: 12rpx;
	}

	.info-value {
		font-size: 36rpx;
		color: #333;
		font-weight: 600;
	}

	.info-divider {
		width: 2rpx;
		height: 60rpx;
		background: #eee;
	}

	.picker-value {
		font-size: 36rpx;
		color: #1890ff;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
	}

	.picker-value text {
		font-size: 28rpx;
		color: #999;
	}

	.picker-value.has-value {
		color: #1890ff;
	}

	.type-list {
		margin-top: 20rpx;
	}

	.type-header {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 20rpx;
		padding-bottom: 16rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.type-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 24rpx;
		background: #f9f9f9;
		border-radius: 12rpx;
		margin-bottom: 16rpx;
	}

	.type-tag {
		font-size: 26rpx;
		padding: 6rpx 20rpx;
		border-radius: 8rpx;
		color: #fff;
	}

	.tag-infectious {
		background: #e54d42;
	}

	.tag-injury {
		background: #f37b1d;
	}

	.tag-pathology {
		background: #8dc63f;
	}

	.tag-chemical {
		background: #6739b6;
	}

	.tag-pharmaceutical {
		background: #279cff;
	}

	.tag-other {
		background: #8799a3;
	}

	.type-stats {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.stat-bags {
		font-size: 28rpx;
		color: #1890ff;
		font-weight: 500;
	}

	.stat-weight {
		font-size: 28rpx;
		color: #52c41a;
		font-weight: 500;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		color: #999;
	}

	.empty-state text:first-child {
		font-size: 80rpx;
		margin-bottom: 20rpx;
	}

	.empty-text {
		font-size: 28rpx;
	}

	.footer {
		padding: 20rpx 40rpx 40rpx;
	}

	.submit-btn {
		height: 96rpx;
		background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
		color: #fff;
		border: none;
		border-radius: 48rpx;
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
		line-height: 96rpx;
		box-shadow: 0 8rpx 24rpx rgba(24, 144, 255, 0.3);
	}

	.submit-btn[disabled] {
		background: #ccc;
		box-shadow: none;
	}

	.submit-btn::after {
		border: none;
	}

	/* 弹窗样式 */
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}

	.modal-content {
		width: 80%;
		max-width: 600rpx;
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.modal-close {
		font-size: 36rpx;
		color: #999;
		padding: 10rpx;
	}

	.modal-body {
		padding: 30rpx;
	}

	.confirm-section {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.confirm-section.type-detail {
		flex-direction: column;
		align-items: flex-start;
		margin-top: 30rpx;
		padding-top: 20rpx;
		border-top: 2rpx solid #f0f0f0;
	}

	.confirm-label {
		font-size: 28rpx;
		color: #666;
		width: 160rpx;
	}

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

	.confirm-value.highlight {
		color: #ff6b6b;
		font-size: 32rpx;
	}

	.type-list {
		width: 100%;
		margin-top: 16rpx;
	}

	.type-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 20rpx;
		background: #f9f9f9;
		border-radius: 12rpx;
		margin-bottom: 12rpx;
	}

	.type-row .type-name {
		font-size: 28rpx;
		color: #333;
	}

	.type-row .type-info {
		font-size: 26rpx;
		color: #666;
	}

	.modal-footer {
		display: flex;
		padding: 20rpx 30rpx 30rpx;
		gap: 20rpx;
	}

	.btn-cancel,
	.btn-confirm {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		border: none;
	}

	.btn-cancel {
		background: #f5f5f5;
		color: #666;
	}

	.btn-confirm {
		background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
		color: #fff;
	}

	.btn-cancel::after,
	.btn-confirm::after {
		border: none;
	}

	/* 加载中 */
	.loading-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.loading-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
		padding: 40rpx 60rpx;
		border-radius: 16rpx;
	}

	.loading-icon {
		font-size: 60rpx;
		color: #1890ff;
		animation: rotate 1s linear infinite;
	}

	@keyframes rotate {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}

	.loading-text {
		font-size: 28rpx;
		color: #333;
		margin-top: 20rpx;
	}

	/* 转运人员选择弹窗 */
	.picker-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}

	.picker-content {
		width: 85%;
		max-width: 650rpx;
		max-height: 70vh;
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.picker-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.picker-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.picker-close {
		font-size: 36rpx;
		color: #999;
		padding: 10rpx;
	}

	.picker-search {
		position: relative;
		padding: 20rpx 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.picker-search .search-input {
		width: 100%;
		height: 72rpx;
		background: #f5f5f5;
		border-radius: 36rpx;
		padding: 0 70rpx 0 30rpx;
		font-size: 28rpx;
	}

	.picker-search .search-icon {
		position: absolute;
		right: 50rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 32rpx;
		color: #999;
	}

	.picker-list {
		flex: 1;
		max-height: 400rpx;
		padding: 20rpx;
	}

	.picker-empty {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 60rpx 0;
		color: #999;
		font-size: 28rpx;
	}

	.picker-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 30rpx;
		background: #f9f9f9;
		border-radius: 12rpx;
		margin-bottom: 16rpx;
		transition: all 0.2s;
	}

	.picker-item:active {
		background: #e6f7ff;
	}

	.picker-item.active {
		background: #e6f7ff;
		border: 2rpx solid #1890ff;
	}

	.picker-item .item-name {
		font-size: 32rpx;
		color: #333;
	}

	.picker-item .cuIcon-check {
		font-size: 32rpx;
		color: #1890ff;
	}
</style>
