<template>
	<view>
		<u-navbar back-text="返回" title="临时出库(不过帐)" :background="background"></u-navbar>
		<u-form ref="testForm">
			<u-form-item :border-bottom="false">
				<p>单号:</p>
				<u-select v-model="dlistShow" mode="single-column" value-name="id" :list="dlist"
					@confirm="selShipRequestName" confirm-text="确认选择" class="single-out" />
				<u-input :focus="focusShipRequest" :border="true" v-model="ShipRequestName" placeholder="请输入单号"
					@confirm="serachMaterialList" />
				<u-button @click="selectShipRequestName" type="primary" size="mini">选择单号</u-button>
			</u-form-item>
			<u-form-item :border-bottom="false">
				<p>条码:</p>
				<u-input :border="true" v-model="barCode" placeholder="请扫描条码" :focus="focusBarCode"
					@confirm="confirmBarcode" />
			</u-form-item>
		</u-form>
		<view>
			<uni-table ref="InvoiceList" :border="true">
				<uni-tr>
					<uni-th width="60" align="center" style="font-size: 12px;">料号</uni-th>
					<uni-th width="100" align="center" style="font-size: 12px;">品名</uni-th>
					<uni-th width="100" align="center" style="font-size: 12px;">需求部门</uni-th>
					<uni-th width="60" align="center" style="font-size: 12px;">需求</uni-th>
					<uni-th width="60" align="center" style="font-size: 12px;">卷数</uni-th>
					<uni-th width="60" align="center" style="font-size: 12px;">数量</uni-th>
					<uni-th width="100" align="center" style="font-size: 12px;">物料规格</uni-th>
					<uni-th width="100" align="center" style="font-size: 12px;">SDK规格</uni-th>
					<uni-th width="60" align="center" style="font-size: 12px;">阶段</uni-th>
					<uni-th width="60" align="center" style="font-size: 12px;">单号</uni-th>
					<uni-th width="120" align="center" style="font-size: 12px;">生产订单类型</uni-th>
					<uni-th width="80" align="center" style="font-size: 12px;">客户编码</uni-th>
					<uni-th width="80" align="center" style="font-size: 12px;">是否通用料</uni-th>
					<uni-th width="120" align="center" style="font-size: 12px;">最小收卷米数</uni-th>
					<!-- 	<uni-th width="60" align="center" style="font-size: 12px;">行号</uni-th> -->
				</uni-tr>
				<uni-tr v-for="(item, index) in InvoiceList" :key="index">
					<uni-td width="40" align="center" style="font-size: 12px; ">{{ item.MATERIALSPECNAME}}</uni-td>
					<uni-td width="100" align="center" style="font-size: 12px; ">{{ item.DESC_CN }}</uni-td>
					<uni-td width="100" align="center" style="font-size: 12px; ">{{ item.DEPARTMENT }}</uni-td>
					<uni-td width="40" align="center" style="font-size: 12px; ">{{ item.REQUESTQUANTITY }}</uni-td>
					<uni-td width="40" align="center" style="font-size: 12px; ">{{ item.JS }}</uni-td>
					<uni-td width="40" align="center" style="font-size: 12px; ">{{ item.ASSIGNEDQUANTITY }}</uni-td>
					<uni-td width="40" align="center" style="font-size: 12px; ">{{ item.DESCRIPTION}}</uni-td>
					<uni-td width="40" align="center" style="font-size: 12px; ">{{ item.SPECNAME}}</uni-td>
					<uni-td width="40" align="center" style="font-size: 12px; ">{{ item.PHASE}}</uni-td>
					<uni-td width="40" align="center" style="font-size: 12px; ">{{ item.SHIPREQUESTNAME}}</uni-td>
					<uni-td width="120" align="center" style="font-size: 12px;">{{ item.PRODUCTORDERTYPE}}</uni-td>
					<uni-td width="80" align="center" style="font-size: 12px;">{{ item.CUSTOMERNO}}</uni-td>
					<uni-td width="80" align="center" style="font-size: 12px;">{{ item.COMMONMATERIALFLAG}}</uni-td>
					<uni-td width="120" align="center" style="font-size: 12px;">{{ item.SJMS}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<br />
		<u-card style="border: 1rpx solid #0081ff" :show-head="false" :full="true"
			:body-style="{ height: '100rpx' }">
			<view slot="body">
				<u-row>
					<u-col span="6">
						<view>累计扫描支数：{{ SUMJS || '0' }}</view>
					</u-col>
					<u-col span="6">
						<view>累计扫描数量：{{ MATERIALQUANTITY || '0' }}</view>
					</u-col>
				</u-row>
			</view>
		</u-card>
		<br />
		<!-- fit 列的宽度是否自撑开 -->
		<!-- <view>
			<zb-table style="height: 500upx;" ref="zbTable" :show-header="true" :columns="column" :stripe="true"
				:fit="true" show-summary :highlight="true" :border="true" :data="BoxInfoList" :cell-style="cellStyleFn"
				@dele="dele" @edit="buttonEdit"></zb-table>
		</view> -->
		<view class="mar-card">
			<br />
			    <view class="search-box">  
			      <input   
			        type="text"   
			        placeholder="请输入搜索批次"   
			        v-model="searchBatch"    
			        class="search-input"  
			      />  
			    </view> 
			<view class="container" style="padding-bottom: 180upx;">
				<view class="list-item" v-for="(item, index) in BoxInfoList" :key="item.id"
					@touchstart="onTouchStart(index, $event)" @touchmove="onTouchMove(index, $event)"
					@touchend="onTouchEnd(item,index, $event)" :style="getItemStyle(index)">
					<view :class="setVisableCharge( item.CHARGE )">
						<view>
						<div>
							<text class="card-description"> 批次: {{ item.CHARGE }}</text>
						</div>
						<div>
							<text class="card-description"> 料号: {{ item.MATERIALSPECNAME }}</text>
							<text class="card-description"> 阶段: {{ item.PHASE }}</text>
							<text class="card-description"> SDK规格: {{ item.SPECNAME }}</text>
						</div>
						<div>
							<text class="card-description"> 品名: {{ item.DESC_CN }}</text>
						</div>
						<div>
							<text class="card-description"> 实际规格: {{ item.TRUEGG }}</text>
						</div>
						<div>
							<text class="card-description"> 库位: {{ item.ERPLOCATION }}</text>
						</div>
						<div>
							<text class="card-description"> 货架: {{ item.LOCATIONNAME }}</text>
						</div>
						<div>
							<text class="card-description"> 库区: {{ item.AREANAME }}</text>
						</div>
						<div>
							<text class="card-description"> 立体库货架: {{ item.SHELFNAME }}</text>
						</div>
						<div>
							<text class="card-description"> 系统数量: {{ item.MATERIALQUANTITY }} {{ item.UNIT }}</text>
						</div>
						<div>
							<text class="card-description"> 发货数量: {{ item.MATERIALQUANTITY2 }} {{ item.UNIT }}</text>
						</div>
						<div>
							<text class="card-description"> 到货时间: {{ item.RECEIVETIME }} {{ item.UNIT }}</text>
						</div>
						<div class="button-group" style = "margin: 5rpx; align: center;">
							<u-button type="primary" size="mini" @click="deleteItem(item, index)">删除</u-button>
							<u-button style="margin-left: 20rpx;" type="primary" size="mini" @click="buttonEdit(index, item)">编辑</u-button>
						</div>
					</view>
					<!-- <view class="delete-btn" @click="deleteItem(item, index)"  >删除</view> -->
					</view>
				</view>
			
			</view>	
		</view>
		<!-- 
		<view class="tabbar_bottom">
			<u-input v-if="false" v-model="opCode" />
			<uni-datetime-picker style="align-items: center;" type="date" :clear-icon="false" v-model="commitDate"
				@maskClick="maskClick" />
			<u-button class="btn-bottom" @click="ConfirmButton" type="primary" :disabled="disableButton">发货确认</u-button>
		</view>
		 -->
	</view>
</template>

<script>
	import {
		getOpCode
	} from '@/common/api.js';
	import { cals } from '@/utils/cal'
	export default {
		data() {
			return {
				SUMJS: 0,
				MATERIALQUANTITY: 0,
				column: [ //列
					{
						name: 'MATERIALSPECNAME',
						label: '料号'
					},
					{
						name: 'CHARGE',
						label: '批次',
						align: 'center',
						// fixed: true,
					},
					{
						name: 'DES_CN',
						label: '品名'
					},

					{
						name: 'ERPLOCATION',
						label: '库位'
					},
					{
						name: 'LOCATIONNAME',
						label: '货架'
					}, {
						name: 'AREANAME',
						label: '库区'
					},
					{
						name: 'SHELFNAME',
						label: '立体库货架'
					},
					{
						name: 'MATERIALQUANTITY',
						label: '系统数量',
						sorter: true
					},
					{
						name: 'MATERIALQUANTITY2',
						label: '发货数量',
						sorter: true
					},
					{
						name: 'RECEIVETIME',
						label: '到货时间'
					},
					{
						name: 'operation',
						type: 'operation',
						label: '操作',
						renders: [{
								name: '编辑',
								size: 'mini',
								func: 'edit' // func 代表子元素点击的事件 父元素接收的事件 父元素 @edit
							},
							{
								name: '删除',
								size: 'mini',
								type: 'warn',
								func: "dele"
							},
						]
					},
				],
				commitDate: '',
				opCode: '',
				disableButton: false,
				pageNum: 1, // 页数
				pageSize: 50, // 条数
				total: 0, //每页总数
				totalAll: 0,
				bqts: 0,
				bqkcs: 0,
				// moreStatus: 'more', // 上拉加载更多  more加载前 loading加载中	no-more没有更多数据
				flag: true, // 上拉加载开关 防止一次触底查询多次问题,防止数据查完后触底还调接口问题
				dlist: [{
					id: '',
					label: ''
				}], //选择内容
				dlistShow: false, //是否显示选择框				
				BoxInfoList: [], //列表展示明细
				boxList: [], //后台过账明细
				bindBoxList: [], //已备货明细
				preBindBoxList: [], //待备货明细
				ShipRequestName: "",
				shipRequestType: "",
				barCode: "",
				userId: "",
				siteName: "",
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				focusBarCode: false, //焦点是否被选中
				focusShipRequest: true, //默认焦点在单号
				InvoiceList: [],
				indexList: [],
				startX: 0, // 触摸开始时的X坐标
				endX: 0, // 触摸结束时的X坐标  
				isMoving: false, // 是否正在滑动  
				showDeleteBtn: null, // 显示删除按钮的索引 
				isCollapsed: false ,// 默认为展开状态
				searchBatch : '',//搜索的批次
			}
		},
		mounted() {
			this.tabH = this.$GetRemainingHeight(4, 0); //定义表格的高度
			let that = this
			uni.getStorage({
				key: "siteName",
				success(res) {
					that.siteName = res.data
				}
			})
			uni.getStorage({
				key: "userid",
				success(res) {
					that.userId = res.data
				}
			})
			// let Things = 20
			// for (var i = 0; i < Things; i++) {
			// 	this.BoxListInfo.push({aa:"1"}) 
			// }	
			this.getTimeData();
		},
		methods: {
			//隐藏展示批次
			setVisableCharge (iCharge) {
				if (this.searchBatch == '') {
					return 'card-display'
				} else {
					if (iCharge.includes(this.searchBatch)) {
						return 'card-dispaly'
					} else {
						return 'card-hidden'
					}
				}
			},
			//折叠
			toggle() {
				this.isCollapsed = !this.isCollapsed;
			},
			onTouchStart(index, event) {
				this.startX = event.touches[0].clientX;
				this.isMoving = false;
				this.showDeleteBtn = null;
			
			},
			
			onTouchMove(index, event) {
				this.endX = event.touches[0].clientX;
				if (this.startX - this.endX > 50) { // 判断滑动距离，可以根据需要调整
				  // console.log("222")
					this.isMoving = true;
					this.showDeleteBtn = index;
				} else if (this.endX - this.startX > 50) {
					this.isMoving = false;
					this.showDeleteBtn = null;
			
				}
			
			},
			
			onTouchEnd(row, index, event) {
				if (this.isMoving && this.showDeleteBtn === index) {
					// this.deleteItem(row, index)
					console.log("111")
					this.isMoving = false;
					this.showDeleteBtn = null;
				} else {
					this.isMoving = false;
					this.showDeleteBtn = null;
				}
			},
			deleteItem(index, row) {
				console.log("***********",row , index)
				let boxList = []
				boxList.push(this.BoxInfoList[row])
				this.$MyRequest('/invoice/UnFIFODessignOrAssign', {
					ShipRequestName: this.ShipRequestName,
					ShipRequestDetailName: this.BoxInfoList[row]?.SHIPREQUESTDETAILNAME,
					MATERIALSPECNAME: this.BoxInfoList[row]?.MATERIALSPECNAME,
					MATERIALPACKINGNAME: this.BoxInfoList[row]?.MATERIALPACKINGNAME,
					MATERIALQUANTITY: this.BoxInfoList[row]?.MATERIALQUANTITY,
					MATERIALQUANTITY2: this.BoxInfoList[row]?.MATERIALQUANTITY2,
					SDK_ID: this.BoxInfoList[row]?.SDK_ID,
					PHASE: this.BoxInfoList[row]?.PHASE,
					type: "Dessign",
					user: this.userId,
					siteName: this.siteName,
				}).then(res => {
					this.barCode = '';
					this.focusBarCode = true
					this.focusShipRequest = false
					// console.log(res)
					this.$showMessage(res.data?.message)
					// this.$showMessage('删除成功!')
					this.serachMaterialList()
					console.log(22, this.indexList)
					this.getStockOutInvoiceInfo()
				}).catch(err => {
					this.barCode = '';
					this.focusBarCode = true
					this.focusShipRequest = false
					this.$showMessage(res)
				})
			},
			getItemStyle(index) {
				return {
					transform: this.showDeleteBtn === index ? 'translateX(-60px)' : 'translateX(0)', // 根据需要调整位移距离  
					transition: this.isMoving ? 'none' : 'transform 0.3s', // 滑动时禁用过渡效果  
				};
			},
			/**取消备货
			 * @param {Object} index
			 * @param {Object} row
			 */
			// dele(index, row) {
			// 	let boxList = []
			// 	boxList.push(this.BoxInfoList[row])
			// 	this.$MyRequest('/invoice/DessignOrAssign', {
			// 		ShipRequestName: this.ShipRequestName,
			// 		ShipRequestDetailName: this.BoxInfoList[row].SHIPREQUESTDETAILNAME,
			// 		MATERIALSPECNAME: this.BoxInfoList[row].MATERIALSPECNAME,
			// 		MATERIALPACKINGNAME: this.BoxInfoList[row].MATERIALPACKINGNAME,
			// 		MATERIALQUANTITY: this.BoxInfoList[row].MATERIALQUANTITY,
			// 		MATERIALQUANTITY2: this.BoxInfoList[row].MATERIALQUANTITY2,
			// 		SDK_ID: this.BoxInfoList[row].SDK_ID,
			// 		PHASE: this.BoxInfoList[row].PHASE,
			// 		type: "Dessign",
			// 		user: this.userId,
			// 		siteName: this.siteName,
			// 	}).then(res => {
			// 		this.barCode = '';
			// 		this.focusBarCode = true
			// 		this.focusShipRequest = false
			// 		this.$showMessage(res)
			// 		this.serachMaterialList()
			// 		console.log(22, this.indexList)
			// 		this.getStockOutInvoiceInfo()
			// 	}).catch(err => {
			// 		this.barCode = '';
			// 		this.focusBarCode = true
			// 		this.focusShipRequest = false
			// 		this.$showMessage(res)
			// 	})
			// },
			getTimeData() {
				var year = new Date().getFullYear(); //年
				if (year < 1900) year = year + 1900;
				var month = new Date().getMonth() + 1; //月
				if (month < 10) month = '0' + month;
				var day = new Date().getDate(); //日
				if (day < 10) day = '0' + day;
				const calendar1 = year + '-' + month + '-' + day
				this.commitDate = calendar1
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			// 编辑发货数量
			buttonEdit(index, row) {
				console.log(row)
				// 打开编辑对话框，或者直接修改 this.tableData[index]
				console.log(this.BoxInfoList[row]?.IS_CHECK)
				this.showInputDialog(row)
			},
			// 显示弹窗输入框
			showInputDialog(row) {
				uni.showModal({
					title: '请完成发货数量填写',
					content: '',
					editable: true, //是否显示输入框
					placeholderText: '请输入数量', //输入框提示内容
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							console.log('输入的内容：', res, res.content);
							// console.log('输入的内容1：', row, this.BoxInfoList[row]);
							if (Number(row.MATERIALQUANTITY) >= Number(res.content)) {
								row.MATERIALQUANTITY2 = res.content;
								this.$MyRequest('/SaleOut/updateSalePreOrder', {
									...row,
									user: this.userId,
									ShipRequestName: this.ShipRequestName,
									siteName: this.siteName == "" ? "SDK" : this.siteName,
								}).then(res => {
									this.$showMessage(res.data.message)
									this.getStockOutInvoiceInfo()
								}).catch(err => {
									try {
										Vue.prototype.$playFail()
									} catch (e) {}
									this.$showMessage(err)
								})
								// this.getStockOutInvoiceInfo()
							} else {
								try {
									Vue.prototype.$playFail()
								} catch (e) {}
								this.$showMessage("发货数量不能大于标签数量")
							}
						}
					}
				});
			},
			// 设置是否审核的颜色状态
			cellStyleFn({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				return {
					backgroundColor: this.colorFn(row)
				}
			},
			colorFn(row) {},
			// 上拉刷新
			pullUp(done) {
				if (this.flag) {
					// this.moreStatus = 'loading' //加载中时的状态 转圈
					this.serachMaterialList()
					done('')
					// this.moreStatus = 'more'
				} else {
					// this.moreStatus = 'no-more'
					done('ok')
				}
			},
			pullUpLoading() {
				// this.$refs.zbTable.pullUpCompleteLoading('ok')	
			},
			selShipRequestName(e) {
				this.BoxInfoList = []
				this.pageNum = 1
				this.ShipRequestName = e[0].value;
				this.indexList = []
				this.serachMaterialList();
			},
			serachMaterialList() {
				this.InvoiceList = []
				//先获取已经备货明细
				this.BoxInfoList = []
				this.$MyRequest('/invoice/getReservePackingInfo', {
					ShipRequestName: this.ShipRequestName,
					ERPFACTORY: JSON.parse(uni.getStorageSync('orgObject')).ERPFACTORY,
					user: this.userId
				}).then(res => {
					if (res.data.success) {
						this.BoxInfoList = res.data.resultObj
						this.getStockOutInvoiceInfo()
					} else {
						this.$showMessage(res.data.message)
					}

				}).catch(err => {
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					this.$showMessage(err)
				})
			},
			tableRowStyleName({
				row
			}) {

			},

			selectShipRequestName() {
				this.dlist = [];
				this.$MyRequest('/invoice/getStockOutInvoiceList', {
					ShipRequestName: this.ShipRequestName,
					ERPFACTORY: JSON.parse(uni.getStorageSync('orgObject')).ERPFACTORY,
				}).then(res => {
					if (res.data.success) {
						for (var i = 0; i < res.data.resultObj.length; i++) {
							// console.log(res.data.resultObj[i].SHIPREQUESTNAME)
							this.dlist.push({
								id: res.data.resultObj[i].SHIPREQUESTNAME,
								label: res.data.resultObj[i].SHIPREQUESTNAME
							});

						}
						this.dlistShow = true;
					} else {
						try {
							Vue.prototype.$playFail()
						} catch (e) {}
						this.$showMessage(res.data.message)
					}

				}).catch(err => {
					this.$showMessage(err)
				})
			},

			getStockOutInvoiceInfo() {
				this.SUMJS = 0;
				this.MATERIALQUANTITY = 0;
				this.BoxInfoList.map(item => {
					// 累计数量
					this.SUMJS = parseFloat(this.SUMJS) + 1
					this.MATERIALQUANTITY = (cals.add(this.MATERIALQUANTITY, item.MATERIALQUANTITY2)).toNumber()
				})
				this.$MyRequest('/invoice/getStockOutInvoiceSumInfo', {
					ShipRequestName: this.ShipRequestName,
					ERPFACTORY: JSON.parse(uni.getStorageSync('orgObject')).ERPFACTORY,
					user: this.userId
				}).then(res => {
					if (res.data.success) {
						this.InvoiceList = res.data.resultObj
					} else {
						try {
							Vue.prototype.$playFail()
						} catch (e) {}
						this.$showMessage(res.data.message)
					}

				}).catch(err => {
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					this.$showMessage(err)
				})
			},
			confirmBarcode() {
				let list = this.BoxInfoList;
				console.log(list)
				this.focusBarCode = false;
				if (this.BoxInfoList.some(box => box.MATERIALPACKINGNAME === this.MATERIALPACKINGNAME)) {
					this.$showMessage("该标签已扫描，请不要重复扫描！");
					this.$nextTick(() => {
						this.barCode = ""
						this.focusBarCode = true
						this.focusShipRequest = false
					})
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					return;
				}
				this.$MyRequest('/invoice/UnFIFODessignOrAssign', {
					ShipRequestName: this.ShipRequestName,
					MATERIALPACKINGNAME: this.barCode,
					ERPFACTORY: JSON.parse(uni.getStorageSync('orgObject')).ERPFACTORY,
					type: "Assign",
					user: this.userId,
					siteName: this.siteName
				}).then(res => {
					if (res.data.success) {
						this.getStockOutInvoiceInfo()
						this.serachMaterialList()
						try {
							Vue.prototype.$playSuccess()
						} catch (e) {}
					} else {
						this.$showMessage(res.data.message)
						try {
							Vue.prototype.$playFail()
						} catch (e) {}
					}
					this.$nextTick(() => {
						this.barCode = ""
						this.focusBarCode = true
						this.focusShipRequest = false
					})
				}).catch(err => {
					this.$nextTick(() => {
						this.barCode = ""
						this.focusBarCode = true
						this.focusShipRequest = false
					})
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
				})

			},
			ConfirmButton() {
				this.disableButton = true;
				console.log(this.commitDate)
				let list = this.BoxInfoList;
				if (list <= 0) {
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					this.disableButton = false;
					this.$showMessage("不存在需要提交的信息")
					return;
				}
				this.boxList = [];
				// let sumQty2 = 0; // 发货数量
				// let sumQty = 0;
				for (var i = 0; i < list.length; ++i) {
					this.BoxInfoList[i].key = {
						SITENAME: "SDK",
						MATERIALPACKINGNAME: this.BoxInfoList[i].MATERIALPACKINGNAME
					};	
					this.boxList.push(this.BoxInfoList[i])
					// sumQty2 = (cals.add(this.BoxInfoList[i].MATERIALQUANTITY2,sumQty2)).toNumber();
				}
				
				// this.InvoiceList.map(item => {
				// 	sumQty = (cals.add(item.ASSIGNEDQUANTITY,sumQty)).toNumber();
				// })
				// console.log(sumQty2,sumQty)
				
				// if(sumQty2 != sumQty) {
				// 	this.$showMessage("备货数量与发货数量不相等！")
				// 	this.disableButton = false;
				// 	return;
				// }
				
				if (this.boxList.length < 1) {
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					this.disableButton = false;
					this.$showMessage("不存在需要出库的信息")
					return;
				}
				getOpCode({
					opcode: this.opCode,
					user: this.userId
				}).then((res) => {
					console.log(res.resultObj)
					this.opCode = res.resultObj
					this.$MyRequest('/invoice/commitShipRequestNameNew', {
						ShipRequestName: this.ShipRequestName,
						user: this.userId,
						siteName: this.siteName,
						boxList: this.boxList,
						commitDate: this.commitDate,
						opcode: this.opCode,
					}).then(res => {
						this.opCode = "";
						this.disableButton = false;
						this.$showMessage(res.data.message) //执行出库后返回的消息
						this.focusShipRequest = true //获取焦点，好继续扫描
						this.focusBarCode = false
						this.BoxInfoList = []
						this.ShipRequestName = ""
						this.indexList = []
						this.InvoiceList = []
					}).catch(err => {
						this.disableButton = false;
						try {
							Vue.prototype.$playFail()
						} catch (e) {}
						this.focusShipRequest = true
						this.$showMessage(err)

					})
				})

			}


		}
	}
</script>
<style>
	.single-out {
		pointerEvents: "none"
	}

switch {
		color: #FFCC33;
	}

	u-form-item {
		margin: 5rpx;
		padding: 5rpx;
	}

	/* 基础样式 */
	.picker {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		/* 根据需要调整宽度 */
	}

	.row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		/* 行与行之间的间距 */
	}

	.col {
		flex: 1;
		/* 使得每列占据相等的空间 */
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	label {
		// font-weight: bold;
		/* 标签加粗 */
		margin-bottom: 5px;
		/* 标签和值之间的间距 */
	}

	.value {
		/* 值的样式，可以根据需要调整 */
	}

	.container {
		padding: 10px;

	}

	.list-item {
		margin-top: 16px;
		/* 卡片之间的间距 */
		padding: 12px;
		/* 卡片内部的内边距 */
		background-color: #aaaa7f;
		/* 卡片背景色 */
		border-radius: 8px;
		/* 卡片边框圆角 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 卡片阴影效果 */
	}

	// .item-content {
	// 	flex: 1;
	// 	padding-left: 10px;

	// }
	.card-display {
		flex: 1;
		// padding-left: 10px;
		display: flex;
		// margin-bottom: 16px;
		/* 卡片之间的间距 */
		// padding: 12px;
		/* 卡片内部的内边距 */
		background-color: #aaaa7f;
		/* 卡片背景色 */
		// border-radius: 8px;
		/* 卡片边框圆角 */
		// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 卡片阴影效果 */
	}
	.card-description {
		margin: 5rpx;
	}
	.card-hidden {
		flex: 1;
		// padding-left: 10px;
		display: none;
		// margin-bottom: 16px;
		// /* 卡片之间的间距 */
		// padding: 12px;
		// /* 卡片内部的内边距 */
		// background-color: #aaaa7f;
		// /* 卡片背景色 */
		// border-radius: 8px;
		// /* 卡片边框圆角 */
		// box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 卡片阴影效果 */
	}

// .delete-btn {  
//     position: absolute;  
//     right: 120;  
//     top: 0;  
//     width: 120px;  
//     height: 100%;  
//     background-color: red;  
//     color: #fff;  
//     text-align: center;  
//     line-height: 120px; /* 仅当按钮高度固定为120px时使用 */  
// }

	.collapsed {
		display: none;
	}
</style>
