<!-- 基于z-paging封装个性化分页组件演示(vue) -->
<template>
	<view class="uni-flex" style="flex-direction: column">
		<itemFilter ref="filter" @onConfirmClick="confirm">
		</itemFilter>
		<view ref="topContent" class="top" >
			<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" :current="tabIndex"  :list="tabList" @change="tabChange" />
		</view>

		<view style="width:100%;" :style="{'margin-top':topHeight+'px'}">
			<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="item.isShowPack"
					:isShowWarehouseCode="item.isShowWarehouseCode"
					:isShowJobNumber="item.isShowJobNumber"
					:isShowBusinessType="item.isShowBusinessType"
					:isShowTransactionType="item.isShowTransactionType"
					:isShowInventoryAction="item.isShowInventoryAction"
					:isShowRecordNumber="item.isShowRecordNumber"
					:isShowNumber="item.isShowNumber"
					:isShowWorker="item.isShowWorker"
					 :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>
		<comMessage ref="comMessage"></comMessage>
	</view>
</template>

<script>
	import {
		getExpectoutByItemcode,
		getExpectinByItemcode,
		getBalanceByItemCode,
		getBasicItemByCode,
		getTransaction
	} 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'
	import { nextTick } from 'vue';

	export default {
		components: {
			itemInfo,
			comBlankView,
			winScanItem,
			winScanButton,
			comItemDetailCard,
			itemFilter,
			comEmptyView
		},
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				tabList: ['库存余额', '预计入', '预计出', '库存事务'],
				tabIndex: 0,
				itemDetail: undefined,
				itemCode: '',
				balances: [],
				loadingType: "nomore",
				totalCount: 0,
				locationCode: "",
				inventoryStatus: "",
				pageSize:10,
				topHeight:115
			}
		},
		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			} else if (e.index == 1) {
				this.$refs.filter.openFilter();
			}
		},

		onReachBottom() {
			console.log("底部")
			//避免多次触发
			if (this.loadingType == 'loading' || this.loadingType == 'nomore') {
				return;
			}
			this.getContentByTab(this.tabIndex, this.pageNo, this.pageSize, "more");

		},
		onLoad(option){
			uni.setNavigationBarTitle({
			  title: option.title
			})
		},
		mounted() {
			this.openScanPopup();
		},
		onPullDownRefresh() {
			this.getContentByTab(this.tabIndex, this.pageNo, this.pageSize, "refresh");
		},
		methods: {
			openScanPopup() {
				this.$refs.scanPopup.openScanPopup();
			},
			closeScanPopup() {
				this.$refs.scanPopup.closeScanPopup();
			},
			getScanCode(code) {
				if (code == "") {
					this.showMessage('物料号不能为空')
					return;
				}
				this.itemCode = '';
				this.getItemInfo(code);
			},
			getItemInfo(code) {
				uni.showLoading({
					title: "正在查询物料信息...",
					mask: true
				});

				getBasicItemByCode(code).then(res => {
					uni.hideLoading();
					if (res.data.list.length > 0) {
						this.closeScanPopup();
						this.itemCode = res.data.list[0].code;
						this.itemDetail = res.data.list[0];
						nextTick(()=>{
							this.topHeight = this.$refs.topContent.$el.clientHeight
							
							console.log('topContent',this.$refs.topContent)
						})
						this.tabIndex=0;
						this.tabChange(0)
					} else {
						this.showMessage('未查找到物料【' + code + '】');
					}

				}).catch(error => {
					uni.hideLoading();
					this.itemCode = "";
					this.showMessage(error);
				})
			},

			// 库存余额
			getBalanceItem(pageNo, pageSize, type) {
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				this.loadingType = "loading";
				if (type === "refresh") {
					this.pageNo = 1;
					this.dataList = [];
				}

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

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

				var params = {
					filters: filters,
					pageNo: this.pageNo,
					pageSize: pageSize,
					sorts:[{sort:"createTime",by:"ASC"},{sort:"locationCode",by:"ASC"} ,{sort:"id",by:"DESC"}],
				}
				getBalanceByItemCode(params).then(res => {
					uni.hideLoading();

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

				}).catch(error => {
					uni.hideLoading();
					this.showMessage(error);
				})
			},
			//库存事务
			getTransactionByItemCode(pageNo, pageSize, type) {
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				this.loadingType = "loading";
				if (type === "refresh") {
					this.pageNo = 1;
					this.dataList = [];
				}

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

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

				var params = {
					filters: filters,
					pageNo: this.pageNo,
					pageSize: pageSize,
					sorts:[{sort:"createTime",by:"DESC"},{sort:"locationCode",by:"ASC"} ,{sort:"id",by:"DESC"}],
				}
				getTransaction(params).then(res => {
					uni.hideLoading();

					if (type === "refresh") {
						uni.stopPullDownRefresh();
					}
					var list = res.data.list;
					list.forEach(item=>{
						item.isShowPack=true
						item.isShowWarehouseCode=true
						item.isShowBusinessType=true
						item.isShowTransactionType =true
						item.isShowInventoryAction=true
						item.isShowRecordNumber=true
						item.isShowNumber=true
						item.isShowWorker=true
					})
					this.totalCount = res.data.total
					this.loadingType = "loadmore";
					if (list == null || list.length == 0) {
						this.loadingType = "nomore";
						return;
					}
					this.dataList = type === "refresh" ? list : this.dataList.concat(list);
					this.pageNo++;

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

			},

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


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

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

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

				var params = {
					filters: filters,
					pageNo: this.pageNo,
					pageSize: pageSize,
					sorts:[{sort:"createTime",by:"ASC"},{sort:"locationCode",by:"ASC"} ,{sort:"id",by:"DESC"}],
				}
				getExpectinByItemcode(params).then(res => {
					uni.hideLoading();

					if (type === "refresh") {
						uni.stopPullDownRefresh();
					}
					var list = res.data.list;
					list.forEach(item=>{
						item.isShowPack=false
						item.isShowJobNumber=true
						item.isShowBusinessType=true
						item.isShowWarehouseCode=true
					})
					this.totalCount = res.data.total
					this.loadingType = "loadmore";
					if (list == null || list.length == 0) {
						this.loadingType = "nomore";
						return;
					}
					this.dataList = type === "refresh" ? list : this.dataList.concat(list);
					this.pageNo++;
				}).catch(error => {
					uni.hideLoading();
					this.showMessage(error);
				})

			},

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

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

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

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

				var params = {
					filters: filters,
					pageNo: this.pageNo,
					pageSize: pageSize,
					sorts:[{sort:"createTime",by:"ASC"},{sort:"locationCode",by:"ASC"} ,{sort:"id",by:"DESC"}],
				}
				getExpectoutByItemcode(params).then(res => {
					uni.hideLoading();
					if (type === "refresh") {
						uni.stopPullDownRefresh();
					}
					var list = res.data.list;
					list.forEach(item=>{
						item.isShowPack=true
						item.isShowJobNumber=true
						item.isShowBusinessType=true
						item.isShowWarehouseCode=true
					})
					this.totalCount = res.data.total
					this.loadingType = "loadmore";
					if (list == null || list.length == 0) {
						this.loadingType = "nomore";
						return;
					}
					this.dataList = type === "refresh" ? list : this.dataList.concat(list);
					this.pageNo++;

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

			},

			showMessage(message) {
				this.$refs.comMessage.showErrorMessage(message, res => {
					if (res) {
						this.afterCloseMessage()
					}
				});
			},
			afterCloseMessage() {
				if (this.$refs.scanPopup) {
					this.$refs.scanPopup.getfocus();
				}
			},
			tabChange(index) {
				this.tabIndex = index;
				this.getContentByTab(index, this.pageNo, this.pageSize, "refresh")
			},

			confirm(locationCode, status) {
				if(this.itemCode){
					this.locationCode = locationCode;
					if(status.length>0){
						var arrayItems = status.join(',')
						this.inventoryStatus = arrayItems
					}else {
						this.inventoryStatus=""
					}
					this.tabChange(this.tabIndex) 
				}else {
					this.$refs.filter.clearData()
					this.showMessage("请先扫描物料")
				}
			}
		}
	}
</script>

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