<template>
	<view>
		<!-- 采购 -->
		<view class="box">
			<view class="leftr" v-if="lie">
				<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scrolltop" class="scroll-Y"
					@scrolltolower="scrolltolower" :lower-threshold="400" @scroll="scrollview">
					<view class="boxibigtem" v-for="(v,i) in InvoicingList" :key='i'
						:class="{'yujing':Number(v.lowerLimit)>=Number(v.kcsl),'active':shopitem==i}"
						@click="shopclick(i,2)">
						<view>{{v.wlName}}</view>
						<view>规格型号: {{v.wlSpecificationModel}}</view>
						<view>采购单位： {{v.wlUnits}}</view>
						<view>
							<view class="carditem" :class="{'hl':v.tagType==1,'yl':v.tagType==2,'bj':v.tagType>2}">
								<image src="/static/index/warehouse/procurement/hl.png" mode="aspectFill"
									v-if="v.tagType==1"></image>
								<image src="/static/index/warehouse/procurement/yl.png" mode="aspectFill"
									v-if="v.tagType==2"></image>
								<image src="/static/index/warehouse/procurement/bj.png" mode="aspectFill"
									v-if="v.tagType>2"></image>
								{{v.tagName}}
							</view>
							<view class="znk">
								<image
									:src="v.materialImg?serverUrl + v.materialImg : '/static/index/warehouse/procurement/k.png'"
									mode="aspectFill"></image>
							</view>
							<view class="num">
								<view>{{v.kcsl}}</view>
								<view>库存数量</view>
							</view>
						</view>
					</view>
					<view style="height: 23vw;width: 100%;padding:10vw 40vw ;">
						<u-loadmore :status="status" />
					</view>
				</scroll-view>
				<shadowview :opacity="opacity"></shadowview>
				<view class="mblbg"> </view>
				<view class="fxj">
					<arrowkeys @movecard="movecard($event,1)" :getblue="getblue" :moveleft="45" />
					<text>长春市朝阳区久泰开运养老服务有限公司</text>
				</view>
			</view>

			<view class="lefts" v-if="!lie">
				<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scrolltop" class="scroll-Y"
					@scrolltolower="scrolltolower" :lower-threshold="200" @scroll="scrollview">
					<view class="boxitem" v-for="(v,i) in InvoicingList" :key='i'
						:class="{'yujing':Number(v.lowerLimit)>=Number(v.kcsl),'active':shopitem==i}"
						@click="shopclick(i)">
						<view>{{v.wlName}}</view>
						<view>规格型号: {{v.wlSpecificationModel}}</view>
						<view>采购单位： {{v.wlUnits}}</view>
						<view>库存数量： {{v.kcsl}}</view>
						<view>
							<view class="carditem" :class="{'hl':v.tagType==1,'yl':v.tagType==2,'bj':v.tagType>2}">
								<image src="/static/index/warehouse/procurement/hl.png" mode="aspectFill"
									v-if="v.tagType==1"></image>
								<image src="/static/index/warehouse/procurement/yl.png" mode="aspectFill"
									v-if="v.tagType==2"></image>
								<image src="/static/index/warehouse/procurement/bj.png" mode="aspectFill"
									v-if="v.tagType>2"></image>
								{{v.tagName}}
							</view>
							<view class="znk">
								<image
									:src="v.materialImg?serverUrl + v.materialImg : '/static/index/warehouse/procurement/k.png'"
									mode="aspectFill"></image>
							</view>
						</view>
						<view class="dbgys">
							<view>
								<view>采购数量：<text>{{v.purchaseQuantity}}</text></view>
								<view>供应商：{{v.suppliersName}}</view>
							</view>
							<view :class="v.flag?'act':''" @click.stop="xuanzhong(v)">
								<image src="/static/index/warehouse/procurement/d.png" mode="aspectFill" v-if="v.flag"></image>
								<image src="/static/index/warehouse/procurement/da.png" mode="aspectFill" v-else></image>
							</view>
						</view>
					</view>
					<view style="height: 23vw;width: 100%;padding:10vw 40vw ;">
						<u-loadmore :status="status" dashed line  nomore-text="已加载全部" />
					</view>
				</scroll-view>
				<shadowview :opacity="opacity"></shadowview>
				<view class="mblbg"> </view>
				<view class="fxj">
					<arrowkeys @movecard="movecard" :getblue="getblue" :moveleft="45" />
					<text>长春市朝阳区久泰开运养老服务有限公司</text>
				</view>
			</view>
			<view class="rights">
				<view class="shitem">
					<view class="shypk">
						<view>生活用品库</view>
						<view>

							<view class="swsh guodu" :class="shyp?'act':''" @click="switchshyp">
								<view class="guodu"></view>
							</view>
							<text>
								{{!shyp?'停用':'启用'}}
							</text>
						</view>
					</view>
					<view class="jqry">
						<view class="left tp">
							<image
								:src="cellobj?.fzrHeadPath?serverUrl + cellobj?.fzrHeadPath:'/static/index/warehouse/procurement/jqr.png'"
								mode="aspectFill"></image>
						</view>
						<view class="rigname">
							<view>{{cellobj?.fzr}}</view>
							<view>
								<!-- <text>男</text>
								<text>50岁</text> -->
								<text>{{cellobj?.fzrTel?cellobj?.fzrTel:'-'}}</text>
							</view>
						</view>
						<view style="display: flex;flex-direction: column;align-items: center;margin-left: 3.8vw;">
							<view class="swsh guodu"  :class="lie?'act':''" @click="lie=!lie">
								<view class="guodu"></view>
							</view>
							<text style=" white-space: nowrap;
									font-weight: 400;
									font-size: 1vw;
									color: #666666;">{{lie?'三列':'两列'}}</text>
						</view>
						
					</view>

				</view>
				<view class="typeitem">
					<view class="toptype">
						<view v-for="v in ['三','二','一']">{{v+'级分类'}}</view>
					</view>
					<view class="scroltype">
						<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop3"
							class="scroll-Y">
							<view :class="scroll.act3==i?'act':''"
								v-for="(v,i) in TreeData[scroll.act1]?.children[scroll.act2]?.children"
								@click="typescroll(3,i,v)">
								{{v.title}}
							</view>
						</scroll-view>

						<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop2"
							class="scroll-Y">
							<view :class="scroll.act2==i?'act':''" v-for="(v,i) in TreeData[scroll.act1]?.children"
								@click="typescroll(2,i,v)">
								{{v.title}}
							</view>
						</scroll-view>

						<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop1"
							class="scroll-Y scrl1">
							<view :class="scroll.act1==i?'act':''" v-for="(v,i) in TreeData" @click="typescroll(1,i,v)">
								<image :src="serverUrl + v.appCheckIconPath" mode="aspectFill" v-if="scroll.act1==i">
								</image>
								<image :src="serverUrl + v.appIconPath" mode="aspectFill" v-else></image>
								<text>
									{{v.title}}
								</text>
							</view>
						</scroll-view>
					</view>

					<view class="anmikc">
						<view v-for="(v,i) in animArray" :key="i" @click="admiclick(i)">
							<view>
								<donghua width="2vw" height="2vw" :links="v.url" :playing="i === anmidex"
									 class="donghua" />
							</view>

							<text>
								{{v.name}}
							</text>
						</view>
					</view>
					<view class="serchs">
						<view class="ipt">
							<input type="text" placeholder="物料名称/物料编码/物料简拼" v-model="form.wlParamInfo" />
							<image src="/static/index/warehouse/procurement/x.png" mode="aspectFill"
								v-if="form.wlParamInfo" @click="search(0)"></image>
						</view>
						<view @click="search" class="scr">
							检索
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mengban" v-if="wlxq" @click="qingkong"></view>
		<view class="wuliao guodu" :class="wlxq?'':'uncrkcard'">
			<view class="name">{{wuliaoobj.materialName}}</view>
			<view class="znk tp">
				<image class="crkcard-img"
					:src="wuliaoobj.materialImg?serverUrl + wuliaoobj.materialImg : '/static/index/warehouse/procurement/k.png'"
					mode="aspectFill"></image>
			</view>
			<view class="life">
				<view v-if="wuliaoobj.categoryName">{{wuliaoobj.categoryName}}</view>
				<view v-if="wuliaoobj.typeName">{{wuliaoobj.typeName}}</view>
				<view v-if="wuliaoobj.medicationName">{{wuliaoobj.medicationName}}</view>
			</view>
			<view class="zil">
				物料编码: {{ wuliaoobj.materialNo }}
			</view>
			<view class="zil">
				规格型号:  {{ wuliaoobj.specificationModel }}
			</view>
			<view class="zil">
				物料小类: {{wuliaoobj.tagName}}
			</view>
			<view class="zil">
				物料单位: {{wuliaoobj.materialUnits}}
			</view>
			<view class="zil">
				医保报销: {{ wuliaoobj.izYbbxName }}
			</view>
			<view class="zil">
				机构优惠: {{ wuliaoobj.izJgyhName }}
			</view>
			<view class="dibu">
				<view>
					<text>{{ wuliaoobj.kcsl }}</text>
					<text>库存数量</text>
				</view>
				<view>
					<text>{{ wuliaoobj.upperLimit }}</text>
					<text>物料上限 <text class="l"> ↑</text></text>
				</view>
				<view style="align-items: end;">
					<text>{{ wuliaoobj.lowerLimit }}</text>
					<text><text class="f">↓ </text>物料下限 </text>
				</view>
			</view>
		</view>
		
		<view class="mengban" v-if="cgd" @click="qingkong"></view>
		<view class="caigoudan guodu" :class="cgd?'':'uncgd'">
			<view class="title">采购单</view>
			<scroll-view scroll-y="true" class="cgdscroll">
				<view class="cardcd" v-for="(v,i) in generatedOrder" :key='i'>
					<view class="gys">供应商:{{v.gysName}}</view>
					<view class="cgdh">
						<view>采购单号:{{v.cgdNo}}</view>
						<view>采购人:{{v.qgBy}} </view>
						<view>采购金额：<text>{{v.totalPrice}}</text></view>
					</view>
					
					<view class="boxitem" v-for="(f,l) in v.cgdInfoList" :key='i'  >
						<view>{{f.wlName}}</view>
						<view style="white-space: nowrap;">规格型号：{{f.wlSpecificationModel}}</view>
						<view>采购单位：{{f.wlUnits}}</view>
						<view>库存数量：{{f.kcsl}}</view>
						<view>
							<view class="carditem" :class="{'hl':f.tagType==1,'yl':f.tagType==2,'bj':f.tagType>2}">
								<image src="/static/index/warehouse/procurement/hl.png" mode="aspectFill"
									v-if="f.tagType==1"></image>
								<image src="/static/index/warehouse/procurement/yl.png" mode="aspectFill"
									v-if="f.tagType==2"></image>
								<image src="/static/index/warehouse/procurement/bj.png" mode="aspectFill"
									v-if="f.tagType>2"></image>
								{{f.tagName}}
							</view>
							<view class="znk">
								<image
									:src="f.materialImg?serverUrl + f.materialImg : '/static/index/warehouse/procurement/k.png'"
									mode="aspectFill"></image>
							</view>
						</view>
						<view class="dbgys">
							<view style="width: 100%;">
								<view style="width: 100%;justify-content: space-between;">
									<view style="width: 50%;">采购数量：<text>{{f.purchaseQuantity}}</text></view>
									<view style="width: 50%;justify-content: flex-end;">采购金额：<text>{{f.procurementPrice}}</text></view>
								</view>
								<view style="width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;height: 1.2vw;display: block;">供应商：{{f.suppliersName}}</view>
							</view>
						</view>
					</view>
					
				</view>
			</scroll-view>
			<view class="tj">
				<text @click="connfig">确定</text>
			</view>
		</view>
		<view class="mengban" v-if="tost" @click="qingkong"></view>
		<view class="toast guodu"  v-if="tost" >
			<view class="tit">提示</view>
			<view class="xunw" v-if="anmidex==4">
				是否删除？
			</view>
			<view class="xunw" v-if="anmidex==5">
				是否清空所有物料？
			</view>
			<view class="cont" v-if="anmidex==4">
				<view v-for="(v,i) in delstr" :key='i' >{{i+1}}、{{v}} <br></view>
			</view>
			<view class="cfg">
				<view @click="qingkong">取消</view>
				<view @click="del(4)" v-if="anmidex==4">确认</view>
				<view @click="del(5)" v-if="anmidex==5">确认</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineProps } from 'vue';
	import { queryShoppingCartList, getMaterialTreeData, queryNuInfoByNuId, updateKfstatus,deleteQgInfoById,emptiedQgInfo ,queryWlInfoByWlId,generatedPurchaseOrder,generatedPurchaseViewOrder } from './api/lunpan.js'
	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
	import shadowview from './components/ShadowView.vue';
	import calculator from './components/calculator.vue';
	const navurl = ref('');
	const InvoicingList = ref([]);
	const TreeData = ref([]);
	const cellobj = ref({});
	
	const wuliaoobj = ref({});
	const serverUrl = ref('');
	const scrolltop = ref(0)
	const shopitem = ref(0)
	const getblue = ref(false);
	const shyp = ref(false);
	const opacity = ref(false); 
	
	const wlxq = ref(false);
	const cgd = ref(false);
	const tost = ref(false);
	const lie = ref(false)

	const scrollnum = ref(0);


	const scroll = reactive({ scrolltop1: 0, scrolltop2: 0, scrolltop3: 0, act1: -1, act2: -1, act3: -1 });
	const form = reactive({
		nuId: '',
		pageNo: 1,
		pageSize: 10,
		categoryId: '',
		typeId: '',
		medicationId: '',
		wlParamInfo: ''
	})
	const switchshyp = () => {
		let obj = {
			id: cellobj.value.id,
			status: shyp.value ? '5' : '2'
		}
		updateKfstatus(obj).then(res => {
			console.log(res)
			if (res.success) {
				shyp.value = shyp.value ? false : true;
				cell();
			} else {
				uni.showToast({
					icon: 'error',
					title: res.message
				})
			}
		})
	}
	const timerflag = ref(true);
	const connfig = () =>{
		if(timerflag.value==false){return}
		timerflag.value = false;
		generatedPurchaseOrder(generatedOrder.value).then(res=>{
			uni.showToast({
				icon:res.success?'success':'error',
				title:res.message
			})
			setTimeout(()=>{
				if(res.success){
					InvoicingList.value = [];
					form.pageNo = 1;
					qingkong()
					queryInvo()
					timerflag.value = true;
				}
			},700)
			
		})
	}
	const shopclick = (i : number, k : number,flag:boolean) => {
		if(i==shopitem.value&&!flag){
			InvoicingList.value[shopitem.value].flag = !InvoicingList.value[shopitem.value].flag;
		}
		if (k == 2) {
			let num = Math.ceil((i + 1) / 2)
			scrolltop.value = (num - 2) * 270;
			shopitem.value = i;
		} else {
			let num = Math.ceil((i + 1) / 3)
			scrolltop.value = (num - 2) * 240;
			shopitem.value = i;
		}

	}
	const xuanzhong = (o:any)=>{
		o.flag = !o.flag
	}

	const typescroll = (e : number, i : number, v : object) => {
		if (e == 1) {
			scroll.act2 = -1;
			scroll.act3 = -1;
			scroll.scrolltop2 = 0;
			scroll.scrolltop3 = 0;
			form.categoryId = v?.categoryId;
			form.typeId = '';
			form.medicationId = '';
			if (scroll.act1 == i) {
				scroll.act1 = -1;
				form.categoryId = '';
				form.pageNo = 1;
				InvoicingList.value = [];
				queryInvo();
				return
			}
		}
		if (e == 2) {
			scroll.act3 = -1;
			scroll.scrolltop3 = 0;
			form.categoryId = v?.categoryId;
			form.typeId = v?.typeId;
			form.medicationId = '';
		}
		if (e == 3) {
			form.categoryId = v?.categoryId;
			form.typeId = v?.typeId;
			form.medicationId = v?.key;
		}
		scroll['act' + e] = i;
		scroll['scrolltop' + e] = (i - 2) * 50;
		form.pageNo = 1;
		InvoicingList.value = [];
		shopitem.value = 0;
		queryInvo();
	}
	const search = (x : number) => {
		if (x === 0) { form.wlParamInfo = '' }
		form.pageNo = 1;
		InvoicingList.value = [];
		queryInvo();
	}
	onLoad(() => {
		form.nuId = uni.getStorageSync('nuId');
		serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
		getMaterial();
		queryInvo();
		cell();
	})

	const qingkong = () => {
		anmidex.value = -1;
		wlxq.value = false;
		cgd.value = false;
		tost.value = false;
	}
	const cell = () => {
		queryNuInfoByNuId(form).then(res => {
			cellobj.value = res.result;
			shyp.value = res.result.status == 5 ? false : true
		})
	}
	const getMaterial = () => {
		getMaterialTreeData().then(res => {
			TreeData.value = res.result
		})
	}
	const setout = ref(true)
	let times = null;
	const status = ref('loadmore')
	onPageScroll((e) => {
		console.log(e)
	})
	const scrolltolower = () => {
		if (!setout) { return }
		status.value = 'loading'
		setout.value = false;
		form.pageNo++;
		queryInvo()
		times = setTimeout(() => {
			setout.value = true
		}, 1000)
	}
	const scrollview = (e : number) => {
		if (e.detail.scrollTop > scrollnum.value) {
			opacity.value = true;
			setTimeout(() => {
				opacity.value = false;
			}, 900)
		} else {
			opacity.value = false;
		}
		scrollnum.value = e.detail.scrollTop;
	}
	const queryInvo = () => {
		queryShoppingCartList(form).then(res => { 
			res.result.records.forEach((item,i)=>{
				item.flag = false
				if(i==0&&form.pageNo == 1){
					item.flag = true
				}
			})
			InvoicingList.value.push(...res.result.records);
			status.value = res.result.total == InvoicingList.value.length ? 'nomore' : 'loadmore'
		})
	}
	const movecard = (type : number, l : number) => {
		if (l == 1) {
			switch (type) {
				case 0:
					// 上
					shopitem.value = shopitem.value < 1 ? shopitem.value = 0 : shopitem.value - 2
					break;
				case 1:
					// →
					shopitem.value = shopitem.value >= InvoicingList.value.length - 1 ? InvoicingList.value.length - 1 : shopitem.value + 1
					break;
				case 2:
					// 下
					shopitem.value = shopitem.value >= InvoicingList.value.length - 2 ? shopitem.value = 0 : shopitem.value + 2
					break;
				case 3:
					shopitem.value = shopitem.value == 0 ? shopitem.value = InvoicingList.value.length - 1 : shopitem.value - 1
					// ←
					break;
				case 4:
					// 扫描
					InvoicingList.value[shopitem.value].flag = !InvoicingList.value[shopitem.value].flag;
					break;
				case 5:
					// 返回
					uni.navigateBack({
						delta: 1
					})
					break;

				default:
					break;
			}
			shopclick(shopitem.value, 2,true)
		} else {
			switch (type) {
				case 0:
					// 上
					shopitem.value = shopitem.value < 3 ? shopitem.value = 0 : shopitem.value - 3
					break;
				case 1:
					// →
					shopitem.value = shopitem.value >= InvoicingList.value.length-1 ? shopitem.value = 0 : shopitem.value + 1
					break;
				case 2:
					// 下
					shopitem.value = shopitem.value >= InvoicingList.value.length-3 ? shopitem.value = InvoicingList.value.length-1 : shopitem.value + 3
					break;
				case 3:
					shopitem.value = shopitem.value == 0 ? shopitem.value = InvoicingList.value.length-1 : shopitem.value - 1
					// ←
					break;
				case 4:
					// 扫描
					InvoicingList.value[shopitem.value].flag = !InvoicingList.value[shopitem.value].flag;
					break;
				case 5:
					// 返回
					uni.navigateBack({
						delta: 1
					})
					break;

				default:
					break;
			}
			shopclick(shopitem.value, 0,true)
		}

	}
	// 通用的生成函数
	function genPaths(base, prefix, count, ext = 'png', startIndex = 0, pad = false) {
		return Array.from({ length: count }, (_, i) => {
			const idx = pad
				? String(i + startIndex).padStart(2, '0')
				: i + startIndex
			return `${base}/${prefix}${idx}.${ext}`
		})
	}
	const anmidex = ref(-1)
	const generatedOrder = ref([])
	const delstr = ref([])
	const tmr = ref(true)
	const admiclick = (i : number) => {
		if(tmr.value == false){return}
			tmr.value = false;
			anmidex.value = i;
			switch (i) {
				case 0:
				if(InvoicingList.value.length==0){
					uni.showToast({
						title:'请选择物料~',
						icon:'none'
					})
					anmidex.value = -1;
					tmr.value = true;
					return
				}
					InvoicingList.value[shopitem.value].flag = !InvoicingList.value[shopitem.value].flag;
					setTimeout(()=>{
						anmidex.value = -1;
						tmr.value = true;
					},1000)
					break;
				case 2:
					let arr = [];
					InvoicingList.value.forEach(item=>{
						if(item.flag){
							arr.push(item)
						}
					})
					if(arr.length==0){
						uni.showToast({
							title:'请选择物料~',
							icon:'none'
						})
						tmr.value = true;
						anmidex.value = -1;
						return
					}
					tmr.value = true;
					generatedPurchaseViewOrder(arr).then(res=>{
						generatedOrder.value = res.result; 
					})
					 cgd.value = true;
					break;
				case 3:
				if(InvoicingList.value.length==0){
					uni.showToast({
						title:'请选择物料~',
						icon:'none'
					})
					tmr.value = true;
					anmidex.value = -1;
					return
				}
				tmr.value = true;
					queryWlInfo();
					break;
				case 4: 
				let a = []
					InvoicingList.value.forEach((item,i)=>{
						if(item.flag){
							a.push(item.wlName)
						}
					})
					if(a.length==0){
						uni.showToast({
							title:'请选择物料~',
							icon:'none'
						})
						tmr.value = true;
						anmidex.value = -1;
						return
					}
					tmr.value = true;
					delstr.value =  a ;
					tost.value = true;
					break;
				case 5:
				if(InvoicingList.value.length==0){
					uni.showToast({
						title:'购物车已清空~',
						icon:'none'
					})
					tmr.value = true;
					anmidex.value = -1;
					return
				} 
				tmr.value = true;
				tost.value = true;
					break;
				case 1:
					let arrs = [];
					if(InvoicingList.value.length==0){
						uni.showToast({
							title:'购物车为空~',
							icon:'none'
						})
						tmr.value = true;
						anmidex.value = -1;
						return
					} 
					 InvoicingList.value.forEach((item,i)=>{
					 	if(item.flag){ 
					 		arrs.push(i)
					 	}else{
							item.flag = true;
						}
					 })
					 if(arrs.length==InvoicingList.value.length){
					 	InvoicingList.value.forEach((item,i)=>{
					 		 item.flag = false;
					 	})
					 }
					 setTimeout(()=>{
					 	anmidex.value = -1;
						tmr.value = true;
					 },1000)
					break;

				default:
					break;
			}
	}
	const del = (e:number)=>{
		if(e==4){
			let arr = [];
			let delstr = '';
			InvoicingList.value.forEach((item,i)=>{
				if(item.flag){
					delstr+=item.id+','
					 arr.push(i)
				}
			})
			if(delstr.indexOf(",")>-1) delstr = delstr.substring(0,delstr.length-1)
			deleteQgInfoById(delstr).then(res=>{
				uni.showToast({
					icon:res.success?'success':'none',
					title:res.message
				})
				if(res.success){
					form.pageNo = 1;
					queryShoppingCartList(form).then(res => {
						res.result.records.forEach((item,i)=>{
							item.flag = false
							if(i==0){
								item.flag = true
							}
						})
						InvoicingList.value = [];
						InvoicingList.value.push(...res.result.records);
						status.value = res.result.total == InvoicingList.value.length ? 'nomore' : 'loadmore'
						qingkong()
					})
				}
			})
		}else{
			emptiedQgInfo().then(res=>{
				if(res.success){
					InvoicingList.value = [];
					queryInvo()
					qingkong()
				}
				uni.showToast({
					icon:res.success?'success':'none',
					title:res.message
				})
			})
		}
		
	}
	// 物料详情
	const queryWlInfo = ()=>{
		let obj = {
			wlId:InvoicingList.value[shopitem.value].wlId,
			nuId:form.nuId
		}
			queryWlInfoByWlId(obj).then(res=>{
				wuliaoobj.value = res.result;
				wlxq.value = true
			})
	}
	const animArray = ref([
		{
			url: genPaths(
				'/static/index/warehouse/procurement/select',
				'select',
				8,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			name: '选择/取消',
			imgurl: '/static/index/warehouse/procurement/select/select1.png'
		},
		{
			url: genPaths(
				'/static/index/warehouse/procurement/ctrl',
				'Ctrl',
				9,    // 张数
				'png',
				0,     // 起始索引为 1
				false  // 不补零
			),
			name: '全选',
			imgurl: '/static/index/warehouse/procurement/select/Ctrl0.png'
		},
		{
			url: genPaths(
				'/static/index/warehouse/procurement/procure',
				'procure0',
				7,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			name: '采 购',
			imgurl: '/static/index/warehouse/procurement/procure/procure01.png'
		},
		{
			url: genPaths(
				'/static/index/warehouse/procurement/details',
				'details0',
				7,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			name: '物料详情',
			imgurl: '/static/index/warehouse/procurement/details/details01.png'
		},
		{
			url: genPaths(
				'/static/index/warehouse/procurement/del',
				'del',
				9,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			name: '删除',
			imgurl: '/static/index/warehouse/procurement/del/del1.png'
		},
		{
			url: genPaths(
				'/static/index/warehouse/procurement/dele',
				'del',
				8,    // 张数
				'png',
				1,     // 起始索引为 1
				false  // 不补零
			),
			name: '清空',
			imgurl: '/static/index/warehouse/procurement/dele/del1.png'
		}
	])
</script>

<style scoped lang="less">
	.toast{
		width: 26vw;
		max-height: 40vh;
		position: fixed;
		z-index: 105;
		right: 1.5vw;
		bottom: 1.5vw;
		background: #fff;
		border-radius: 1.6vw;
		padding: 2vw 1vw 5vw;
		.cfg{
			width: 100%;
			height: 3.5vw;
			display: flex;
			position: absolute;
			bottom: 0;
			left: 0vw;
			>view{
				width: 50%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 1.2vw;
				font-weight: 600;
				border-top: 1px solid rgba(239, 240, 244, 1);
				&:nth-child(2){
					color:rgba(3, 133, 250, 1);
					border-left: 1px solid rgba(239, 240, 244, 1);
				}
			}
		}
		.cont{
			width: 70%;
			font-size: 1.3vw;
			margin: 0.5vw auto 0;
			max-height: 21.5vh;
			overflow-y: scroll;
		}
		.xunw{
			width: 100%;
			font-size: 1.3vw;
			margin: 0.5vw auto 0;
			text-align: center;
			font-weight: 600;
		}
		.tit{
			width: 100%;
			height: 3vw;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 1.4vw;
			font-weight: bolder;
			letter-spacing: 0.3vw;
		}
		
	}
	.uncgd{
		bottom: -96vh !important;
	}
	.caigoudan{
		width: 50vw;
		height: 95vh;
		background: #FFFFFF;
		border-radius: 1.6vw;
		position: fixed;
		z-index: 104;
		bottom: 1.5vw;
		left: 22vw;
		padding:1.5vw 2vw 0;
		
		.cgdscroll{
			width: 100%;
			height: calc(95vh - 7vw);
			.cardcd{
				>.boxitem {
					width: 22vw;
					height: 19.3vw;
					background: rgba(255, 255, 255, .7);
					border-radius: 1.6vw;
					margin: 0 1vw 1.2vw 0;
					display: inline-block;
					padding:1.5vw 2.3vw 2.3vw;
					position: relative;
					border: 2px solid rgba(187,187,187,0.34);
					.dbgys{
						width: 100%;
						height: 4.3vw;
						position: absolute;
						left: 0;
						bottom: 0vw;
						background: rgba(239, 240, 244, 1);
						border-radius:0 0 1.6vw 1.6vw;
						border: 2px solid rgba(239, 240, 244, 1);
						display: flex;
						padding: 0.6vw  1.5vw 0;
						justify-content: space-between;
						.act{
							background: rgba(231, 240, 251, 1) !important;
							border: 1px solid rgba(0, 118, 214, 1) !important;
						}
						>view{
							white-space: nowrap;
							&:nth-child(1){
								display: flex;
								flex-direction: column;
								font-weight: 400;
								font-size: 1vw;
								color: #888888;
								view{
									display: flex;
									align-items: center;
								}
								text{
									font-weight: bold;
									font-size: 1.4vw;
									color: #555555;
								}
							}
						}
					}
					>view {
						.hl {
							color: #0385FA;
							background: #E7F0FB;
						}
				
						.yl {
							background: #DCF6F3;
							color: #00C6A9;
						}
				
						.bj {
							background: #E9EBFC;
							color: #727BFF;
						}
				
				
						&:nth-child(1) {
							font-weight: bold;
							font-size: 1.5vw;
							color: #333;
							white-space: nowrap;
							overflow: hidden;
							width: 100%;
							text-overflow: ellipsis;
						}
				
						&:nth-child(2) {
							font-weight: 400;
							font-size: 1.2vw;
							color: #555555;
							margin-top: .6vw;
						}
				
						&:nth-child(3) ,&:nth-child(4) {
							font-weight: 400;
							font-size: 1.2vw;
							color: #666666;
							margin-top: .6vw;
						}
				
						&:nth-child(5) {
							width: 100%;
							height: 7vw;
				
						}
						
				
				
						.znk {
							width: 8vw;
							height: 7vw;
							position: absolute;
							right: 1vw;
							bottom: 4.3vw;
				
							image {
								width: 100%;
								height: 100%;
							}
						}
				
						.carditem {
							width: 5.8vw;
							height: 2.1vw;
							border-radius: 1.0vw;
							display: flex;
							justify-content: center;
							align-items: center;
							font-weight: 400;
							font-size: .9vw;
							margin-top: .8vw;
				
							image {
								width: 1.4vw;
								height: 1.4vw;
							}
						}
					}
				}
				
				
				
				
				.cgdh{
					width: 100%;
					height: 4.3vw;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #333333;
					font-weight: bold;
					view{
						font-size: 1.1vw;
					}
					text{
						font-size: 1.4vw;
					}
				}
				.gys{
					width: 100%;
					height: 2vw;
					background:rgba(238, 238, 238, 0.5);
					text-align: right;
					font-weight: 400;
					font-size: 1.1vw;
					color: #666666;
					padding-right: 0.8vw;
					line-height: 2vw;
				}
			}
		}
		.tj {
			width: 100%;
			height: 3.5vw;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		
			>text {
				&:nth-child(1) {
					width: 5.2vw;
					height: 2.2vw;
					display: inline-block;
					text-align: center;
					line-height: 2.2vw;
					font-weight: 400;
					font-size: 1vw;
					color: #5C7992;
					background: linear-gradient(-61deg, #EAF5FF, #CBE7FF) !important;
					border-radius: 1.1vw;
				}
		
				 
			}
		}
		.title{
			height: 2vw;
			font-weight: 400;
			font-size: 1.4vw;
			color: #333333;
		}
		
		
	}
	.uncrkcard{
		right: -26vw !important;
	}
	.wuliao {
		width: 25.2vw;
		height: 48.8vw;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 1vw 0rpx rgba(171, 171, 172, 0.29);
		border-radius: 1.6vw;
		position: fixed;
		bottom: 11vw;
		right: 1.5vw;
		z-index: 103;
		padding: 2vw 2.2vw 2vw;

		.dibu {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin: 3vw auto 0;

			view {
				width: 4vw;
				height: 80%;
				font-weight: 400;
				font-size: .9vw;
				color: #8F92A1;
				display: flex;
				flex-direction: column;
				margin-left: 2.1vw;
				margin-top: -0.2vw;
				align-items: center;

				.l {
					color: rgba(3, 133, 250, 1);
				}

				.f {
					color: rgba(250, 178, 182, 1);
				}

				>text {
					white-space: nowrap;
					display: inline-block;
					display: flex;

					&:nth-child(1) {
						font-weight: bold;
						font-size: 1.4vw;
						color: #555555;
					}

					&:nth-child(2) {
						font-weight: 400;
						font-size: .9vw;
						color: #8F92A1;
						white-space: nowrap;
					}
				}
			}
		}

		.zil {
			font-weight: 400;
			font-size: 1.1vw;
			color: #777777;
			margin-top: .9vw;
		}

		.life {
			width: 66%;
			height: 2vw;
			margin: 0 auto 3vw;
			display: flex;
			justify-content: space-around;

			view {
				width: 5.3vw;
				height: 1.8vw;
				border-radius: .9vw;
				border: 1px solid #D2D2D2;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: .9vw;
				color: #555555;
				margin-left: .6vw;
				white-space: nowrap;
			}
		}

		.znk {
			width: 16vw;
			height: 15vw;
			margin: 2vw auto 0;
		}

		.name {
			width: 100%;
			font-weight: bold;
			font-size: 1.4vw;
			color: #212327;
			height: 3vw;
			line-height: 1.5vw;
		}
	}

	// 
	.shuru {
		width: 20.6vw;
		height: 34.5vw;
		position: fixed;
		bottom: 1.5vw;
		right: 1.6vw;
		z-index: 103;
	}




	.mengban {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		background: RGBA(239, 240, 244, 0.55);
	}

	.tp {
		image {
			width: 100%;
			height: 100%;
		}
	}

	.box {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0vw 1vw 0;

		.rights {
			width: 27vw;
			height: calc(100% - 4vw);
			margin-top: 4vw;

			.serchs {
				width: 27vw;
				height: 3.2vw;
				background: rgba(255, 255, 255, .5);
				border-radius: 1.6vw;
				display: flex;
				justify-content: space-between;
				padding: 0.5vw;
				align-items: center;
				margin-top: 1.1vw;

				.ipt {
					display: flex;
					align-items: center;

					image {
						width: 2.2vw;
						height: 2.2vw;
						margin-left: 0.5vw;
					}

					input {
						width: 18vw;
						height: 2.4vw;
						font-size: 1.1vw;
						padding-left: 1.6vw;
					}
				}

				.scr {
					width: 4.2vw;
					height: 2.4vw;
					background: url('/static/index/warehouse/procurement/sh.png')no-repeat;
					background-size: 100% 100%;
					border-radius: 1.2vw;
					border: 1px solid rgba(0, 155, 252, 1);
					font-weight: 400;
					font-size: 1vw;
					color: #1083F8;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.anmikc {
				width: 100%;
				height: 9vw;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				>view {
					width: 8.5vw;
					height: 3.7vw;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 400;
					font-size: 1.3vw;
					color: #212327;
					background: #FFFFFF;
					margin: 0.25vw 0;
					border-radius: 1.6vw;
					view {
						margin-right: .4vw;

						image {
							width: 2vw;
							height: 2vw;
						}

						.donghua {
							margin: 0;
						}
					}

					text {
						white-space: nowrap;
					}

				}
			}

			.typeitem {
				width: 100%;
				height: 54vh;

				.scroltype {
					width: 100%;
					height: calc(54vh - 2vw);
					display: flex;
					justify-content: space-around;

					.scroll-Y {
						width: 8.5vw;
						height: calc(54vh - 2vw);

						view {
							width: 100%;
							height: 3.8vw;
							background: rgba(255, 255, 255, .5);
							border-radius: 1.9vw;
							font-weight: 400;
							font-size: 1.3vw;
							color: #212327;
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 0 0.4vw;
							margin-bottom: .8vw;
							text-align: center;

							text {
								white-space: nowrap;
							}

							>image {
								width: 2vw;
								height: 2vw;
							}
						}

						.act {
							background: rgba(255, 255, 255, 1) !important;
							font-weight: 600;
							color: #0385FA !important;
						}
					}
				}

				.toptype {
					width: 100%;
					height: 2vw;
					display: flex;
					justify-content: space-around;
					margin: .4vw 0 .4vw 0;

					view {
						width: 7vw;
						height: 1.9vw;
						border-radius: 1vw;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 400;
						font-size: 1.2vw;
						color: #333333;
					}
				}
			}

			.shitem {
				width: 27vw;
				height: 10.3vw;
				background: #E8E9ED;
				border-radius: 1.6vw;
				padding: 1.2vw 1.8vw;

				.jqry {
					width: 100%;
					display: flex;
					align-items: center;

					.left {
						width: 5vw;
						height: 5vw;
						margin-right: .8vw;
						border-radius: .3vw;
						overflow: hidden;
					}

					.rigname {
						height: 4vw;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						view {
							&:nth-child(1) {
								font-weight: bold;
								font-size: 1.4vw;
								color: #212327;
							}

							&:nth-child(2) {
								width: 11vw;
								font-weight: 400;
								font-size: 1vw;
								color: #212327;
								display: flex;
								justify-content: space-between;
							}
						}

					}
				}

				.shypk {
					width: 100%;
					display: flex;
					justify-content: space-between;

					view {
						&:nth-child(1) {
							font-weight: bold;
							font-size: 1.1vw;
							color: #333333;
						}

						&:nth-child(2) {
							display: flex;
							flex-direction: column;
							align-items: center;

							text {
								font-weight: 400;
								font-size: 1vw;
								color: #666666;
							}


						}
					}
				}
			}
		}

		.lefts {
			width: 70vw;
			margin-left: 1vw;
			height: calc(100%);
			position: relative;

			.fxj {
				width: 23vw;
				height: 22vw;
				position: absolute;
				left: 0;
				bottom: 2vw;
				z-index: 11;
				border-radius: 1.6vw;

				text {
					width: 100%;
					font-weight: 400;
					font-size: .9vw;
					color: #999999;
					display: flex;
					justify-content: center;
					position: absolute;
					left: 0;
					bottom: 0vw;
				}
			}

			.mblbg {
				width: 24.5vw;
				height: 21vw;
				position: absolute;
				left: -1vw;
				bottom: 0.5vw;
				border-radius: 1.6vw;
				filter: blur(15rpx);
				background: RGBA(239, 240, 244, 1);
				z-index: 10;
			}

			.scroll-Y {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;

				.boxitem {

					&:nth-child(1),
					&:nth-child(2),
					&:nth-child(3) {
						margin-top: 4vw;
					}
				}
			}

			.boxitem {
				width: 22vw;
				height: 19.3vw;
				background: rgba(255, 255, 255, .7);
				border-radius: 1.6vw;
				margin: 0 1.3vw 1.2vw 0;
				border: 2px dashed #fff;
				display: inline-block;
				padding:1vw 2.3vw 2.3vw;
				position: relative;
				.dbgys{
					width: 100%;
					height: 5.3vw;
					position: absolute;
					left: 0;
					bottom: 0vw;
					background: #f7f7fa;
					border-radius:0 0 1.6vw 1.6vw;
					border: 2px solid rgba(239, 240, 244, 1);
					display: flex;
					padding: 0.4vw  1.5vw 0;
					justify-content: space-between;
					align-items: center;
					.act{
						background: rgba(231, 240, 251, 1) !important;
						border: 1px solid rgba(0, 118, 214, 1) !important;
					}
					>view{
						&:nth-child(2){
							width: 2.2vw;
							height: 2.2vw;
							display: flex;
							justify-content: center;
							align-items: center;
							background: #EEEEEE;
							border-radius: 50%;
							border: 1px solid #CBCFD0;
							padding: 0 !important;
							image{
								width: 1.6vw;
								height: 1.6vw;
							}
						}
						&:nth-child(1){
							display: flex;
							flex-direction: column;
							font-weight: 400;
							font-size: 1vw;
							color: #888888;
							width: 14vw;
							text{
								font-weight: bold;
								font-size: 1.4vw;
								color: #555555;
							}
						}
					}
				}
				>view {
					.hl {
						color: #0385FA;
						background: #E7F0FB;
					}

					.yl {
						background: #DCF6F3;
						color: #00C6A9;
					}

					.bj {
						background: #E9EBFC;
						color: #727BFF;
					}


					&:nth-child(1) {
						font-weight: bold;
						font-size: 1.5vw;
						color: #333;
						white-space: nowrap;
						overflow: hidden;
						width: 100%;
						text-overflow: ellipsis;
					}

					&:nth-child(2) {
						font-weight: 400;
						font-size: 1.2vw;
						color: #555555;
						margin-top: .6vw;
					}

					&:nth-child(3) ,&:nth-child(4) {
						font-weight: 400;
						font-size: 1.2vw;
						color: #666666;
						margin-top: .6vw;
					}

					&:nth-child(5) {
						width: 100%;
						height: 7vw;

					}
					


					.znk {
						width: 8vw;
						height: 7vw;
						position: absolute;
						right: 1vw;
						bottom: 5.3vw;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.carditem {
						width: 5.8vw;
						height: 2.1vw;
						border-radius: 1.0vw;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: 400;
						font-size: .9vw;
						margin-top: .8vw;

						image {
							width: 1.4vw;
							height: 1.4vw;
						}
					}
				}
			}

		}

	}

	.yujing {
		border: 2px solid rgba(255, 102, 107, 0.51) !important;
		box-shadow: 0 0 8px rgba(255, 102, 107, 0.051) inset;

		view {
			.num {
				view {
					&:nth-child(1) {
						color: #FF5757 !important;
					}
				}

			}
		}
	}

	.active {
		border: 2px dashed #017DE9 !important;
	}

	.swsh {
		width: 2.7vw;
		height: 1.5vw;
		background: #D6D8DC;
		border-radius: .75vw;
		border: 1px solid #D6D8DC;
		padding: 0.2vw;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		>view {
			width: 1.1vw;
			height: 1.1vw;
			background: #FCFCFD;
			border-radius: 50%;
		}
	}

	.act {
		background: linear-gradient(-69deg, #E1EFFC, #CAE0F9, #D2E9FF) !important;
		border: 1px solid rgba(0, 130, 251, 0.34) !important;
		padding-left: 1.3vw;

		view {
			background: #0385FA;
			position: absolute;
		}
	}

	// 大图
	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}

	.leftr {
		width: 70vw;
		margin-left: 1vw;
		height: calc(100%);
		position: relative;

		.fxj {
			width: 30vw;
			height: 16vw;
			position: absolute;
			left: 1vw;
			bottom: 0vw;
			z-index: 111;
			border-radius: 1.6vw;

			text {
				width: 76%;
				font-weight: 400;
				font-size: .9vw;
				color: #999999;
				display: flex;
				justify-content: center;
				position: absolute;
				left: 0;
				bottom: 0vw;
			}
		}

		.mblbg {
			width: 35vw;
			height: 16vw;
			position: absolute;
			left: -1vw;
			bottom: 0vw;
			border-radius: 1.6vw;
			filter: blur(15rpx);
			background: RGBA(239, 240, 244, 1);
			z-index: 10;
		}

		.scroll-Y {
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;

			.boxitem {

				&:nth-child(1),
				&:nth-child(2),
				&:nth-child(3) {
					margin-top: 4vw;
				}
			}
		}

		.boxibigtem {

			&:nth-child(1),
			&:nth-child(2) {
				margin-top: 4vw;
			}
		}

		.boxibigtem {
			width: 33.3vw;
			height: 21.7vw;
			background: rgba(255, 255, 255, .7);
			border-radius: 1.6vw;
			margin: 0 1.3vw 1.2vw 0;
			border: 2px dashed #fff;
			display: inline-block;
			padding: 2.3vw;
			position: relative;

			>view {
				.hl {
					color: #0385FA;
					background: #E7F0FB;
				}

				.yl {
					background: #DCF6F3;
					color: #00C6A9;
				}

				.bj {
					background: #E9EBFC;
					color: #727BFF;
				}


				&:nth-child(1) {
					font-weight: bold;
					font-size: 1.5vw;
					color: #333;
					white-space: nowrap;
					overflow: hidden;
					width: 100%;
					text-overflow: ellipsis;
				}

				&:nth-child(2) {
					font-weight: 400;
					font-size: 1.2vw;
					color: #555555;
					margin-top: .9vw;
				}

				&:nth-child(3) {
					font-weight: 400;
					font-size: 1.2vw;
					color: #666666;
					margin-top: .6vw;
				}

				>&:nth-child(4) {
					width: 100%;
					height: 10vw;
					position: absolute;
					left: 0;
					bottom: 0;

				}

				.num {
					position: absolute;
					bottom: 2vw;
					left: 2.5vw;
					display: flex;
					flex-direction: column;
					justify-content: center;

					view {
						&:nth-child(1) {
							font-weight: bold;
							font-size: 2.2vw;
							color: #555;
						}

						&:nth-child(2) {
							font-weight: 400;
							font-size: 1vw;
							color: #999999;
						}
					}

				}

				.znk {
					width: 12vw;
					height: 11.5vw;
					position: absolute;
					right: 1.5vw;
					bottom: 1vw;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.carditem {
					width: 5.8vw;
					height: 2.1vw;
					border-radius: 1.0vw;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 400;
					font-size: .9vw;
					margin-top: .8vw;

					image {
						width: 1.4vw;
						height: 1.4vw;
					}
				}
			}
		}
	}
</style>
<style>
	page {
		background: RGBA(239, 240, 244, 1);
	}
</style>