<template>
	<page-meta root-font-size="16px"></page-meta>
	<view class="">
		<win-blank-view @goScan='openScanPopup' v-if="itemCode==''"></win-blank-view>
		<view class="top_card" v-if="itemCode!=''">
			<com-item :itemdetail='itemDetail'></com-item>
		</view>
		<view class="tabs" v-if="itemCode!=''">
			<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">
				<!-- 汇总 -->
				<com-summary v-if="tabIndex == 0" :itemList="summarys" :summaryByLocation='false'></com-summary>
			</scroll-view>
			<!-- 明细 -->
			<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower"
				@scroll="scroll">
				<com-detail v-if="tabIndex == 1" :itemList="balances" :displayLocations="true"></com-detail>
			</scroll-view>
			<!-- 占用 -->
			<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower"
				@scroll="scroll">
				<com-occupied v-if="tabIndex == 2" :itemList="occupieds"></com-occupied>
			</scroll-view>
		</view>

		<win-scan-button @goScan='openScanPopup' v-if="itemCode!=''"></win-scan-button>
		<win-scan-by-code ref="scanPopup" title='ERP料号' @getScanCode='getScanCode'>
		</win-scan-by-code>

		<!-- com-message必须放在最下层 -->
		<com-message ref="comMessage" @afterClose="afterCloseMessage"></com-message>
	</view>
</template>

<script>
	import {
		getitems,
		summary,
		balances,
		expectIn
	} from '@/api/index.js';
	import {
		getItemTypeStyle,
		getItemStatusDesc,
		goHome,
		scanSuccessAudio,
		scanFailedAudio
	} from '@/common/basic.js';
	import comItem from '@/mycomponents/coms/query/comItem.vue'
	import comSummary from '@/mycomponents/coms/query/comSummary.vue'
	import comDetail from '@/mycomponents/coms/query/comDetail.vue'
	import comOccupied from '@/mycomponents/coms/query/comOccupied.vue'
	import winBlankView from '@/mycomponents/wincom/winBlankView.vue'
	import winScanByCode from '@/mycomponents/wincom/winScanByCode.vue'
	import winScanButton from '@/mycomponents/wincom/winScanButton.vue'
	import comMessage from '@/mycomponents/common/comMessage.vue'

	export default {
		name: 'parts',
		components: {
			comItem,
			comSummary,
			comDetail,
			comOccupied,
			winBlankView,
			winScanByCode,
			winScanButton,
			comMessage
		},
		filters: {
			statusStyle: function(val) {
				return getItemTypeStyle(val);
			},
			statusColor: function(val) {
				return getItemStatusDesc(val);
			},
		},
		data() {
			return {
				// 每页数据量
				pageSize: 1000,
				// 当前页
				pageCurrent: 1,
				tabIndex: 0,
				tabBars: [{
						name: '汇总',
						id: 'huizong'
					},
					{
						name: '明细',
						id: 'mingxi'
					},
					{
						name: '占用',
						id: 'zhanyong'
					}
				],
				itemDetail: {},
				itemCode: '',
				summarys: [],
				balances: [],
				occupieds: [],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
			};
		},
		onLoad() {
		
		},
		onReady(){
			this.openScanPopup();
		},
		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			}else if(e.index === 1){
				window.location.reload();
			}
		},
		mounted() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: "#5A7CF3 !important"
			})
		},
		methods: {
			openScanPopup() {
				this.$refs.scanPopup.openScanPopup();
			},
			closeScanPopup() {
				this.$refs.scanPopup.closeScanPopup();
			},
			getScanCode(code) {
				if (code == "") {
					this.showMessage('ERP料号不能为空')
					return;
				}
				this.itemCode = '';
				this.summarys = [];
				this.balances = [];
				this.occupieds = [];
				this.getItemInfo(code);
			},
			getItemInfo(code) {
				uni.showLoading({
					title: "正在查询ERP料号信息...",
					mask: true
				});

				setTimeout(() => {
					getitems(code).then((res) => {
						if (res != null) {
							scanSuccessAudio()
							this.closeScanPopup();
							this.itemCode = code;
							this.itemDetail = res;
							this.getContentByTab(this.tabIndex)
						} else {
							scanFailedAudio()
							this.showMessage('未查找到ERP料号【' + code + '】');
							this.itemCode = "";
						}
						uni.hideLoading();
					}).catch((err) => {
						scanFailedAudio()
						this.showMessage(err.message);
						this.itemCode = "";
						uni.hideLoading();
					})
				}, 100)
			},

			// 汇总
			getSummary() {
				let that = this;
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				let params = {
					itemCode: that.itemCode, //按零件号查询库存列表
				};
				summary(params).then(res => {
					console.log(res);
					that.summarys = res.items;
					uni.hideLoading();
				});
			},
			//明细
			getDetailList(value) {
				let that = this;
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				let params = {
					pageSize: that.pageSize,
					pageIndex: that.pageCurrent,
					itemCode: that.itemCode, //按零件号查询库存列表
					sortBy: 'packingCode asc'
				};
				balances(params).then(res => {
					this.balances = res.items;
					uni.hideLoading();
				});
			},
			//占用
			getoccupied() {
				let that = this;
				uni.showLoading({
					title: "加载中...",
					mask: true
				});
				let params = {
					pageSize: that.pageSize,
					pageIndex: that.pageCurrent,
					itemCode: that.itemCode, //按零件号查询库存列表
				};
				expectIn(params).then(res => {
					this.occupieds = res.items;
					uni.hideLoading();
				});
			},
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.tabIndex = index;
				this.getContentByTab(index);
				// if (index === 0) this.getSummary();
				// else if (index === 1) this.getDetailList();
				// else if (index === 2) this.getoccupied();
			},

			getContentByTab(index) {
				if (index === 0) this.getSummary();
				else if (index === 1) this.getDetailList();
				else if (index === 2) this.getoccupied();
			},

			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.showMessage(message);
			},
			afterCloseMessage() {
				this.$refs.scanPopup.getfocus();
			}
		}
	};
</script>

<style scoped lang="scss">
</style>
