<template>
	<view>
		<view class="serchs">
			<view class="leftbtn">
				<view class="ipt">
					<input type="text" placeholder="物料名称/物料编码/物料简拼" v-model="form.wlParamInfo" />
					<image src="/static/index/procurement/x.png" mode="aspectFill" v-if="form.wlParamInfo"
						@click="search(0)"></image>
				</view>
				<view @click="search" class="scr">
					检索
				</view>
				<view class="shx" @click="ification=true">
					<image src="/static/index/procurement/sx.png" mode="aspectFill"></image>
					筛选
				</view>
			</view>
			<view class="rightbtn">
				<view>
					<image src="/static/index/procurement/del1.png" mode="aspectFill"></image>
					清空
				</view>
				<view>
					<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"></carlist>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineProps ,defineComponent} from 'vue';
	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
	import { queryShoppingCartList, getGwcMaterialTreeData, queryNuInfoByNuId, updateKfstatus,deleteQgInfoById,emptiedQgInfo ,queryWlInfoByWlId,generatedPurchaseOrder,generatedPurchaseViewOrder } from './api/lunpan.js'
	import carlist from './components/carlist.vue';
	 const form = reactive({
	 	nuId: uni.getStorageSync('nuId'),
	 	pageNo: 1,
	 	pageSize: 10,
	 	categoryId: '',
	 	typeId: '',
	 	medicationId: '',
	 	wlParamInfo: '',
	 	isWaring: 0
	 })
	 const InvoicingList = ref([])
	 const status = ref('loading')
	 onLoad(()=>{
		 queryInvo()
	 })
	 const queryInvo = () => {
	 	queryShoppingCartList(form).then(res => { 
	 		res.result.records.forEach((item,i)=>{
	 			item.flag = true;
				item.zk = false;
				item.scrollleft = 0;
	 		})
	 		console.log(res.result.records)
	 		InvoicingList.value.push(...res.result.records);
	 		status.value = res.result.total == InvoicingList.value.length ? 'nomore' : 'loadmore';
			setout.value = (res.result.total == InvoicingList.value.length ? false : true)
	 	})
	 }
	 let times = null;
	 const setout = ref(true)
	 const scrolltolower = (t:number) => {
	 		if (setout.value==false) { return }
	 		status.value = 'loading'
	 		setout.value = false;
	 		form.pageNo++;
	 		queryInvo()
	 	}
</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: 8vw;
				height: 3.3vw;
				border-radius: 1.6vw;
				border: 1px solid #D9DADC;
				background: rgba(255, 255, 255, 0.9);
				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;
				image {
					width: 1.5vw;
					height: 1.3vw;
					margin: 0 0.5vw;
				}
			}
		}
		.ipt {
			display: flex;
			align-items: center;
			width: 30vw;
			background: #E2E4E9;
			border-radius: 1.65vw;
			height: 3.3vw;
			
			image {
				width: 2.2vw;
				height: 2.2vw;
				margin:0 0.5vw;
			}

			input {
				width: 25vw;
				height: 3.3vw;
				font-size: 1.1vw;
				padding-left: 1.6vw;
				
			}
		}
		.back{
			width: 8vw;
			height: 3.3vw;
			border-radius: 1.6vw;
			border: 1px solid rgba(85, 85, 85, 0.5);
			background: rgba(255, 255, 255, 0.5);
			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;
			image {
				width: 1.5vw;
				height: 1.3vw;
				margin: 0 0.5vw;
			}
			
		}
		.scr {
			border-radius: 1.65vw;
			font-weight: 400;
			font-size: 1.5vw;
			color: #1083F8;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 8vw;
			height: 3.3vw;
			background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
			border: 1px solid #1083F8;
			margin: 0 1.2vw;
		}

		.shx {
			width: 8.2vw;
			height: 3.3vw;
			background: #FFFFFF;
			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;
			box-shadow: 0.5rpx 5rpx 5rpx #dadee1;

			image {
				width: 1.5vw;
				height: 1.3vw;
				margin: 0 0.5vw;
			}
		}
	}
	.guodu {
			transition: .4s;
			-webkit-transform-style: preserve-3d;
			-webkit-overflow-scrolling: touch;
		}
</style>
<style>
	page {
		background: RGBA(239, 240, 244, 1);
		padding: 2vw;
		box-sizing: border-box;
	}
</style>