<!-- 基于z-paging封装个性化分页组件演示(vue) -->
<template>
	<view class="uni-flex" style="flex-direction: column">
		<itemFilter ref="filter" @onConfirmClick="confirm"> </itemFilter>
		<view class="top" style="">
			<com-blank-view @goScan="openScanPopup" v-if="itemCode == ''"></com-blank-view>
			<item-info v-if="itemDetail" :itemdetail="itemDetail"></item-info>
			<z-tabs v-if="itemCode" :list="tabList" @change="tabChange" />
		</view>

		<view style="padding-top: 230rpx; width: 100%">
			<view v-if="totalCount > 0" style="margin: 10rpx; font-size: 35rpx; font-weight: bold">总数 : {{ totalCount }}
			</view>
			<view v-for="(item, index) in dataList" style="width: 100%" :key="index">
				<view class="uni-flex uni-row"
					style="align-items: center; background-color: #fff; border-radius: 10rpx; margin: 10rpx">
					<view class="" style="font-size: 35rpx"> ({{ index + 1 }}) </view>
					<comItemDetailCard :isShowPack="false" :dataContent="item" style="margin: 10rpx"> </comItemDetailCard>
				</view>
			</view>
			<uni-load-more :status="loadingType" v-if="dataList.length > 0" />
		</view>
		<win-scan-button @goScan="openScanPopup" v-if="itemCode != ''"></win-scan-button>
		<win-scan-item ref="scanPopup" title="物料代码" @getScanResult="getScanCode"> </win-scan-item>
		<com-message ref="comMessageRef" />
	</view>
</template>

<script setup lang="ts">
	import { ref, getCurrentInstance, nextTick, onMounted, watch } from 'vue'
	import { onLoad, onShow, onNavigationBarButtonTap, onReady, onBackPress, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
	import { getExpectoutByItemcode, getExpectinByItemcode, getBalanceByItemCode, getBasicItemByCode, getBalanceSummary } from '@/api/request2.js'
	import { goHome } from '@/common/basic.js'
	import itemInfo from '@/mycomponents/item/itemInfo.vue'
	import comBlankView from '@/mycomponents/common/comBlankView.vue'
	import winScanItem from '@/mycomponents/scan/winScanItem.vue'
	import winScanButton from '@/mycomponents/scan/winScanButton.vue'
	import comItemDetailCard from '@/pages/query/coms/comItemDetailCard.vue'
	import itemFilter from '@/mycomponents/item/itemFilter.vue'
	import comEmptyView from '@/mycomponents/common/comEmptyView.vue'

	const { proxy } = getCurrentInstance()

	const dataList = ref([])
	const tabList = ref(['汇总', '明细', '预计入', '预计出'])
	const tabIndex = ref(0)
	const itemDetail = ref(undefined)
	const itemCode = ref('')
	const balances = ref([])
	const loadingType = ref('nomore')
	const totalCount = ref(0)
	const locationCode = ref('')
	const inventoryStatus = ref('')
	const pageSize = ref(10)
	const pageNo = ref(1)
	const scanPopup = ref()
	const paging = ref()
	const comMessageRef = ref()
	const filter = ref()
	onNavigationBarButtonTap((e) => {
		if (e.index === 0) {
			goHome()
		} else if (e.index == 1) {
			filter.value.openFilter()
		}
	})
	onLoad((e)=>{
				uni.setNavigationBarTitle({
				  title: e.title
				})
			})
	onMounted(() => {
		openScanPopup()
	})
	onReachBottom(() => {
		console.log('底部')
		// 避免多次触发
		if (loadingType.value == 'loading' || loadingType.value == 'nomore') {
			return
		}
		getContentByTab(tabIndex.value, pageNo.value, pageSize.value, 'more')
	})
	onPullDownRefresh(() => {
		getContentByTab(tabIndex.value, pageNo.value, pageSize.value, 'refresh')
	})
	const openScanPopup = (val) => {
		scanPopup.value.openScanPopup()
	}
	const closeScanPopup = () => {
		scanPopup.value.closeScanPopup()
	}
	const getScanCode = (code) => {
		if (code == '') {
			showMessage('物料号不能为空')
			return
		}
		itemCode.value = ''
		getItemInfo(code)
	}
	const getItemInfo = (code) => {
		proxy.$modal.loading('正在查询物料信息­....')

		getBasicItemByCode(code)
			.then((res) => {
				uni.hideLoading()
				if (res.data.list.length > 0) {
					closeScanPopup()
					itemCode.value = res.data.list[0].code
					itemDetail.value = res.data.list[0]
					tabChange(0)
				} else {
					showMessage(`未查找到物料【${code}】`)
				}
			})
			.catch((error) => {
				uni.hideLoading()
				itemCode.value = ''
				showMessage(error)
			})
	}

	const getSummary = (pageNo, pageSize, type) => {
		uni.showLoading({
			title: "加载中...",
			mask: true
		});
		loadingType.value = "loading";
		if (type === "refresh") {
			pageNo.value = 1;
			dataList.value = [];
		}

		var filters = [];
		filters.push({
			column: "itemCode",
			action: "==",
			value: itemCode.value
		})
		if (locationCode.value) {
			filters.push({
				column: "locationCode",
				action: "==",
				value: locationCode.value
			})
		}

		if (inventoryStatus.value) {
			filters.push({
				column: "inventoryStatus",
				action: "in",
				value: inventoryStatus.value
			})
		}

		var params = {
			filters: filters,
			pageNo: pageNo.value,
			pageSize: pageSize
		}
		getBalanceByItemCode(params).then(res => {
			uni.hideLoading();

			if (type === "refresh") {
				uni.stopPullDownRefresh();
			}
			var list = res.data.list;
			totalCount.value = res.data.total
			loadingType.value = "loadmore";
			if (list == null || list.length == 0) {
				loadingType.value = "nomore";
				return;
			}
			list.forEach(item => {
				item.packingNumber = ""
			})

			dataList.value = type === "refresh" ? list : dataList.value..valueconcat(list);
			pageNo.value++;

		}).catch(error => {
			paging.value.complete(false);
			uni.hideLoading();
			showMessage(error);
		})
	}
	//明细
	const getDetailList = (pageNo, pageSize, type) => {
		uni.showLoading({
			title: "加载中...",
			mask: true
		});
		loadingType.value = "loading";
		if (type === "refresh") {
			pageNo.value = 1;
			dataList.value = [];
		}

		var filters = [];
		filters.push({
			column: "itemCode",
			action: "==",
			value: itemCode.value
		})
		if (locationCode.value) {
			filters.push({
				column: "locationCode",
				action: "==",
				value: locationCode.value
			})
		}

		if (inventoryStatus.value) {
			filters.push({
				column: "inventoryStatus",
				action: "in",
				value: inventoryStatus.value
			})
		}

		var params = {
			filters: filters,
			pageNo: pageNo.value,
			pageSize: pageSize
		}
		getBalanceByItemCode(params).then(res => {
			uni.hideLoading();

			if (type === "refresh") {
				uni.stopPullDownRefresh();
			}
			var list = res.data.list;
			totalCount.value = res.data.total
			loadingType.value = "loadmore";
			if (list == null || list.length == 0) {
				loadingType.value = "nomore";
				return;
			}
			dataList.value = type === "refresh" ? list : dataList.value.concat(list);
			pageNo.value++;

		}).catch(error => {
			uni.hideLoading();
			showMessage(error);
		})

	}

	const getContentByTab = (index, pageNo, pageSize, type) => {
		if (index === 0) getSummary(pageNo, pageSize, type);
		else if (index === 1) getDetailList(pageNo, pageSize, type);
		else if (index === 2) {
			getExpectin(pageNo, pageSize, type);
		} else if (index == 3) {
			getExpectout(pageNo, pageSize, type);
		}
	}
	//预计入
	const getExpectin = (pageNo, pageSize, type) {
		uni.showLoading({
			title: "加载中...",
			mask: true
		});


		loadingType.value = "loading";
		if (type === "refresh") {
			pageNo.value = 1;
			dataList.value = [];
		}

		var filters = [];
		filters.push({
			column: "itemCode",
			action: "==",
			value: itemCode.value
		})
		if (locationCode.value) {
			filters.push({
				column: "locationCode",
				action: "==",
				value: locationCode.value
			})
		}

		if (inventoryStatus.value) {
			filters.push({
				column: "inventoryStatus",
				action: "in",
				value: inventoryStatus.value
			})
		}

		var params = {
			filters: filters,
			pageNo: pageNo.value,
			pageSize: pageSize
		}
		getExpectinByItemcode(params).then(res => {
			uni.hideLoading();

			if (type === "refresh") {
				uni.stopPullDownRefresh();
			}
			var list = res.data.list;
			totalCount.value = res.data.total
			loadingType.value = "loadmore";
			if (list == null || list.length == 0) {
				loadingType.value = "nomore";
				return;
			}
			dataList.value = type === "refresh" ? list : dataList.value.concat(list);
			pageNo.value++;
		}).catch(error => {
			uni.hideLoading();
			showMessage(error);
		})

	}

	//预计出
	const getExpectout = (pageNo, pageSize, type) => {
		uni.showLoading({
			title: "加载中...",
			mask: true
		});

		loadingType.value = "loading";
		if (type === "refresh") {
			pageNo.value = 1;
			dataList.value = [];
		}

		var filters = [];
		filters.push({
			column: "itemCode",
			action: "==",
			value: itemCode.value
		})
		if (locationCode.value) {
			filters.push({
				column: "locationCode",
				action: "==",
				value: locationCode.value
			})
		}

		if (inventoryStatus.value) {
			filters.push({
				column: "inventoryStatus",
				action: "in",
				value: inventoryStatus.value
			})
		}

		var params = {
			filters: filters,
			pageNo: pageNo.value,
			pageSize: pageSize
		}
		getExpectoutByItemcode(params).then(res => {
			uni.hideLoading();
			if (type === "refresh") {
				uni.stopPullDownRefresh();
			}
			var list = res.data.list;
			totalCount.value = res.data.total
			loadingType.value = "loadmore";
			if (list == null || list.length == 0) {
				loadingType.value = "nomore";
				return;
			}
			dataList.value = type === "refresh" ? list : dataList.value.concat(list);
			pageNo.value++;

		}).catch(error => {
			uni.hideLoading();
			showMessage(error);
		})

	}

	const showMessage = (message) => {
		comMessageRef.value.showErrorMessage(message, res => {
			if (res) {
				afterCloseMessage()
			}
		});
	}
	const afterCloseMessage = () => {
		if (scanPopup.value != undefined) {
			scanPopup.value.getfocus();
		}
	}
	const tabChange = (index) => {
		tabIndex.value = index;
		getContentByTab(index, pageNo.value, pageSize.value, "refresh")
	}

	const confirm = (locationCodeParams, status) => {
		locationCode.value = locationCodeParams;
		if (status.length > 0) {
			var arrayItems = status.join(',')
			inventoryStatus.value = arrayItems
		} else {
			inventoryStatus.value = ""
		}
		tabChange(tabIndex.value)
	}
</script>

<style>
	page {
			height: 100%;
		}
		.top{
			width: 100%; 
			position: fixed; 
			/* #ifdef APP */
			top: 0rpx;
			/* #endif */
			
			/* #ifdef H5 */
			top: 80rpx;
			/* #endif */
			
			right: 0;
</style>