<template>
	<view>
		<view class="serchs">
			<view class="leftbtn">
				<view class="ipt">
					<input type="text" placeholder="物料名称/物料编码/物料简拼" v-model="form.wlParamInfo"  @confirm="search(0)"/>
					<image src="/static/index/procurement/x.png" mode="aspectFill" v-if="form.wlParamInfo"
						@click="search(0)"></image>
				</view>
				<view @click="search" class="scr">
					<image src="/static/index/procurement/sh.png" mode="aspectFill" class="sh"></image>
					检索
				</view>
				<view class="shx" @click="ification=true">
					<image src="/static/index/procurement/sx.png" mode="aspectFill"></image>
					筛选
				</view>
				<view class="shx" @click="chongzhi"
				v-if="form.categoryId!=''||form.wlParamInfo!=''||form.suppliers!=''"
				>
				<image src="/static/index/procurement/cz.png" mode="aspectFill"></image>
					重置
				</view>
			</view>
			<view class="rightbtn">
				<view @click="open = 1">
					<image src="/static/index/procurement/del1.png" mode="aspectFill"></image>
					清空
				</view>
				<view @click="caigouclk">
					<image src="/static/index/procurement/procure01.png" mode="aspectFill"></image>
					采购
				</view>
				<view class="back" @click="uni.navigateBack()">
					<image src="/static/index/procurement/bk.png" mode="aspectFill"></image>
					返回
				</view>
			</view>
		</view>
		<carlist :InvoicingList="InvoicingList" :status="status" @delindex="opendelindex" @addcartory="addcartory"></carlist>
		
		<tanchuang :show="open==1" font="是否清空购物车？" @back="open = 0" @right="del()"> </tanchuang>
		<tanchuang :show="open==2" font="是否删除此物料？" @back="open = 0" @right="delindex()"> </tanchuang>
		
		<!-- 筛选 -->
		<view class="mengban" v-if="ification" @click="ification = false"></view>
		<classification @confirm="confirm" :show="ification" :typenum="1"  ref="classication"></classification>
		<defaultr cont="暂无数据" v-if="status=='nomore'&&InvoicingList.length==0"></defaultr>
		
		<view class="mengban" v-if="addflag" @click="addflag = false"></view>
		<calculator :show="addflag"  :caigouobj="caigouobj"  @colse="addflag = false" @right="right"></calculator>
		<view class="mengban" v-if="caigouflag" @click="caigouflag = false"></view>
		<purorder :arrlist="generatedOrder" :show="caigouflag" @cloe="caigouflag = false" @config="configr"></purorder>
		<errorshow :show="openerror" :font="errmsg" @close="openerror=false"  />
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent} from 'vue';
	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
	import {generatedPurchaseViewOrder,eddShoppingCartList, queryShoppingCartList, getGwcMaterialTreeData, queryNuInfoByNuId, updateKfstatus,deleteQgInfoById,emptiedQgInfo ,queryWlInfoByWlId,generatedPurchaseOrder } from './api/lunpan.js'
	import carlist from './components/carlist.vue';
	import tanchuang from './components/tanchuang.vue';
	import classification from './components/classification.vue'
	import defaultr from './components/default.vue'
	import calculator from './components/calculator.vue'
	import purorder from './components/purorder.vue'
	import config from '../../uni_modules/vk-uview-ui/libs/config/config.js';
	const addflag = ref(false)
	const ification = ref(false)
	const caigouobj = ref({})
	const openerror = ref(false)
	const errmsg = ref('')
	 const form = reactive({
	 	nuId: uni.getStorageSync('nuId'),
	 	pageNo: 1,
	 	pageSize: -1,
	 	categoryId: '',
	 	typeId: '',
	 	medicationId: '',
	 	wlParamInfo: '',
		suppliers:''
	 })
	 const InvoicingList = ref([])
	 const status = ref('nomore')
	 const open = ref(0)
	 onShow(()=>{
		 InvoicingList.value = [];
		 queryInvo()
	 })
	 const classication = ref<InstanceType<typeof ChildComponent>>()
	 const chongzhi=()=>{
	 	form.categoryId = '';
	 	form.typeId = '';
	 	form.medicationId = '';
	 	form.suppliers = '';
	 	form.pageNo=1;
	 	form.wlParamInfo= '',
	 	InvoicingList.value = [];
	 	classication.value.typescroll(1,-1,{});
	 	classication.value.qingkong();
	 	classication.value.config();
	 }
	 const queryInvo = () => {
	 	queryShoppingCartList(form).then(res => { 
	 		res.result.records.forEach((item,i)=>{
	 			item.flag = true;
				item.zk = false;
				item.scrollleft = 0;
	 		})
	 		InvoicingList.value.push(...res.result.records);
	 		// status.value = (res.result.total == InvoicingList.value.length) ? 'nomore' : 'loadmore';
	 	})
	 }
	 const search = (x : number) => {
	 	if (x === 0) { form.wlParamInfo = '' }
	 	form.pageNo = 1;
	 	InvoicingList.value = [];
	 	queryInvo();
	 }
	 
	 const addcartory =(e:any)=>{
	 	 caigouobj.value = e;
		 
	 	 addflag.value = true;
	 }
	 const confirm =(e:any)=>{
	 	form.categoryId = e.categoryId;
	 	form.typeId = e.typeId;
	 	form.medicationId = e.medicationId;
	 	form.suppliers = e.suppliers;
	 	form.pageNo=1;
	 	InvoicingList.value = [];
	 	queryInvo();
	 	ification.value = false
	 }
	const configr=()=>{
		 caigouflag.value = false;
		 search(1);
		 setTimeout(()=>{
			 uni.navigateTo({
			 	url:'/pages/procurement/purchaseorder'
			 })
		 },1000)
	 }
	 let times = null;
	 const scrolltolower = (t:number) => {
	 		if (status.value == 'loading' || status.value == 'nomore') { return }
	 		status.value = 'loading'
	 		form.pageNo++;
	 		queryInvo()
	 	}
		const del=()=>{
			emptiedQgInfo().then(res=>{
				if(res.success){
					form.pageNo=1;
					InvoicingList.value = [];
					chongzhi()
				}else{
					errmsg.value = res.result?.message ? res.result?.message : res.message
					openerror.value = true;
				}
				open.value = 0; 
			})
		}
		const delobj = ref({})
		const opendelindex=(v:any,i:number)=>{
			open.value = 2;
			v.index = i;
			delobj.value = v;
		}
		const delindex =()=>{
			let delstr = delobj.value.id;
			deleteQgInfoById(delstr).then(res=>{
				if(res.success){
					uni.showToast({
						icon:res.success?'success':'none',
						title:res.message
					})
					setTimeout(()=>{
						InvoicingList.value.splice(delobj.value.index,1);
						open.value = 0;
						status.value = InvoicingList.value.length  == 0 ? 'nomore' : 'loadmore';
						classication.value.getTreelnum()
					},800)
				}else{
					errmsg.value = res.result?.message ? res.result?.message : res.message
					openerror.value = true;
				}
				
				
			})
		}
		const adfangdou = ref(true);
		// 防抖
		const right = (n:number,nm:any,type:Object,v:object) => {
			setTimeout(()=>{
				if(adfangdou.value){
					connfig(nm,n,type,v);
					adfangdou.value = false;
				}
			},30)
			
		}
		const timers = ref(true)
		const connfig = (nm:any,num:Number,type:Object,v:object) =>{
			if(timers.value==false){return}
			timers.value=false;
			let dt = {
				nuId:form.nuId,
				purchaseQuantity:num,
				suppliersId:nm.id,
				suppliersName:nm.name,
				id:caigouobj.value.id,
				wlId:caigouobj.value.wlId,
				kcsl:caigouobj.value.kcsl,
				wlUnits:type.unit,
				referenceUnitPrice:type.price,
				dhbl:type.num
			}
			eddShoppingCartList(dt).then(res=>{
				timers.value=true;
				if(res.success){
					setTimeout(()=>{
						 tihuan(v);
						addflag.value = false;
						 // form.pageNo=1;
						 // InvoicingList.value = [];
						
					},700)
					uni.showToast({
						icon:res.success?'success':'none',
						title:res.message
					})
				}else{
					errmsg.value = res.result?.message ? res.result?.message : res.message
					openerror.value = true;
				}
				adfangdou.value = true;
			})
		}
		const tihuan = (v)=>{
			let forms={
					nuId: uni.getStorageSync('nuId'),
					wlParamInfo:v.wlMaterialNo,
				 }
				queryShoppingCartList(forms).then(res => { 
					let obj = {};
					if(res.result.records.length>1){
						res.result.records.forEach(item=>{
							if(item.id==v.id){
								obj = item
							}
						})
					}else{
						obj = res.result.records[0];
					}
					
					 InvoicingList.value.forEach((item,i)=>{
					 	if(item.id == obj.id){
							obj.flag = v.flag;
							obj.zk = false;
							obj.scrollleft = 0;
							InvoicingList.value[i] = obj;
					 	}
					 })
				})
		}
		const caigouflag = ref(false)
		const caigouarr = ref([])
		const generatedOrder = ref([])
		const caigouclk =()=>{
			uni.showLoading()
			let arr = [];
			caigouarr.value = [];
			InvoicingList.value.forEach(item=>{
				if(item.flag){
					arr.push(item)
				}
			})
			caigouarr.value = arr;
			console.log("????",arr)
			if(arr.length==0){
				uni.showToast({
					title:'请选择物料!',
					icon:'none'
				})
				return
			}
			generatedPurchaseViewOrder(caigouarr.value).then(res=>{
				if(res.success){
					generatedOrder.value = res.result;
					caigouflag.value = true;
					uni.hideLoading();
				}else{
					errmsg.value = res.result?.message ? res.result?.message : res.message
					openerror.value = true;
				}
			})
		}
</script>

<style scoped lang="less">
.serchs {
		width:96vw;
		height: 3.3vw;
		border-radius: 1.6vw;
		display: flex;
		align-items: center;
		margin: 0.7vw 0 0;
		justify-content: space-between;
		.leftbtn{
			width: 64vw;
			height: 3.3vw;
			display: flex;
			align-items: center;
		}
		.rightbtn{
			width: 30vw;
			height: 3.3vw;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			
			view{
				width: 7.3vw;
				height: 3.3vw;
				border: 1px solid #D9DADC;
				background: rgba(255, 255, 255, 1);
				border-radius: 1.65vw;
				font-weight: 400;
				font-size: 1.4vw;
				color: rgba(85, 85, 85, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left:0.7vw;
				color: #555555;
				border: 1px solid #D9DADC;
				image {
					width: 1.5vw;
					height: 1.3vw;
					margin: 0 0.5vw 0 0;
				}
			}
		}
		.ipt {
			display: flex;
			align-items: center;
			width: 27vw;
			background: #E2E4E9;
			border-radius: 1.65vw;
			height: 3.3vw;
			
			image {
				width: 1.8vw;
				height: 1.8vw;
				margin:0 0.5vw;
			}

			input {
				width: 25vw;
				height: 3.3vw;
				font-size: 1.4vw;
				padding-left: 1.6vw;
				
			}
		}
		.back{
			width: 8vw;
			height: 3.3vw;
			border-radius: 1.6vw;
			background: rgba(255, 255, 255, 1);
			border-radius: 1.65vw;
			font-weight: 400;
			font-size: 1.4vw;
			color: rgba(85, 85, 85, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left:0.6vw;
			border: 1px solid #D9DADC;
			image {
				width: 1.5vw !important;
				height: 1.5vw !important;
				margin: 0 0.5vw 0 0;
			}
			
		}
		.rightbtn>view:active,.shx:active,.scr:active{
			color: #1083F8;
			background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
			border: 1px solid #1083F8;
		}
		.scr {
			border-radius: 1.65vw;
			font-weight: 400;
			font-size: 1.4vw;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 7.3vw;
			height: 3.3vw;
			margin: 0 0 0 0.7vw;
			background: rgba(255, 255, 255, 1);
			border: 1px solid #D9DADC;
			color: #555555;
			image {
				width: 1.5vw;
				height: 1.3vw;
				margin: 0 0.5vw 0 0;
			}
		}
		
		.shx {
			width: 7.3vw;
			height: 3.3vw;
			background: rgba(255, 255, 255, 1);
			border-radius: 1.65vw;
			border: 1px solid #D9DADC;
			font-weight: 400;
			font-size: 1.4vw;
			color: #222;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 0 0 0.7vw;
			color: #555555;
		
			image {
				width: 1.5vw;
				height: 1.3vw;
				margin: 0 0.5vw 0 0;
			}
		}
	}
	.guodu {
			transition: .4s;
			-webkit-transform-style: preserve-3d;
			-webkit-overflow-scrolling: touch;
		}
		.mengban {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 90;
			background: RGBA(239, 240, 244, 0.55);
		}
</style>
<style>
	page {
		background: RGBA(239, 240, 244, 1);
		padding: 2vw;
		box-sizing: border-box;
	}
</style>