<template>
	<view class="guodu" :style="!transition?'opacity: 0':'opacity: 1'"
		style="transition: opacity 1s ease;padding: 1.1vw;">
		<view class="serchs guodu" :style="'width:90vw'">
			<view class="ipt">
				<input type="text" placeholder="物料名称/物料编码/物料简拼" v-model="inputValue.wlParamInfo" @confirm="search" />
				<image src="/static/index/procurement/x.png" mode="aspectFill" v-if="inputValue.wlParamInfo"
					@click="search(0)"></image>
			</view>
			<view @click="search" class="scr guodu">
				<image src="/static/index/procurement/sh.png" mode="aspectFill" class="sh"></image>
				<image src="/static/index/procurement/shr.png" mode="aspectFill" class="shr"></image>
				检索
			</view>
			<!-- <view class="shx guodu" @click="chongzhi"
				v-if="form.categoryId!=''||form.wlParamInfo!=''||form.suppliers!=''">
				<image src="/static/index/procurement/cz.png" mode="aspectFill"></image>
				重置
			</view> -->
			<view class="back guodu" @click="crkshow = true">
				出入库
			</view>
		</view>
		<view class="listcard">
			<view class="contain-right-nomessage center" v-if="InvoicingList.length == 0">
				<view class="que">
					<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
					<view>暂无物料</view>
				</view>
			</view>
			<carditem :InvoicingList="InvoicingList" lower-threshold="300" @scrolltolower="scrolltolower" @crk="crk"
				@finishit="finishit">
			</carditem>
			<!-- 	 @addcartory="addcartory" @scrolltolower="scrolltolower" :status="status" -->
		</view>
		<!-- 右下角的进度球 -->
		<gress :progress="percent" :thickness="0.8" style="position: fixed;bottom: 4.7vw;right: 1.3vw;z-index: 3;">
		</gress>
		<!-- 出入库的遮罩 -->
		<view class="mengban" v-if="crkshow" @click="crkshow = false"> </view>
		<!-- 出入库的抽屉 -->
		<crkval :show="crkshow" @crk="crk"></crkval>
		<!-- 出入库按钮-物料信息的遮罩 -->
		<view class="mengban" v-if="crkit" @click.stop="crkit = false" style="z-index: 102;"> </view>
		<!-- 出入库按钮-物料信息 -->
		<information :show="crkit" @close="crkit = false" :pushcrkitem="pushcrkitem" ></information>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent, inject, watch } from 'vue';
	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
	import carditem from './component/carditem.vue'
	import gress from './component/gress.vue'
	import crkval from './component/crkval.vue'
	import information from './component/information.vue'
	import { getCkWlList, getPdjd } from './api/api.js'


	const percent = ref(0);
	const crkit = ref(false)
	const transition = ref(false)
	const crkshow = ref(false)

	const props = defineProps({
		isShow: {
			type: Boolean,
			default: false
		},
	});
	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			if (!oldVal && newVal) {
				transition.value = false;
				setTimeout(() => {
					transition.value = true;
				}, 50)
			} else {
				transition.value = false;
			}
		}
	)
	// const form = reactive({
	// 	nuId: uni.getStorageSync('nuId'),
	// 	pageNo: 1,
	// 	pageSize: 30,
	// 	categoryId: '',
	// 	typeId: '',
	// 	medicationId: '',
	// 	wlParamInfo: '',
	// 	isWaring: 0,
	// 	suppliers: ''
	// })
	const ification = ref(false)
	const InvoicingList = ref([]);
	const search = (x : number) => {
		if (x === 0) { inputValue.value.wlParamInfo = '' }
		getCardArray()
	}
	const pushcrkitem = ref({})
	const crk = (item:any) => {
		// console.log("咋没了啊",item)
		pushcrkitem.value = item
		crkit.value = true
	}
	// const chongzhi = () => {
	// 	// form.categoryId = '';
	// 	// form.typeId = '';
	// 	// form.medicationId = '';
	// 	// form.suppliers = '';
	// 	// form.pageNo = 1;
	// 	// form.wlParamInfo = '',
	// 	// InvoicingList.value = [];
	// 	getCardArray()
	// 	// classication.value.typescroll(1, -1, {});
	// 	// classication.value.qingkong();
	// 	// classication.value.config();
	// }
	// 输入框
	const inputwhat = ref("")
	// 入参
	const inputValue = ref({
		pageNo: 1,
		pageSize: 16,
		nuId: uni.getStorageSync('nuId'),
		wlParamInfo: ""
	})
	// 初始化卡片
	const getCardArray = () => {
		inputValue.value.pageNo = 1;
		addlock.value = false
		getCkWlList(inputValue.value).then((res : any) => {
			console.log("看看卡片列表",res.result.records)
			InvoicingList.value = res.result.records
			if (res.result.records.length != 16) {
				addlock.value = true
			}
		})
	}
	// 添加锁，节流
	const addlock = ref(false)
	// 添加卡片
	const scrolltolower = () => {
		if (!addlock.value) {
			inputValue.value.pageNo++
			getCkWlList(inputValue).then((res : any) => {
				InvoicingList.value.push(...res.result.records)
				if (res.result.records.length != 16) {
					addlock.value = true
				}
			})
		}
	}

	// 刷新页面
	const finishit = () => {
		getCardArray();
		getPdjd().then((res : any) => {
			const total = Number(res.result.totalNum || 0)
			const pd = Number(res.result.pdNum || 0)
			percent.value = total === 0 ? 0 : Math.round((pd / total) * 100)
			// console.log("对不对啊", res.result)
		})
	}
	onLoad(() => {
		finishit()
	})
</script>

<style lang="less" scoped>
	.mengban {
		width: 100vw;
		height: 100vh;
		position: fixed;
		background: RGBA(240, 240, 240, 0.64);
		top: 0;
		left: 0;
		z-index: 99;
	}

	.listcard {
		width: 90vw;
		height: calc(100vh - 4vw);
		margin-top: 0.9vw;
		// background-color: #fff;
		position: relative;

		.center {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.contain-right-nomessage {
			position: fixed;
			top: 0;
			right: 0;
			width: 91.2%;
			height: 100vh;
			border-radius: 30rpx;
			z-index: -1;

			.que {
				width: 20vw;
				height: 20vw;
				margin-right: 12vw;
				// margin: auto;

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

				view {
					margin-top: -30rpx;
					width: 100%;
					text-align: center;
					font-weight: 300;
					font-size: 1.2vw;
					color: #555555;
				}
			}
		}

		.crdcroll {
			width: 100%;
			height: 100%;
			display: grid;
			grid-template-columns: 1fr 1fr;
		}
	}

	.serchs {
		width: 100%;
		height: 3.3vw;
		border-radius: 1.6vw;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 100;

		.ipt {
			display: flex;
			align-items: center;
			width: 28vw;
			border-radius: 1.65vw;
			height: 3.3vw;
			background: #FFFFFF;
			border: 1px solid #D2D2D2;

			image {
				width: 2.2vw;
				height: 2.2vw;
				// margin: 0 0.5vw;
				margin-right: 1.5vw;
			}

			input {
				width: 25vw;
				height: 3.3vw;
				font-size: 1.4vw;
				padding-left: 1.6vw;

			}
		}

		.back {
			width: 9vw;
			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;
			position: absolute;
			right: 0.5vw;
			top: 0.2vw;
			border: 1px solid #D9DADC;

			image {
				width: 1.5vw;
				height: 1.3vw;
				margin: 0 0.5vw 0 0;
			}

		}

		.back: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: 8.5vw;
			height: 3.3vw;
			margin: 0 0 0 0.7vw;
			background: rgba(255, 255, 255, 1);
			border: 1px solid #D9DADC;
			color: #555555;

			image {
				width: 1.6vw;
				height: 1.6vw;
				margin: 0 0.5vw 0 0;
			}
		}

		.shr {
			display: none;
		}

		.scr:active .sh {
			display: none;
		}

		.shx:active .shr {
			display: inline-block;
		}

		.shx:active .sh {
			display: none;
		}

		.scr:active .shr {
			display: inline-block;
		}

		.shx {
			width: 8.5vw;
			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;
			margin: 0 0 0 0.7vw;
			color: #555555;

			image {
				width: 1.6vw;
				height: 1.6vw;
				margin: 0 0.5vw 0 0;
			}
		}
	}

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