<template>
	<gui-page :custom-header="true" :header-class="['gui-theme-background-color']">
		<template #gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<text style="font-size:44rpx;" class="gui-header-leader-btns gui-color-white font-icons"
					@tap="goBack">&#xe6c5;</text>
				<text class="gui-h4 gui-blod gui-flex1 gui-text-center gui-ellipsis gui-color-white gui-primary-text">扫描入库明细(退料)</text>
				<view style="width:40px;" />
			</view>
		</template>
		<template #gBody>
			<view class="list-content">
				<!-- 库位扫描输入框 -->
				<view class="scan">
					<view class="scan-card">
						<uni-easyinput ref="easyinputStore" v-model="storeName" :input-border="false"
							:clearable="false" type="text" placeholder="请扫描库位信息"
							@confirm="confirmStore" />
						<text class="font-icons" @click="handleScanStore">&#xe6b7;</text>
					</view>
				</view>

				<!-- 物料扫描输入框 -->
				<view class="scan">
					<view class="scan-card">
						<uni-easyinput ref="easyinput" v-model="scanBatchNumber" :input-border="false"
							:clearable="false" type="text" placeholder="请扫描物料二维码"
							@confirm="handleKeydown" />
						<text class="font-icons" @click="handleScanMaterial">&#xe6b7;</text>
					</view>
				</view>
				
				<!-- 仓库和货位信息展示 -->
				<view class="info-row">
					<text class="info-label">仓库:</text>
					<text class="info-value">{{ erpStockName }}</text>
					<text class="info-label">货位:</text>
					<text class="info-value">{{ wmsStoreName }}</text>
				</view>
			
				<view class="tabs">
					<div class="tabs-list">
						<text :class="!isBefore?'tabs-item-active':'tabs-item'" @click="isBefore = false">物料需求</text>
						<text :class="isBefore?'tabs-item-active':'tabs-item'" @click="isBefore = true">已扫物料</text>
					</div>
				</view>
				
				<!-- 物料需求列表 -->
				<view v-if="!isBefore" class="custom-table">
					<uni-table border stripe empty-text="暂无更多数据">
						<uni-tr class="custom-table-head">
							<uni-th align="center" width="180px" class="break-col">推荐库位(数量)</uni-th>
							<uni-th align="center" width="180px">物料</uni-th>
							<uni-th align="center" width="120px">应备数</uni-th>
							<uni-th align="center" width="120px">已扫数量</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, key) in tableData" :key="key" @click="handleToDetails(item)">
							<uni-td align="center" class="break-cell">{{ item.recommendStockLocation }}</uni-td>
							<uni-td align="center">{{ item.materialNo }}({{ item.materialName }})</uni-td>
							<uni-td align="center">{{ item.nowDeliveredQty }}</uni-td>
							<uni-td align="center" style="color: orange;font-weight: bold;">{{ item.completedQty }}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
				
				<!-- 已扫物料 -->
				<view v-else class="custom-table">
					<scroll-view scroll-y class="scroll-box" style="height: 300px;">
						<view class="cell-row">
							<view class="cell">物料</view>
							<view class="cell">数量</view>
							<view class="cell">批号</view>
							<!-- <view class="cell">剩余数量</view> -->
						</view>
						<view
							v-for="(item, idx) in beforeTableData"
							:key="item.uniqueId || idx"
							class="swipe-row"
							:data-index="idx"
							@touchstart="touchStart"
							@touchmove="touchMove"
							@touchend="touchEnd"
						>
							<view class="content-area" :style="{ transform: `translateX(${item.slideX || 0}px)` }">
								<view class="cell">{{ item.materialNo }}({{ item.materialName }})</view>
								<view class="cell">{{ item.batchQty }}</view>
								<view class="cell">{{ item.batchNumber }}</view>
								<!-- <view class="cell" style="color: #00a0e9;">{{ item.leftQty ?? '-' }}</view> -->
							</view>
							<view class="btn-area" @tap.stop="deleteItem(idx)">删除</view>
						</view>
					</scroll-view>
				</view>
				
				<view class="card-list-item" style="margin: 12px 0;display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr;gap: 10px;">
					<view class="sign-btn" :class="{ disabled: saveDisabled }" @click="handleSave">
						<text :style="saveBtnTextStyle">保存</text>
					</view>
					<view class="sign-btn" :class="{ disabled: submitDisabled }" @click="handleSubmit">
						<text :style="submitBtnTextStyle">提交</text>
					</view>
				</view>
				
				<!-- 错误提示弹窗 -->
				<uni-popup ref="errorTip" type="dialog">
					<uni-popup-dialog type="error" cancel-text="关闭" confirm-text="确认" title="提示"
						:content="errorTipMessage" @confirm="handleCloseErrorTipsModal"
						@close="handleCloseErrorTipsModal" />
				</uni-popup>
				
				<!-- leftQty 输入弹窗 -->
				<uni-popup ref="leftQtyPopup" type="dialog">
					<uni-popup-dialog
						title="请输入剩余数量"
						mode="input"
						type="number"
						placeholder="请输入剩余数量"
						:value="leftQtyInputValue"
						@confirm="handleLeftQtyConfirm"
						@close="handleLeftQtyCancel"
					/>
				</uni-popup>
			</view>
		</template>
	</gui-page>
</template>

<script>
import { onReachBottom,onShow } from '@dcloudio/uni-app'
import { ref, onMounted, defineComponent, onBeforeMount, computed, nextTick } from 'vue'

export default defineComponent({
	setup(options) {
		// ============ 基础变量 ============
		const easyinput = ref('')
		const easyinputStore = ref('')
		const errorTip = ref(null)
		const errorTipMessage = ref('')
		const errorState = ref(0)
		const scanBatchNumber = ref('')
		const isBefore = ref(false)
		const tableData = ref([])
		const beforeTableData = ref([])
		const localScannedList = ref([])
		const saveDisabled = ref(false)
		const submitDisabled = ref(false)
		const receiveList = ref([])
		const currentScanMaterial = ref([])
		const fdIndex = ref(-1)
		
		// ============ 库位相关 ============
		const storeName = ref('')
		const erpStockName = ref('')
		const wmsStoreName = ref('')
		
		// ============ leftQty 弹窗相关 ============
		const leftQtyPopup = ref(null)
		const leftQtyInputValue = ref('')
		const pendingQrCode = ref('')
		
		// ============ 按钮样式 ============
		const isLightText = ref(false)
		const isSubmitLight = ref(false)
		
		// ============ 父级数据 ============
		const parentRow = uni.getStorageSync('masterId') ?? {}
		const masterId = ref('')
		
		onBeforeMount(() => {
		    initMasterId()
		})
		
		// ============ 数据加载 ============
		const search = function() {
			uni.$reqGet('getScannedInMatersDetails', { id: masterId.value })
				.then(({ code, data, msg }) => {
					if (code === 0) {
						receiveList.value = data
						uni.setStorageSync('ids', JSON.stringify(data?.inRequestDetailPDAList?.[0] || {}))
						tableData.value = data?.inRequestDetailPDAList || []
						
						// 重建本地已扫列表
						localScannedList.value = []
						tableData.value.forEach(item => {
							if (item.inRequestSubdetailList?.length) {
								localScannedList.value.push(...item.inRequestSubdetailList)
							}
						})
						flushBeforeTableData()
					} else {
						uni.showToast({ title: msg, icon: 'none', duration: 2000 })
					}
				})
		}
		
		onMounted(() => { search() })
		// 提取为独立函数
		const initMasterId = () => {
		    const parsedData = JSON.parse(parentRow)
		    masterId.value = parsedData?.id
		}
		onShow(() => {
		    initMasterId()
		    if (masterId.value) {
		        // 检查是否需要刷新（从详情页返回时）
		        const needRefresh = uni.getStorageSync('needRefreshReturnMaterial')
		        if (needRefresh === 'true') {
		            search()
		            uni.removeStorageSync('needRefreshReturnMaterial')
		        }
		    }
		})
		
		// ============ 返回 ============
		const goBack = function() {
			uni.removeStorageSync('masterId')
			uni.removeStorageSync('ids')
			uni.$goBack('/pages/workbranch/warehouse/scanInOut/In/scanInPage')
		}
		
		// ============ 库位扫码 ============
		const handleScanStore = function() {
			// #ifdef APP-PLUS
			const mpaasScanModule = uni.requireNativePlugin('Mpaas-Scan-Module')
			mpaasScanModule.mpaasScan(
				{ scanType: ['qrCode', 'barCode'], hideAlbum: false },
				(ret) => { if (ret.resp_code === 1000) confirmStore(ret.resp_result) }
			)
			// #endif
			// #ifdef H5
			confirmStore('PC-1')
			// #endif
		}
		
		const confirmStore = function(e) {
			storeName.value = e
			uni.$reqGet('getStockLocaltionByCode', { code: e })
				.then(({ code, data, msg }) => {
					if (code === 0 && data?.erpStockName && data?.wmsStoreName) {
						erpStockName.value = data.erpStockName
						wmsStoreName.value = data.wmsStoreName
						nextTick(() => easyinput.value.onFocus())
					} else {
						showError('请扫描正确的库位')
						storeName.value = ''
					}
				})
		}
		
		// ============ 核心：扫描物料（businessType=3 特殊流程） ============
		const handleScanMaterial = async function() {
			// #ifdef APP-PLUS 
			if (!storeName.value) {
				showError('请先扫描库位信息')
				return
			}
			
			const mpaasScanModule = uni.requireNativePlugin('Mpaas-Scan-Module')
			const ret = await new Promise(resolve =>
				mpaasScanModule.mpaasScan(
					{ scanType: ['qrCode', 'barCode'], hideAlbum: false },
					resolve
				)
			)
			if (ret.resp_code !== 1000) return
			
			await processScanWithLeftQty(ret.resp_result)
			// #endif
		}
		
		const handleKeydown = async function(e) {
			if (!storeName.value) {
				showError('请先扫描库位信息')
				return
			}
			await processScanWithLeftQty(e)
		}
		
		// ============ 退料专用：先校验 → 弹窗输入剩余数量 → 确认添加 ============
		const processScanWithLeftQty = async function(qrCode) {
			try {
				const { code, data, msg } = await uni.$reqGet('scanPrepareMaterial', {
					qrCode: qrCode,
					locationCode: storeName.value
				})
				
				if (code !== 0) {
					showError(msg)
					return
				}
				
				// 缓存数据
				pendingQrCode.value = qrCode
				currentScanMaterial.value = data[0] ?? []
				
				// 校验批号重复
				if (isBatchExist(currentScanMaterial.value.batchNumber)) {
					showError('该批号已存在，请勿重复扫描')
					return
				}
				
				// 校验物料是否在需求列表
				fdIndex.value = tableData.value.findIndex(item => item?.materialNo === data[0]?.materialNo)
				if (fdIndex.value === -1) {
					showError('请扫描所需物料的物料条码')
					return
				}
				
				// 校验数量是否已满
				const row = tableData.value[fdIndex.value]
				if (row.nowDeliveredQty <= row.completedQty) {
					showError('已备数量已满，无需再扫')
					return
				}
				
				// 更新仓库货位
				erpStockName.value = data[0]?.erpStockName || ''
				wmsStoreName.value = data[0]?.wmsStoreName || ''
				
				// 弹出 leftQty 输入框
				leftQtyInputValue.value = ''
				leftQtyPopup.value.open()
				
			} catch (err) {
				showError(err.msg || '获取物料信息失败')
			}
		}
		
		// ============ leftQty 弹窗确认 ============
		const handleLeftQtyConfirm = (e) => {
			const val = String(e).trim()
			if (!val || isNaN(Number(val)) || Number(val) < 0) {
				uni.showToast({ title: '请输入有效的数量', icon: 'none' })
				return false
			}
			
			const leftQtyNum = Number(val)
			const receiptQty = currentScanMaterial.value?.receiptQty || 1
			
			if (leftQtyNum > receiptQty) {
				uni.showToast({
					title: `退料数量不能大于领料条码数量：${receiptQty}`,
					icon: 'none',
					duration: 3000
				})
				leftQtyInputValue.value = ''
				nextTick(() => leftQtyPopup.value.open())
				return false
			}
			
			leftQtyInputValue.value = val
			leftQtyPopup.value.close()
			
			// 添加数据到列表
			addScannedMaterial(leftQtyNum)
			return true
		}
		
		// ============ leftQty 弹窗取消 ============
		const handleLeftQtyCancel = () => {
			leftQtyPopup.value.close()
			pendingQrCode.value = ''
			currentScanMaterial.value = []
			leftQtyInputValue.value = ''
			fdIndex.value = -1
		}
		
		// ============ 添加已扫物料（退料专用） ============
		const addScannedMaterial = (leftQty) => {
			scanBatchNumber.value = pendingQrCode.value
			const row = tableData.value[fdIndex.value]
			
			// 累加到"已备数"
			row.completedQty += leftQty || 0
			
			// 扔进本地已扫池
			localScannedList.value.push({
				...currentScanMaterial.value,
				batchQty: leftQty || 0,
				supplierName: currentScanMaterial.value.supplierName || '',
				leftQty: leftQty
			})
			
			// 刷新已扫物料列表
			flushBeforeTableData()
			
			// 复位输入框
			setInputFocus()
		}
		
		// ============ 公共方法 ============
		const setInputFocus = function() {
			scanBatchNumber.value = ''
			easyinput.value.onBlur()
			easyinput.value.onFocus()
		}
		
		const flushBeforeTableData = function() {
			const map = new Map()
			localScannedList.value.forEach(it => {
				const key = `${it.materialNo}__${it.batchNumber}`
				if (map.has(key)) {
					map.get(key).batchQty += it.batchQty
				} else {
					map.set(key, { ...it })
				}
			})
			beforeTableData.value = Array.from(map.values()).map((v, i) => ({
				...v,
				uniqueId: `${v.materialNo}_${v.batchNumber}_${i}`,
				slideX: 0
			}))
		}
		
		const isBatchExist = (batchNo) =>
			beforeTableData.value.some((it) => it.batchNumber === batchNo)
		
		const showError = (msg) => {
			// #ifdef APP-PLUS
			plus.device.beep(2)
			// #endif
			errorTipMessage.value = msg
			errorTip.value.open()
			errorState.value = 0
		}
		
		const handleCloseErrorTipsModal = async function() {
			errorTip.value.close()
			if (errorState.value === 0) await setInputFocus()
		}
		
		// ============ 左滑删除 ============
		const touchStart = (e) => {
			const idx = e.currentTarget.dataset.index
			beforeTableData.value.forEach((v, i) => { if (i !== idx) v.slideX = 0 })
			beforeTableData.value[idx].startX = e.touches[0].pageX
			beforeTableData.value[idx].slideX = beforeTableData.value[idx].slideX || 0
		}
		
		const touchMove = (e) => {
			const idx = e.currentTarget.dataset.index
			const row = beforeTableData.value[idx]
			const delta = e.touches[0].pageX - row.startX
			row.slideX = delta < 0 ? Math.max(delta, -70) : Math.min(delta, 0)
		}
		
		const touchEnd = (e) => {
			const idx = e.currentTarget.dataset.index
			const row = beforeTableData.value[idx]
			row.slideX = row.slideX <= -35 ? -70 : 0
		}
		
		const deleteItem = async (idx) => {
			const target = beforeTableData.value[idx]
			
			// 有 id 先调接口删后端
			if (target.id) {
				try {
					const { code, msg } = await uni.$reqPost('deleteScanInMaterial', { id: target.id })
					if (code !== 0) {
						showError(msg || '后端删除失败')
						return
					}
				} catch (err) {
					showError(err.errMsg || '网络异常，删除失败')
					return
				}
			}
			
			// 删本地
			const key = `${target.materialNo}__${target.batchNumber}`
			const listIdx = localScannedList.value.findIndex(
				v => `${v.materialNo}__${v.batchNumber}` === key
			)
			if (listIdx > -1) localScannedList.value.splice(listIdx, 1)
			
			flushBeforeTableData()
			
			// 回退已备数
			const row = tableData.value.find(r => r.materialNo === target.materialNo)
			if (row) row.completedQty -= target.batchQty
		}
		
		// ============ 合并数据 ============
		const mergeBeforeIntoTable = () => {
			const mergedTableData = JSON.parse(JSON.stringify(tableData.value))
			const map = {}
			mergedTableData.forEach(row => {
				if (!row.inRequestSubdetailList) row.inRequestSubdetailList = []
				map[row.materialNo] = row
			})
			
			beforeTableData.value.forEach(item => {
				const target = map[item.materialNo]
				if (target) {
					const subItem = { ...item }
					if (item.leftQty !== undefined) subItem.leftQty = item.leftQty
					target.inRequestSubdetailList.push(subItem)
				}
			})
			return mergedTableData
		}
		
		// ============ 保存 ============
		const handleSave = async function() {
			if (saveDisabled.value) return
			saveDisabled.value = true
			try {
				isLightText.value = true
				const mergedData = mergeBeforeIntoTable()
				await uni.$reqPost('saveScannedInMaterials', {
					id: receiveList.value?.id,
					requestNo: receiveList.value?.requestNo,
					requestType: receiveList.value?.requestType,
					businessType: receiveList.value?.businessType,
					businessSubType: receiveList.value?.businessSubType,
					status: receiveList.value?.status,
					priority: receiveList.value?.priority,
					inRequestDetailPDAList: mergedData
				}).then(({ code, data, msg }) => {
					if (code === 0) {
						uni.showModal({ title: '提示', content: '保存成功', showCancel: false })
						search()
					} else {
						showError(msg)
					}
				})
			} finally {
				saveDisabled.value = false
			}
		}
		
		// ============ 提交 ============
		const handleSubmit = async function() {
			if (submitDisabled.value) return
			submitDisabled.value = true
			try {
				isSubmitLight.value = true
				const mergedData = mergeBeforeIntoTable()
				await uni.$reqPut('submitScannedInMaterials', {
					id: receiveList.value?.id,
					requestNo: receiveList.value?.requestNo,
					requestType: receiveList.value?.requestType,
					businessType: receiveList.value?.businessType,
					businessSubType: receiveList.value?.businessSubType,
					status: receiveList.value?.status,
					priority: receiveList.value?.priority,
					inRequestDetailPDAList: mergedData
				}).then(({ code, data, msg }) => {
					if (code === 0) {
						uni.showModal({ title: '提示', content: '提交成功', showCancel: false })
						search()
					} else {
						showError(msg)
					}
				})
			} finally {
				submitDisabled.value = false
			}
		}
		
		// ============ 跳转详情 ============
		const handleToDetails = function(ret) {
		    // 设置刷新标记，从详情页返回时需要刷新
		    uni.setStorageSync('needRefreshReturnMaterial', 'true')
		    
		    uni.navigateTo({
		        url: '/pages/workbranch/warehouse/scanInOut/In/businessType3/businessType3Detail'
		    })
		    uni.setStorageSync('mixMaterialDetail', JSON.stringify(ret))
		}
		
		// ============ 触底加载 ============
		// onReachBottom(() => {
		// 	queryParams.value.pageNo += 1
		// 	uni.$reqGet('getPrepareMaterialList', queryParams.value)
		// 		.then(({ data }) => {
		// 			Array.prototype.push.call(scanMaterialList.value, ...data?.list ?? [])
		// 		})
		// })
		
		// ============ 样式计算 ============
		const saveBtnTextStyle = computed(() => ({
			fontSize: '14px',
			fontWeight: 'bold',
			color: saveDisabled.value ? '#ccc' : (isLightText.value ? 'rgba(0,160,233,1)' : '')
		}))
		
		const submitBtnTextStyle = computed(() => ({
			fontSize: '14px',
			fontWeight: 'bold',
			color: submitDisabled.value ? '#ccc' : (isSubmitLight.value ? 'rgba(0,160,233,1)' : '')
		}))
		
		return {
			goBack,
			isBefore,
			tableData,
			beforeTableData,
			easyinput,
			easyinputStore,
			errorTip,
			errorTipMessage,
			handleCloseErrorTipsModal,
			handleKeydown,
			scanBatchNumber,
			handleScanMaterial,
			handleToDetails,
			handleSave,
			handleSubmit,
			saveDisabled,
			submitDisabled,
			saveBtnTextStyle,
			submitBtnTextStyle,
			// 库位
			storeName,
			erpStockName,
			wmsStoreName,
			handleScanStore,
			confirmStore,
			// 删除
			touchStart,
			touchMove,
			touchEnd,
			deleteItem,
			// leftQty
			leftQtyPopup,
			leftQtyInputValue,
			handleLeftQtyConfirm,
			handleLeftQtyCancel
		}
	}
})
</script>

<style lang="scss" scoped>
	/* 左滑删除样式 */
	.scroll-box{
		height:100%;                 /* 继承父级高度 */
	}
  .cell-row {
		display: flex;
		background-color: #f5f7fa;
		font-weight: bold;
		border-radius: 4px;
		margin-bottom: 5px;
	}
	.swipe-row{
		position:relative;
		width:100%;
		height:44px;
		overflow:hidden;
		border-bottom:1px solid #eee;
	}
	.content-area{
		position:absolute;
		left:0;
		top:0;
		right:0;
		bottom:0;
		z-index:2;
		background:#fff;
		display:flex;
		align-items:center;
		transition: transform .25s;
	}
	.cell{
		flex:1;
		text-align:center;
		font-size:14px;
		color:#333;
	}
	.btn-area{
		position:absolute;
		right:0;
		top:0;
		width:70px;
		height:100%;
		background:#e54d42;
		color:#fff;
		display:flex;
		align-items:center;
		justify-content:center;
		font-size:14px;
		z-index:1;
	}

	.gui-header-leader-btns {
		color: black;
		font-size: 24px !important;
		margin-left: 24rpx;
	}

	.list-content {
		margin-top: 80px;
		background-color: #edeeee;
	}

	.scan {
		margin-top: 10px;
		height: 55px;
		display: flex;
		justify-content: center;
		background-color: white;
	}

	.scan-card {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding-left: 10px;
		padding-right: 10px;
	}

	.store-info {
		margin-top: 10px;
		height: 140px;
		display: flex;
		justify-content: center;
		background-color: white;
	}

	.store-info-card {
		display: flex;
		flex-direction: column;
		
		.row-space-between {
			flex: 1;
			width: calc(100vw - 40px);
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding-top: 12px;
			padding-bottom: 12px;
		}
	}

	.card-list-flexbox {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		margin: 3px 2px;

		.card-list-item {
			width: 750rpx;
			height: 40px;
		}
	}
	
	.card-list-item {
		margin: 2rpx 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;

		uni-text {
			font-size: 14px;
			height: 50rpx;
			text-align: left;
			padding: 0 12px;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.text-1 {
			flex: 1;
			height: 40px;
			justify-content: flex-start;
		}

		.text-2 {
			flex: 3;
			height: 40px;
			justify-content: flex-end;
			margin-right: 4px;
			padding: 2px 6px;
		}
	}

	.card-list-flexbox:nth-of-type(2) {
		margin-top: 48px;
	}

	.fixedTop {
		bottom: 0 !important;
		top: 3.25rem !important;
	}

	.popup-content {
		height: 75vh;
		overflow-y: scroll;
		background-color: #edeeee;
	}

	.font-icons {
		width: 40px;
		font-size: 20px;
	}

	.scan {
		height: 45px;
		width: calc(100% - 48px);
		margin: 12px;
		padding: 0 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 6px;
		background-color: white;

		.scan-card {
			width: 100%;
			display: grid;
			grid-template-rows: 1fr;
			grid-template-columns: 7fr 2fr;
			align-items: center;

			input {
				height: 35px;
				line-height: 35px;
			}

			text {
				width: 100%;
				text-align: right;
			}
		}
	}

	.custom-table {
		height: calc(100vh - 265px);
		min-height: 230px;
		margin: 5px 0;
		// min-height: 600px;
		overflow-y: scroll;
	}

  .custom-table-head .uni-th {
    color: #333;
    font-weight: bold;
  }

  .custom-table .uni-tr:nth-child(even) {
    background-color: #f5f7fa;
  }

  .custom-table .uni-tr:nth-child(odd) {
    background-color: #ffffff;
  }

  /* 仓库和货位信息展示样式 */
  .info-row {
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    background-color: #f0f2f5;
    border-radius: 8rpx;
    margin: 10rpx 20rpx;
  }

  .info-label {
    color: #666;
    font-size: 28rpx;
    margin-right: 8rpx;
  }

  .info-value {
    color: #333;
    font-size: 28rpx;
    margin-right: 20rpx;
    font-weight: 500;
  }

  /* 不良品是否入库单选按钮样式 */
  .bad-material-radio {
    display: flex;
    align-items: center;
    padding: 10rpx 24rpx;
    background-color: #fff;
    margin: 0 24rpx 10rpx 24rpx;
    border-radius: 6px;
    
    .radio-label {
      font-size: 28rpx;
      color: #333;
      margin-right: 20rpx;
      white-space: nowrap;
    }
    
    .radio-group {
      display: flex;
      flex-direction: row;
    }
    
    .radio-item {
      display: flex;
      align-items: center;
      margin-right: 30rpx;
      
      radio {
        transform: scale(0.8);
      }
      
      text {
        font-size: 28rpx;
        color: #333;
        margin-left: 8rpx;
      }
    }
  }

	.modal-btns {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.line {
		margin-top: 10rpx;
		height: 80rpx;
		width: 1rpx;
		background-color: #dcdcdc;
	}

	.tabs {
		width: 100%;
		height: 45px;
		display: flex;
		align-items: flex-end;
		padding: 0 2px;
		background-color: white;
		
		.tabs-list {
			border-radius: 3px;
			overflow: hidden;
		}
	
		.tabs-item {
			display: inline-block;
			width: 72px;
			height: 30px;
			line-height: 30px;
			padding: 0 8px;
			font-size: 14px;
			font-weight: bold;
			text-align: center;
			color: black;
			border-bottom: 1.5px dashed #00a0e9;
			transition: all .5s ease-in-out;
		}
	
		.tabs-item-active {
			position: relative;
			display: inline-block;
			width: 72px;
			height: 30px;
			line-height: 30px;
			padding: 0 8px;
			font-size: 14px;
			font-weight: bold;
			text-align: center;
			color: white;
			border-left: 1px solid #00a0e9;
			border-top: 1px solid #00a0e9;
			border-right: 1px solid #00a0e9;
			border-bottom: 1.5px solid #00a0e9;
			border-radius: 5px 5px 0 0;
			animation: .3s linear show;
			background-color: #00a0e9;
		}
	
		.tabs-item-active::before {
			content: '';
			position: absolute;
			left: -10px;
			bottom: 0;
			width: 10px;
			height: 10px;
			background: radial-gradient(circle at 0% 25%, transparent 10px, #00a0e9 0)
		}
	
		.tabs-item-active::after {
			content: '';
			position: absolute;
			right: -10px;
			bottom: 0;
			width: 10px;
			height: 10px;
			background: radial-gradient(circle at 100% 25%, transparent 10px, #00a0e9 0)
		}
	}
	
	@keyframes show {
		from {
			transform: translateY(5%);
		}
	
		to {
			transform: translateY(0%);
		}
	}

	.sign-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 8px;
		border: 1px solid #999999;
		background-color: white;
		border-radius: 6px;
	}

	.sign-btn.disabled {
		opacity: 0.5;
		pointer-events: none;
	}
	// /* 表头也允许换行，保证与列宽对齐 */
	// ::v-deep .break-col {
	//   white-space: normal !important;
	//   word-break: break-all !important;
	//   line-height: 1.2;
	// }
	
	// /* 单元格超长自动分段 */
	// ::v-deep .break-cell {
	//   white-space: normal !important;
	//   word-break: break-all !important;
	//   line-height: 1.2;
	//   padding: 4px 2px;          /* 上下留一点空隙，视觉更舒服 */
	// }
</style>
