<template>
	<u-navbar title="人工上架" bgColor='#D3832A' leftIconColor='#ffffff' titleStyle='color:#ffffff' placeholder
		:autoBack="true" leftIconSize='35'></u-navbar>
	<image mode="widthFix" class="bgimg" src="/pagesHome/static/bgby.png"></image>
	<view class="scanqcview">
		<image src="/pagesHome/static/scanqc.png"></image>
		<view>请直接扫描库位码</view>
	</view>
	<view class="topviewbox">
		<view class="oebox">
			<image src="/pagesHome/static/changku.png"></image>
			<view>
				{{(reqobj.warehouseName||'')+'-'+(reqobj.areaTitle||'')+'-'+(reqobj.shelfTitle||"")+'-'+(reqobj.allocationTitle||'')}}
			</view>
		</view>
		<view class="contview">
			<view>
				<view>
					<image src="/pagesHome/static/uname.png"></image>
					<view>仓库名称</view>
				</view>
				<view>{{reqobj.warehouseName}}</view>
			</view>
			<view>
				<view>
					<image src="/pagesHome/static/changkuquyu.png"></image>
					<view>仓库区域</view>
				</view>
				<view>{{reqobj.areaTitle}}</view>
			</view>
		</view>
		<view class="numbox">
			<view>
				<view>
					<view>库位总数</view>
					<view>{{reqobj.orderTotalnum||0}}</view>
				</view>
				<view>
					<view>库位单数</view>
					<view>{{reqobj.totalNum||0}}</view>
				</view>
				<view>
					<view>库存品总数</view>
					<view>{{reqobj.stockTotalNum||0}}</view>
				</view>
				<view>
					<view>库存品数</view>
					<view>{{reqobj.stockNum||0}}</view>
				</view>
			</view>
		</view>
	</view>
	<view class="tabchecklist">
		<view @click="setstate(1)" :class="checkstate==1?'xz':''">
			<view>待上架数据</view>
			<view></view>
		</view>
		<view @click="setstate(2)" :class="checkstate==2?'xz':''">
			<view>库位数据</view>
			<view></view>
		</view>
		<view @click="setstate(3)" :class="checkstate==3?'xz':''">
			<view>库位托盘</view>
			<view></view>
		</view>
	</view>
	<view class="scview">
		<scroll-view class="sclcs" scroll-y="true">
			<view class="visc">
				<view class="item1" v-for="item in uplistarr" v-if="checkstate==1">
					<view v-if="upshelfScanType==1||upshelfScanType==2" @click.stop="(item)">
						<image src="/pagesHome/static/uoicondata2.png"></image>
						<view>合同号：{{item.orderCode}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==1">
						<image src="/pagesHome/static/uoicondata2.png"></image>
						<view>运单号：{{item.waybillNo}}</view>
					</view>
					<view v-if="upshelfScanType==1||upshelfScanType==2">
						<image src="/pagesHome/static/uoicondata3.png"></image>
						<view>上架数量：<text class="numb">{{item.enterNum}}</text></view>
					</view>
					<view v-if="upshelfScanType==3||upshelfScanType==4" @click.stop="goorderdetail(item)">
						<image src="/pagesHome/static/uoicondata2.png"></image>
						<view>合同号：{{item.orderCode}}</view>
					</view>
					<view v-if="upshelfScanType==3||upshelfScanType==4">
						<image src="/pagesHome/static/uoicondata3.png"></image>
						<view>上架数量：<text class="numb">{{item.enterNum}}</text></view>
					</view>
				</view>

				<view class="item2" v-for="item in datalist" v-if="checkstate==2">
					<view class="tpbx" v-if="item.goodsType==0">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>包条码：{{item.orderPackageCode}}</view>
					</view>
					<view class="tpbx" v-if="item.goodsType==0" @click.stop="goorderdetail(item)">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>订单号：{{item.orderCode}}</view>
					</view>

					<!-- 定制品 -->
					<view v-if="item.goodsType === 1">
						<view class="tpbx">
							<image src="/pagesHome/static/kuweiicon.png"></image>
							<view>服务号：{{item.serviceNum}}</view>
						</view>
						<view class="tpbx" @click.stop="goorderdetail(item)">
							<image src="/pagesHome/static/kuweiicon.png"></image>
							<view>订单号：{{item.orderCode}}</view>
						</view>
						<!-- <view class="tpbx">
							<image src="/pagesHome/static/kuweiicon.png"></image>
							<view>仓库地址：{{dtilobj.warehouseName}}</view>
						</view>
						<view class="tpbx">
							<image src="/pagesHome/static/kuweiicon.png"></image>
							<view>库位信息：{{dtilobj.areaTitle + '-' + dtilobj.allocationTitle}}</view>
						</view> -->
					</view>

					<!-- 零担 -->
					<view v-if="item.goodsType === 2">
						<view class="tpbx">
							<image src="/pagesHome/static/kuweiicon.png"></image>
							<view>运单号：{{item.waybillNo}}</view>
						</view>
						<view class="tpbx">
							<image src="/pagesHome/static/kuweiicon.png"></image>
							<view>订单号：{{item.orderCode}}</view>
						</view>
						<!-- <view class="tpbx">
							<image src="/pagesHome/static/kuweiicon.png"></image>
							<view>仓库地址：{{dtilobj.warehouseName}}</view>
						</view>
						<view class="tpbx">
							<image src="/pagesHome/static/kuweiicon.png"></image>
							<view>库位信息：{{dtilobj.areaTitle + '-' + dtilobj.allocationTitle}}</view>
						</view> -->
					</view>

					<!-- 库存品 -->
					<view v-if="item.goodsType === 3">
						<view class="tpbx">
							<image src="/pagesHome/static/kuweiicon.png"></image>
							<view>物料编码：{{item.materialCode}}</view>
						</view>
						<view class="tpbx">
							<image src="/pagesHome/static/kuweiicon.png"></image>
							<view>物料名称：{{item.materialName}}</view>
						</view>
						<!-- <view class="tpbx">
							<image src="/pagesHome/static/kuweiicon.png"></image>
							<view>仓库地址：{{dtilobj.warehouseName}}</view>
						</view>
						<view class="tpbx">
							<image src="/pagesHome/static/kuweiicon.png"></image>
							<view>库位信息：{{dtilobj.areaTitle + '-' + dtilobj.allocationTitle}}</view>
						</view> -->
						<view class="tpbx">
							<image src="/pagesHome/static/kuweiicon.png"></image>
							<view>订单号：{{item.orderCode}}</view>
						</view>
						<view class="tpbx">
							<image src="/pagesHome/static/kuweiicon.png"></image>
							<view>商场名称：{{item.marketName}}</view>
						</view>
						<view class="tpbx">
							<image src="/pagesHome/static/kuweiicon.png"></image>
							<view>批次号：{{item.incomingBatch}}</view>
						</view>
					</view>

					<view class="tpbx">
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>总包数：{{item.totalNum}}</view>
					</view>

					<image v-if="Number(details.upshelfScanType)!=3" class="qtimgzt"
						:src="item.totalNum==item.shelfNum?'/pagesHome/static/qitao.png':'/pagesHome/static/weiqitao.png'">
					</image>
				</view>
				<view class="item1" v-if="checkstate==3&&reqobj.trayCode">
					<view>
						<image src="/pagesHome/static/kuweiicon.png"></image>
						<view>托盘码：{{reqobj.trayCode}}</view>
					</view>
					<view>
						<image src="/pagesHome/static/scanicon.png"></image>
						<view>扫码包数：{{reqobj.trayNum}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>

	<view class="butbox">
		<view @click="setshowstate(2)">
			{{upshelfScanType=='1'?'添加运单':upshelfScanType=='2'?'添加订单':upshelfScanType=='3'?'添加物料':'添加物料'}}
		</view>
		<view @click="uplist">上架</view>
	</view>
	<view class="tanchuangbg" v-if="showstate">
		<view class="inputbox" @click.stop.prevent v-if="showstate==2">
			<view class="makinp" @click="checkmake" v-if="details.upshelfScanType=='3'||details.upshelfScanType=='4'">
				{{Marketlist[checkmakindex]?.marketName||'没有商场'}}
			</view>
			<view class="inputscan">
				<input
					:placeholder="'输入'+(details.upshelfScanType=='1'?'运单号':details.upshelfScanType=='2'?'订单自编号':details.upshelfScanType=='3'?'物料编号':'物料名称')"
					v-model="waybillCode" />
				<view class="scanbt" @click="scanlist">搜索</view>
			</view>
			<scroll-view scroll-y="true" class="scvbw">
				<view class="scboxitem">
					<view class="items" @click="setchecl(index)" v-for="(item,index) in codelist">
						<view class="type1s">
							<view>
								<view class="title">物料编码：</view>
								<view>{{item.materialCode||'暂无数据'}}</view>
							</view>
						</view>
						<view class="type1s">
							<view>
								<view class="title">物料名称：</view>
								<view>{{item.materialName||'暂无数据'}}</view>
							</view>
						</view>
						<view class="type1s">
							<view>
								<view>订单号：</view>
								<view>{{item.orderCode}}</view>
							</view>
						</view>
						<view class="type1s">
							<view>
								<view class="title">剩余件数：</view>
								<view>{{item.residueNumber||0}}件</view>
							</view>
							<view>
								<view class="title">总件数：</view>
								<view>{{item.totalNumber||0}}件</view>
							</view>
						</view>
						<view class="type1s">
							<view>
								<view class="title">运单号：</view>
								<view>{{item.waybillCode||'暂无数据'}}</view>
							</view>
						</view>


						<view class="rksu" @click.stop.prevent>
							<view>
								<view class="title">入库数：</view>
								<input placeholder="请输入入库数" v-model="item.enterNum" />
							</view>
						</view>
						<view class="lisbite" v-if="checkinarr.indexOf(index)!=-1">
							<view class="itembox" v-for="ite in item.list">
								<view>库位：
									<text v-if="ite.areaName">{{ite.areaName}}</text>
									<text v-if="ite.allocationName">{{'-'+ite.allocationName}}</text>
								</view>
								<view>托盘码：{{ite.trayCode}}</view>
								<view>数量：{{ite.num}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="btx">
				<view class="cancel" @click="setshowstate(0)">取消</view>
				<view class="confirm" @click="confirmlist">确认</view>
			</view>
		</view>
	</view>
	<saomiao2></saomiao2>
	<tips ref="tip"></tips>
	<tiplist ref="tiplists"></tiplist>
</template>

<script lang="ts" setup>
	import {
		warehouseTrayTypefindAllMarket,
		warehouseUpdownTypeupShelfScanGoods,
		warehouseUpdownTypeupShelfScanAllocation,
		warehouseUpdownTypeupShelfOrder,
		warehouseUpdownTypeupShelfPackage,
		warehouseUpdownTypeupShelfTray,
		warehouseUpdownTypegetZeroOrderByCode,
		warehouseUpdownTypeupShelfZeroOrder,
		warehouseUpdownTypegetStockByParam,
		warehouseUpdownTypeupShelfStockList,
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import { reactive, ref, toRefs, watchEffect } from "vue";
	const tip = ref(null)
	const tiplists = ref(null)
	let details = reactive({
		checkstate: 1,
		upshelfScanType: '',
		scancode: '',
		allocationId: '',//库位id
		datalist: [],
		reqobj: {} as any,
		uplistarr: [],
		showstate: 0,
		waybillCode: '',
		codelist: [],
		Marketlist: [],
		checkmakindex: 0,
		checkinarr: [],
	})
	onLoad((op) => {
		details.upshelfScanType = op.type

		// details.scancode = '1697135045579067394'
		// scandata()
		initmarke()
		// setTimeout(()=>{
		// 	details.scancode='23072506670-2'
		// 	scandata()
		// },4500)
		uni.$on('scancodedate', function (code) {
			if (code) {
				// console.log(code);
				details.scancode = code
				scandata()
			}
		})
	})

	onPullDownRefresh(() => {
		setTimeout(() => {
			// 重置数据
			details.scancode = ''
			details.allocationId = ''
			details.datalist = []
			details.reqobj = {}
			details.uplistarr = []
			details.waybillCode = ''
			details.codelist = []
			details.Marketlist = []
			details.checkmakindex = 0
			details.checkinarr = []

			// 关闭刷新动画
			uni.stopPullDownRefresh()
		}, 1000)
	})

	function stop() {

	}
	watchEffect(() => {
		if (Number(details.upshelfScanType) == 1 || Number(details.upshelfScanType) == 2) {
			details.uplistarr = fn2(details.uplistarr, 'orderCode')
		} else if (Number(details.upshelfScanType) == 3) {
			details.uplistarr = fn2(details.uplistarr, 'orderPackageCode')
		} else if (Number(details.upshelfScanType) == 4) {
			details.uplistarr = fn2(details.uplistarr, 'trayCode')
		}
	})
	function goorderdetail(item) {
		uni.navigateTo({
			url: '/pagesHome/pages/orderDetails/orderDetails?orderCode=' + item.orderCode
		})
	}
	function checkmake() {
		let list = []
		details.Marketlist.map(item => {
			list.push(item?.marketName)
		})
		tiplists.value.setdetails({
			title: '请选择商场',
			isshow: true,
			tipstate: 2,
			list,
			checklist: [],
			inputtext: '',
			confirmTxt: '确认选择',
			isonecheck: true,
			success: (deta) => {
				if (deta.checklist.length == 0) {
					uni.showToast({
						title: '请选择商场',
						icon: 'none'
					})
					return
				}
				details.checkmakindex = deta.checklist[0]
				tiplists.value.setdetails({ isshow: false })
				details.codelist = []
			},
			cancel: (details) => {
				tiplists.value.setdetails({ isshow: false })
			},
			close: (details) => {
				tiplists.value.setdetails({ isshow: false })
			}
		})
	}
	async function initmarke() {
		let data = {
			warehouseCode: 'LQ'
		}
		let res = await warehouseTrayTypefindAllMarket(data)
		console.log(res.data);
		details.Marketlist = res.data
	}
	async function scanlist() {
		details.codelist = []
		let response = null
		if (Number(details.upshelfScanType) == 1 || Number(details.upshelfScanType) == 2) {
			let data = {
				zeroType: Number(details.upshelfScanType) == 1 ? 2 : 1,
				code: details.waybillCode
			}
			response = await warehouseUpdownTypegetZeroOrderByCode(data)
		} else if (Number(details.upshelfScanType) == 3 || Number(details.upshelfScanType) == 4) {
			let data = {
				stockType: Number(details.upshelfScanType) == 3 ? 1 : 2,
				value: details.waybillCode,
				marketId: details.Marketlist[details.checkmakindex].marketId
			}
			response = await warehouseUpdownTypegetStockByParam(data)
		}

		console.log(response);
		details.codelist = response.data
		details.codelist.map(item => {
			item['enterNum'] = 0
			return item
		})

	}
	function confirmlist() {
		details.codelist.map(item => {
			if (item.enterNum > 0 && item.enterNum <= item.residueNumber) {
				item.marketId = details.Marketlist[details.checkmakindex].marketId
				details.uplistarr.push(item)
				// details.uplistarr.map((it,index)=>{
				// 	if(item.orderCode==it.orderCode){
				// 		details.uplistarr.splice(index,1,item)
				// 	}else if(item.materialCode==it.materialCode){
				// 		details.uplistarr.splice(index,1,item)
				// 	}
				// })
			}
		})
		details.uplistarr = fn2(details.uplistarr, 'orderCode')
		details.showstate = 0
		details.codelist = []
		details.waybillCode = ''
	}
	function setshowstate(state : number) {
		details.showstate = state
	}
	async function scandata() {
		//是否有库位id，有库位ID就扫描包条码否则只能扫描库位码
		// if (Number(details.upshelfScanType) == 1 || Number(details.upshelfScanType) == 2) {

		// }
		let data = {
			allocationId: details.scancode,
		}
		let res = await warehouseUpdownTypeupShelfScanAllocation(data)
		console.log(res);
		if (res.code == 200) {
			details.reqobj = res.data
			details.allocationId = res.data.allocationId
			details.datalist = (res.data?.list) || []
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}

	}
	function uplist() {
		tip.value.setdetails({
			title: '提示',
			content: '确认上架？',
			confirmTxt: '确认',
			isshow: true,
			isshowcancel: true,
			success: async () => {
				if (details.uplistarr.length == 0) {
					let content = ''
					if (Number(details.upshelfScanType) == 4) {
						content = '请先扫描托盘码'
					} else {
						content = '请先扫描包件数据'
					}
					tip.value.setdetails({
						title: '警告',
						content,
						confirmTxt: '确认',
						isshow: true,
						isshowcancel: true,
						success: () => {
							tip.value.setisshow(false)
						},
						cancel: () => {
							tip.value.setisshow(false)
						},
						close: () => {
							tip.value.setisshow(false)
						}
					})
					return
				}
				uni.showLoading({
					mask: true,
					title: '上架中'
				})
				let res
				details.uplistarr.map(item => {
					if (item.enterNum > item.totalNumber) {
						item.enterNum = item.totalNumber
					}
				})
				if (Number(details.upshelfScanType) == 1 || Number(details.upshelfScanType) == 2) {
					let data = {
						allocationId: details.allocationId,
						upShelfZeroOrderList: details.uplistarr,
					}
					res = await warehouseUpdownTypeupShelfZeroOrder(data)
				} else if (Number(details.upshelfScanType) == 3 || Number(details.upshelfScanType) == 4) {
					let data = {
						allocationId: details.allocationId,
						upShelfStockList: details.uplistarr,
					}
					res = await warehouseUpdownTypeupShelfStockList(data)
				}
				// 关闭loading
				uni.hideLoading()

				if (res.code == 200) {
					uni.showToast({
						title: '上架成功',
						icon: 'none'
					})
					details.uplistarr = []
					details.scancode = details.allocationId
					details.allocationId = ''
					scandata()
				} else {
					uni.showToast({
						title: '上架失败',
						icon: 'error'
					})
				}
				tip.value.setisshow(false)
			},
			cancel: () => {
				tip.value.setisshow(false)
			},
			close: () => {
				tip.value.setisshow(false)
			}
		})
	}
	function setchecl(index : number) {
		if (details.checkinarr.indexOf(index) == -1) {
			details.checkinarr.push(index)
		} else {
			details.checkinarr.splice(details.checkinarr.indexOf(index), 1)
		}
	}
	function setstate(state : number) {
		details.checkstate = state
	}
	//去重
	function fn2(tempArr, fnname) {
		let result = [];
		tempArr.map((item) => {
			if (result.length == 0) {
				item.enterNum = Number(item.enterNum)
				result.push(item)
			} else {
				let ckindex = -1
				result.map((ite, index) => {
					if (ite[fnname] == item[fnname]) {
						ckindex = index
					}
				})
				if (ckindex != -1) {
					result[ckindex].enterNum += Number(item.enterNum)
				} else {
					item.enterNum = Number(item.enterNum)
					result.push(item)
				}
			}
		})
		return result;
	};

	const {
		checkinarr,
		checkmakindex,
		Marketlist,
		codelist,
		waybillCode,
		showstate,
		uplistarr,
		checkstate,
		upshelfScanType,
		allocationId,
		datalist,
		reqobj
	} = toRefs(details)
</script>

<style lang="scss">
	.tanchuangbg {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 99;
		left: 0;
		top: 0;
		background-color: #00000050;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 1s;

		.makinp {
			width: 590upx;
			border: 1upx solid #00000020;
			color: #020B18;
			box-sizing: border-box;
			margin-bottom: 10upx;
			box-sizing: border-box;
			font-size: 28upx;
			padding: 10upx 20upx;
		}

		.inputbox {
			width: 670upx;
			// height: 600upx;
			background-color: #ffffff;
			box-sizing: border-box;
			border-radius: 10upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 30upx;

			.inputscan {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;

				>input {
					width: 440upx;
					height: 64upx;
					border: 1upx solid #092C4D30;
					border-radius: 8upx;
					box-sizing: border-box;
					font-size: 28upx;
					padding: 0upx 20upx;
					box-sizing: border-box;
				}

				.scanbt {
					width: 128upx;
					height: 64upx;
					background: #D3832A;
					border-radius: 8upx;
					opacity: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30upx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.scvbw {
				width: 100%;
				height: 450upx;
				margin-top: 30upx;

				.scboxitem {
					display: flex;
					flex-direction: column;
					align-items: center;

					.items {
						width: 590upx;
						display: flex;
						flex-direction: column;
						box-shadow: 0upx 2upx 10upx 0upx #e2e2e3;
						margin-top: 10upx;
						padding: 20upx;
						box-sizing: border-box;

						>.lisbite {
							width: 100%;
							// display: flex;
							// align-items: center;
							// justify-content: center;

							// position: absolute;
							>.itembox {
								width: 100%;
								margin-bottom: 20upx;
								display: flex;
								flex-direction: column;
								align-items: flex-start;
								justify-content: space-between;
								font-size: 28upx;
								color: #020B18;
								border: 1upx solid #D3832A;
								padding: 10upx 20upx;
								box-sizing: border-box;
								border-radius: 20upx;
								color: #D3832A;

								&:last-child {
									margin-bottom: 0;
								}

								>view {
									word-wrap: break-word;
									word-break: break-all;
								}
							}
						}

						>.type1s {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 20upx;

							.title {
								white-space: nowrap;
							}

							>view {
								flex: 1;
								display: flex;
								align-items: center;
								justify-content: flex-start;
								font-size: 28upx;

								>view:nth-of-type(1) {
									color: #90A0AF;
								}

								>view:nth-of-type(2) {
									color: #092C4D;
								}
							}
						}

						.rksu {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 20upx;

							>view {
								// width: 50%;
								display: flex;
								align-items: center;
								justify-content: flex-start;
								font-size: 28upx;

								>view:nth-of-type(1) {
									color: #90A0AF;
								}

								>input {
									width: 200upx;
									padding: 0 15upx;
									border: 1upx solid #00000020;
								}
							}
						}
					}
				}
			}

			.btx {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 50upx;

				>view {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 260upx;
					height: 76upx;
					border-radius: 7upx;
					font-size: 28upx;
				}

				>.cancel {
					background-color: #F5F5F6;
					color: #5A6875;
					margin-right: 20upx;
				}

				>.confirm {
					background-color: #D3832A;
					color: #FFFFFF;
				}
			}
		}
	}

	.butbox {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 15upx;

		>view {
			width: 320upx;
			height: 96upx;
			background: #D3832A;
			border-radius: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			font-size: 32upx;
			font-weight: 400;
			color: #FFFFFF;

			&:nth-last-child(1) {
				margin-left: 30upx;
			}
		}
	}

	.sclcs {
		width: 686upx;
		height: 27vh;
		margin: auto;

		.visc {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.item1 {
				width: 686upx;
				padding: 0 24upx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				border-radius: 30upx;
				position: relative;
				margin-bottom: 30upx;

				&:nth-last-child(1) {
					margin-bottom: 0;
				}

				.removeicons {
					position: absolute;
					right: 0;
				}

				.qtimgzt {
					width: 96upx;
					height: 96upx;
					position: absolute;
					right: 0;
					top: 0;
				}

				// >view:nth-last-child(1){
				// 	border-bottom: none !important;
				// }
				>view {
					width: 100%;
					display: flex;
					align-items: center;
					padding: 18upx 24upx;
					box-sizing: border-box;
					border-bottom: 4upx solid #EEEEEE;

					&:nth-last-child(1) {
						border-bottom: 0upx solid #EEEEEE00 !important;
					}

					>image {
						width: 64upx;
						height: 64upx;
						margin-right: 15upx;
					}

					>view {
						font-size: 28upx;
						font-weight: 400;
						color: #020B18;
						word-wrap: break-word;
						word-break: break-all;

						.numb {
							font-size: 28upx;
							color: #178AF2;
						}
					}
				}
			}

			.item2 {
				width: 686upx;
				padding: 0 24upx;
				box-sizing: border-box;
				background-color: #FFFFFF;
				border-radius: 30upx;
				position: relative;
				margin-bottom: 30upx;

				.qtimgzt {
					width: 96upx;
					height: 96upx;
					position: absolute;
					right: 0;
					top: 0;
				}

				>.tpbx {
					display: flex;
					align-items: center;
					padding: 18upx 24upx;
					box-sizing: border-box;
					border-bottom: 4upx solid #EEEEEE;

					>image {
						width: 64upx;
						height: 64upx;
						margin-right: 15upx;
					}

					>view {
						font-size: 28upx;
						font-weight: 400;
						color: #020B18;

						.numb {
							font-size: 28upx;
							color: #178AF2;
						}
					}
				}

				>.viewnum {
					height: 100upx;
					display: flex;
					align-items: center;
					justify-content: space-around;

					>view {
						font-size: 28upx;
						font-weight: 400;
						color: #020B18;
					}
				}
			}
		}
	}

	.tabchecklist {
		width: 684upx;
		height: 100upx;
		margin: auto;
		margin-top: 30upx;
		margin-bottom: 20upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.xz {
			>view:nth-of-type(1) {
				color: #D3832A !important;
			}

			>view:nth-of-type(2) {
				background-color: #D3832A !important;
			}
		}

		>view {
			display: flex;
			flex-direction: column;
			align-items: center;

			>view:nth-of-type(1) {
				font-size: 32upx;
				font-weight: 400;
				margin-bottom: 20upx;
				color: #020B18;
				transition: all 0.2s;
			}

			>view:nth-of-type(2) {
				width: 96upx;
				height: 8upx;
				background-color: #D3832A00;
				border-radius: 4upx;
				transition: all 0.2s;
			}
		}
	}

	.topviewbox {
		width: 686upx;
		// height: 456upx;
		background: #FFFFFF;
		border-radius: 20upx 20upx 20upx 20upx;
		opacity: 1;
		box-sizing: border-box;
		position: relative;
		margin: auto;
		margin-top: 20upx;

		>.oebox {
			padding: 20upx 25upx;
			box-sizing: border-box;
			border-bottom: 4upx solid #EEEEEE;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			>view {
				font-size: 32upx;
				font-weight: 400;
				color: #020B18;
			}

			>image {
				width: 64upx;
				height: 64upx;
				margin-right: 14upx;
			}
		}

		.numbox {
			width: 100%;
			padding: 20upx;
			box-sizing: border-box;

			>view {
				width: 640upx;
				height: 160upx;
				background: #F5F7FB;
				border-radius: 8upx 8upx 8upx 8upx;
				opacity: 1;
				display: flex;
				align-items: center;
				justify-content: space-around;

				>view {
					display: flex;
					flex-direction: column;
					align-items: center;

					&:nth-of-type(1) {
						>view:nth-of-type(2) {
							color: #FF9545 !important;
						}
					}

					&:nth-of-type(2) {
						>view:nth-of-type(2) {
							color: #178AF2 !important;
						}
					}

					>view:nth-of-type(1) {
						font-size: 28upx;
						font-weight: 400;
						color: #020B18;
						margin-bottom: 18upx;
					}

					>view:nth-of-type(2) {
						font-size: 36upx;
						font-weight: 400;

					}
				}
			}
		}

		>.contview {
			display: flex;
			flex-direction: column;
			width: 100%;
			padding: 20upx;
			box-sizing: border-box;

			>view {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 20upx;

				&:nth-last-child(1) {
					margin-bottom: 0;
				}

				>view:nth-of-type(1) {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 30upx;

					>image {
						width: 48upx;
						height: 48upx;
						margin-right: 12upx;
					}

					>view {
						font-size: 28upx;
						font-weight: 400;
						color: #020B18;
					}
				}

				>view:nth-of-type(2) {
					font-size: 28upx;
					font-weight: 400;
					color: #020B18;
				}
			}
		}
	}

	.bgimg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;

	}

	.scanqcview {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin-top: 10upx;

		>image {
			width: 72upx;
			height: 72upx;
			margin-right: 16upx;
		}

		>view {
			font-size: 32upx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>