<template>
	<!-- <page-meta root-font-size="18px"></page-meta> -->
	<view class="">
		<com-blank-view @goScan='openScanPopup' v-if="locationCode==''"></com-blank-view>
		<view class="top_card">
			<location-info :locationDetail='locationDetail' v-if="locationCode"></location-info>
		</view>

		<view class="tabs" v-if="locationCode" style="height: 100%;">
		<view class='split_line'></view>
			<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false">
				<view class="title_tab">
					<view v-for="(tab, index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id"
						:data-current="index" @click="ontabtap">
						<text class="uni-tab-item-title"
							:class="tabIndex == index ? 'uni-tab-item-title-active' : ''">{{ tab.name }}</text>
					</view>
				</view>
			</scroll-view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower"
				@scroll="scroll">
				<view v-if="tabIndex == 0" v-for="(item, index) in summarysList">
					<comLocationDetailCard :isShowPack="false" :dataContent="item" style='margin: 10rpx;'>
					</comLocationDetailCard>
				</view>
			</scroll-view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower"
				@scroll="scroll">
				<view v-if="tabIndex == 1" v-for="(item, index) in detailList">
					<comLocationDetailCard :dataContent="item" style='margin: 10rpx;'></comLocationDetailCard>
				</view>
			</scroll-view>
			<!-- 预计入 -->
			<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower"
				@scroll="scroll">

				<view v-if="tabIndex == 2" v-for="(item, index) in detailList">
					<comLocationDetailCard :dataContent="item" style='margin: 10rpx;'></comLocationDetailCard>
				</view>
			</scroll-view>
			<!-- 预计出 -->
			<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower"
				@scroll="scroll">
				<view v-if="tabIndex == 3" v-for="(item, index) in detailList">
					<comLocationDetailCard :dataContent="item" style='margin: 10rpx;'></comLocationDetailCard>
				</view>
			</scroll-view>
		</view>
		<win-scan-button @goScan='openScanPopup' v-if="locationCode!=''"></win-scan-button>
		<winScanLocation ref="scanPopup" title="库位代码" @getLocation='getScanCode'></winScanLocation>

		<show-modal ref="modal"></show-modal>
		<comMessage ref="comMessage"></comMessage>

	</view>
</template>

<script>
	import {
		getBalanceByLocationcode,
		getBalanceByLocationcodeGroup
	} from '@/api/request2.js';

	import {
		calc
	} from '@/common/calc.js';

	import {
		maxPageSize,
		goHome
	} from '@/common/basic.js';

	import locationInfo from '@/mycomponents/location/locationInfo.vue'
	import comBlankView from '@/mycomponents/common/comBlankView.vue'
	import winScanButton from '@/mycomponents/scan/winScanButton.vue'

	import comLocationDetailCard from '@/pages/query/coms/comLocationDetailCard.vue'
	import winScanLocation from '@/mycomponents/scan/winScanLocation.vue'


	export default {
		name: 'location',
		components: {
			locationInfo,
			comBlankView,
			winScanButton,
			comLocationDetailCard,
			winScanLocation
		},
		data() {
			return {
				locationDetail: {},
				locationCode: '',
				summarys: [],
				balances: [],
				dataIn: [],
				dataOut: [],
				// 每页数据量
				pageSize: 1000,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				tabIndex: 0,
				tabBars: [{
						name: '汇总',
						id: 'huizong'
					},
					{
						name: '明细',
						id: 'mingxi'
					},
					// {
					// 	name: '预计入',
					// 	id: 'in'
					// },
					// {
					// 	name: '预计出',
					// 	id: 'out'
					// }
				],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				detailList: [],
				summarysList: []
			};
		},
		onLoad() {},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			}
		},
		filters: {

		},
		mounted() {
			this.openScanPopup()
		},
		methods: {
			openScanPopup() {
				this.$refs.scanPopup.openScanPopup();
			},
			closeScanPopup() {
				this.$refs.scanPopup.closeScanPopup();
			},
			getScanCode(location, code) {
				this.locationCode = '';
				this.summarys = [];
				this.balances = [];
				this.locationCode = code;
				this.locationDetail = location
				this.getContentByTab(this.tabIndex);
			},

			getSummary() {
				let that = this;
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				getBalanceByLocationcodeGroup(this.locationCode).then(res => {
					uni.hideLoading();
					if (res.data.list.length > 0) {
						this.summarysList = this.setShowList(res.data.list)
					} else {
						this.showMessage('未查找到库位【' + this.locationCode + '】');
					}
				}).catch(error => {
					uni.hideLoading();
					this.showMessage(error);
				})

			},

			getDetailList() {
				let that = this;
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				getBalanceByLocationcode(this.locationCode).then(res => {
					uni.hideLoading();
					if (res.data.total > 0) {
						this.detailList = this.setShowList(res.data.list)
					} else {
						this.showMessage('未查找到库位【' + this.locationCode + '】');
					}
				}).catch(error => {
					uni.hideLoading();
					this.showMessage(error);
				})
			},

			setShowList(list) {
				var resultlist = [];
				list.forEach(res => {
					var temp = resultlist.find(res1 =>
						res1.itemCode == res.itemCode)

					if (temp == undefined) {
						var data = {
							itemCode: res.itemCode,
							qty: Number(res.qty),
							uom: res.uom,
							list: []
						}
						var item = {
							packingNumber: res.packingNumber,
							batch: res.batch,
							uom: res.uom,
							qty: Number(res.qty),
							inventoryStatus: res.inventoryStatus,
						}
						data.list.push(item)
						resultlist.push(data)
					} else {
						temp.qty = calc.add(temp.qty,res.qty)
						var item = {
							packingNumber: res.packingNumber,
							batch: res.batch,
							uom: res.uom,
							qty: Number(res.qty),
							inventoryStatus: res.inventoryStatus,
						}
						temp.list.push(item)
					}
				})
				return resultlist;
			},
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.tabIndex = index;
				this.getContentByTab(this.tabIndex);
			},

			getContentByTab(index) {
				if (index === 0) {
					this.getSummary();
				} else if (index === 1) this.getDetailList()
				else if (index === 2) {
					this.dataIn = this.balances;
				} else if (index == 3) {
					this.dataOut = this.balances;
				}
			},

			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop;
			},
			showMessage(message) {
				this.$refs.comMessage.showWarningMessage(message, res => {
					if (res) {
						this.afterCloseMessage()
					}
				});
			},
			afterCloseMessage() {
				if (this.$refs.scanPopup != undefined) {
					this.$refs.scanPopup.getfocus();
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	page {
		height: 100%;
	}
</style>
