<template>
	<view>
		<u-navbar back-text="返回" title="物料拣配/出库" :background="background"></u-navbar>
		<view v-show="loadding" style="width: 100%; height: 900rpx; display: flex; justify-content: center; align-items: center;">
			<u-loading mode="circle" :size="70" color="#00aaff"></u-loading>
		</view>
		<view class='content' v-show="!loadding">
			<u-select v-model="show" mode="single-column" :list="dlist" @confirm="confirm" confirm-text='确认选择' />
			<view style="display: flex; justify-content: space-between; margin-top: 10rpx;">
				<u-input v-model="form.plan" :border="true" style="background: #FFFFFF; margin-right: 10rpx;"></u-input>
				<u-button @click="handleSelectFormId">选单号</u-button>
			</view>
			<u-select v-show="mVisibleFlag" v-model="mshow" mode="single-column" :list="mlist" @confirm="materialConfirm" confirm-text='确认选择' />
			<view v-show="mVisibleFlag" style="display: flex; justify-content: space-between; margin-top: 10rpx;">
				<u-input v-model="form.material" :border="true" style="background: #FFFFFF; margin-right: 10rpx;"></u-input>
				<u-button @click="handleSelectMaterial">选物料</u-button>
			</view>
			<u-line-progress style="margin-top: 30rpx;" active-color="#32CD32" :percent="progress"></u-line-progress>
			<u-card style="border: 1rpx solid #0081FF;" :show-head="false" :full="true" :body-style="{height: '100rpx'}" >
				<view class="card-body" slot="body">
					<u-row justify="between">
						<u-col span="6">
							<view class="info-label">总数量</view>
							<view>{{ cntInfo.FGToatlCnt }}</view>
						</u-col>
						<u-col span="6">
							<view class="info-label">已检数量</view>
							<view>{{ cntInfo.FGCodePickedCnt }}</view>
						</u-col>
					</u-row>
				</view>
			</u-card>
			<view style="display: flex; justify-content: space-between; align-items: center;">
				<view style="width: 90rpx;">BOX ID</view>
				<u-input v-model="form.currentBox" :border="true" style="background: #FFFFFF; margin: 10rpx 10rpx 0 10rpx;" @input='handlePalletInput'></u-input>
			</view>
			<u-card style="border: 1rpx solid #0081FF;" :show-head="false" :full="true" :body-style="{height: '150rpx'}" >
				<view class="card-body" slot="body">
					<u-row gutter="8" justify="between">
						<u-col span="12">
							<view class="info-label">BOX ID</view><view>{{ lastBox['box_id'] || "--" }}</view>
						</u-col>
						<u-col span="12">
							<view class="info-label">数量</view>
							<view>{{ lastBox['cnt'] || "0" }}</view>
						</u-col>
					</u-row>
				</view>
			</u-card>
			<u-table
				class="main-table"
			>
				<u-tr class="u-tr">
					<u-th class="u-th">BOX ID</u-th>
					<u-th class="u-th">领料单号</u-th>
					<u-th class="u-th" width="140rpx">物料号</u-th>
					<u-th class="u-th" width="140rpx">数量</u-th>
				</u-tr>
				<u-tr class="u-tr" v-for="(item,index) in datasource" :key="index">
					<u-td class="u-td">{{ item.box_id }}</u-td>
					<u-td class="u-td">{{ item.export_no }}</u-td>
					<u-td class="u-td" width="140rpx">{{ item.material_code }}</u-td>
					<u-td class="u-td" width="140rpx">{{ item.cnt }}</u-td>
				</u-tr>
			</u-table>
			<view v-show="progress===100" style="position: fixed; bottom: 0; width: 100%; margin-left: -18rpx; padding: 10rpx;">
				<u-button type="primary" @click="handleMaterialPick">出库</u-button>
			</view>
		</view>
		<u-toast ref="uBankOutToast" />
	</view>
</template>

<script>
	import {MaterialExportNoListData, MaterialExportCntData, QueryMaterialData, MaterialPick, MaterialPickCnt, MaterialListByExportNo} from '../../../common/api.js'
	let timer = null;
	export default {
		data() {
			return {
				form: {
					plan: '',
					material: '',
					currentBox: ''
				},
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				loadding: true,
				show: false,
				mshow: false,
				datasource: [],
				sourceList: [],
				dlist: [],
				mlist: [],
				mVisibleFlag: false,
				lastBox: {},
				progress: 0,
				cntInfo: {
					totalCnt: 0,
					FGToatlCnt: 0,
					FGPickedCnt: 0,
					FGCodePickedCnt: 0
				}
			}
		},
		mounted() {		
			this.$nextTick(function(){
				this.loadding = false
				// timer = setInterval(() => {
				// 	uni.hideKeyboard()
				// }, 10)
			})
		},
		destroyed() {
			if(timer) {
				clearInterval(timer)
			}
		},
		methods: {
			confirm(data){
				if(this.datasource.length === 0 || this.datasource[0]['export_no'] === data[0]['value']){
					this.form.plan = data[0]['value']
					this.form.material = ''
					this.cntInfo.FGCodePickedCnt = 0
					this.mVisibleFlag = true
					MaterialListByExportNo({export_no: this.form.plan}).then(res => {
						if(res && res['mesg'] === 'success') {
							this.mlist = res['res']
						}
					})
					// MaterialExportCntData({export_no: data[0]['value'], material_code: data[1]['value']}).then(res => {
					// 	if(res && res['mesg'] === 'success') {
					// 		const result = res['res']
					// 		this.cntInfo.totalCnt = result['fgcnt']
					// 		this.cntInfo.FGToatlCnt = result['fgcodecnt']
					// 		this.datasource.forEach(d => {
					// 			if(d['export_no'] === data[0]['value'] && d['material_code'] === data[1]['value']){
					// 				this.cntInfo.FGCodePickedCnt += parseInt(d['cnt'])
					// 			}
					// 		})
					// 	}else{
					// 		this.showToast("获取数据失败"+res['mesg'], 'error')
					// 	}
					// })
				}else{
					this.showToast("领料单："+this.datasource[0]['export_no']+'未检完', 'error')
				}
			},
			materialConfirm(data) {
				this.form.material = data[0]['value']
				this.cntInfo.FGCodePickedCnt = 0
				MaterialExportCntData({export_no: this.form.plan, material_code: this.form.material}).then(res => {
					if(res && res['mesg'] === 'success') {
						const result = res['res']
						this.cntInfo.totalCnt = result['materialcnt']===''?0:result['materialcnt']
						this.cntInfo.FGToatlCnt = result['materialcodecnt']===''?0:result['materialcodecnt']
						this.datasource.forEach(d => {
							if(d['export_no'] === this.form.plan && d['material_code'] === this.form.material){
								this.cntInfo.FGCodePickedCnt += parseInt(d['cnt'])
							}
						})
					}else{
						this.showToast("获取数据失败"+res['mesg'], 'error')
					}
				})
			},
			showToast(text, type) {
				this.$refs.uBankOutToast.show({
					title: text,
					type: type,
					duration: 4000,
					position: "bottom"
				})
			},
			handlePalletInput(value) {
				if(this.form.plan === ''){
					this.showToast("未选择领料单号", 'error')
				}else{
					if(value.length > 6){
						const list = this.datasource.filter(d => {return d['box_id'] === value})
						if(list.length > 0){
							this.showToast("该BOX已录入", 'error')
						}else{
							MaterialPickCnt({box_id: value}).then(res => {
								if(res && res['mesg'] === 'success') {
									const result = res['res']
									const p_c = parseInt(result['cnt'])
									
									if((this.cntInfo.FGCodePickedCnt + p_c) <= this.cntInfo.FGToatlCnt){
										this.cntInfo.FGPickedCnt += p_c
										this.cntInfo.FGCodePickedCnt += p_c
										this.progress = parseFloat(((this.cntInfo.FGPickedCnt/this.cntInfo.totalCnt) * 100).toFixed(2))
										this.lastBox = result
										result['export_no'] = this.form.plan
										result['material_code'] = this.form.material
										this.datasource.push(result)
									}else{
										this.showToast("超出所需数量，无法添加", 'error')
									}
								}else{
									this.showToast("获取数据失败"+res['mesg'], 'error')
								}
								setTimeout(() => {
									this.form.currentBox = ''
								}, 500)
							})
						}
					}
				}
				setTimeout(() => {
					this.form.currentBox = ''
				}, 500)
			},
			handleMaterialPick() {
				MaterialPick({box_list: JSON.stringify(this.datasource)}).then(res => {
					if(res && res['mesg'] === 'success') {
						this.showToast("出库成功", 'success')
						this.datasource = []
						this.cntInfo.totalCnt = 0
						this.cntInfo.FGToatlCnt = 0
						this.cntInfo.FGPickedCnt = 0
						this.cntInfo.FGCodePickedCnt = 0
						this.form.plan = ''
						this.form.material = ''
						this.form.currentBox = ''
						this.lastBox = {}
						this.progress = 0
					}else{
						this.showToast("出库失败", 'error')
					}
				})
			},
			handleSelectFormId() {
				if(this.form.plan === ''){
					this.showToast("为保证数据量可控，请输入单号前缀", 'warning')
				}else{
					MaterialExportNoListData({export_no: this.form.plan}).then(res => {
						if(res && res['mesg'] === 'success') {
							this.dlist = res['res']
							// this.dlist = this.sourceList.filter(sl => {return sl['value'].toLowerCase().indexOf(this.form.plan.toLowerCase()) >= 0})
							if(this.dlist.length > 0){
								this.show = true
							}else{
								this.showToast("未查找到此前缀单号", 'warning')
							}
						}else{
							this.showToast("获取数据失败"+JSON.stringify(res), 'error')
						}
					})
				}
			},
			handleSelectMaterial() {
				this.mshow = true
			}
		}
	}
</script>

<style lang="scss" scoped>
.content {
	margin: 5rpx 18rpx;
}

.card-body {
	::v-deep .u-col {
		margin-bottom: 16rpx;
		
		view {
			display: inline-block;
		}
		
		view+view {
			margin-left: 20rpx;
			color: #068bff;
		}
	}
}

.main-table {
	::v-deep .u-th {
		background: #0081FF !important;
		color: #ffffff;
	}
	
	::v-deep .u-td{
		overflow: hidden;
	}
}

.info-label {
	width: 160rpx;
}
</style>
