<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" style="width: 26%;">选单号</u-button>
			</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">已出箱数</view>
							<view>{{ cntInfo.materialboxoutcnt }}</view>
						</u-col>
						<u-col :span="12">
							<view class="info-label">已Check箱数</view>
							<view>{{ cntInfo.materialboxcheckcnt }}</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" :focus="focus" :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['material_code'] || "--" }}</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" width="220rpx">领料单号</u-th>
					<u-th class="u-th" >物料号</u-th>
					<!-- <u-th class="u-th" width="140rpx">数量</u-th> -->
				</u-tr>
				<u-tr class="u-tr" v-for="(item,index) in tableDisplaySource" :key="index">
					<u-td class="u-td">{{ item.box_id }}</u-td>
					<u-td class="u-td" width="220rpx">{{ item.export_no }}</u-td>
					<u-td class="u-td" >{{ item.material_code }}</u-td>
					<!-- <u-td class="u-td" width="140rpx">{{ item.cnt }}</u-td> -->
				</u-tr>
			</u-table>
		</view>
		<u-toast ref="uBankOutToast" />
	</view>
</template>

<script>
	import {
		MaterialExportNoListData,
		MaterialListByExportNo,
		MaterialExportListByExportnNo,
		MaterialExportBoxIno
	} from '../../../common/api.js'
	let timer = null;
	export default {
		data() {
			return {
				form: {
					plan: '',
					material: '',
					currentBox: '',
					//超领单号
					additionalId: '',
				},
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				loadding: true,
				show: false,
				mshow: false,
				datasource: [],
				tableDisplaySource: [],
				sourceList: [],
				dlist: [],
				mlist: [],
				mVisibleFlag: false,
				lastBox: {},
				progress: 0,
				cntInfo: {
					materialrequstcnt: 0,
					materialoutcnt: 0,
					materialboxoutcnt: 0,
					materialboxcheckcnt: 0
				},
				exeFlag: false,
				showModal: false,
				modalContent: '',
				resReply: {},
				focus: false,
				additionalFlag: false,
				additionalShow: false,
				additionalList: [],
				additionalModal: false,
				additionalContent: '',
				isAdditional: false,
				username: ''
			}
		},
		mounted() {
			this.$nextTick(function() {
				this.loadding = false
				// timer = setInterval(() => {
				// 	uni.hideKeyboard()
				// }, 10)
			})
			this.username = uni.getStorageSync('username')
		},
		destroyed() {
			if (timer) {
				clearInterval(timer)
			}
		},
		watch: {
			additionalName(newVal) {
				if (newVal === '') {
					this.cntInfo.materialAdditionalCnt = 0
				}
			},
			planName() {
				this.additionalFlag = false
				this.isAdditional = false
			}
		},
		computed: {
			additionalName() {
				return this.form.additionalId
			},
			planName() {
				return this.form.plan
			}
		},
		methods: {
			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("获取数据失败: " + res['reason'], 'error')
						}
					})
				}
			},
			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.materialoutcnt = 0
					this.mVisibleFlag = true
					if (this.form.plan === '') {
						this.showToast("为保证数据量可控，请输入单号前缀", 'warning')
					} else{
						MaterialExportListByExportnNo({
							expNo : this.form.plan
						}).then(res => {
							if(res && res['mesg'] === 'success'){
								this.cntInfo.materialboxoutcnt = res.out_cnt
								this.cntInfo.materialboxcheckcnt = res.check_cnt
								
								this.tableDisplaySource = res.res
								
							}else{
								
							}
						})
					}
				}
			},
			GetOutBoxCntByExportNo(exportNo){
				if (this.form.plan === '') {
					this.showToast("为保证数据量可控，请输入单号前缀", 'warning')
				} else{
					MaterialExportListByExportnNo({
						expNo : this.form.plan
					}).then(res => {
						if(res && res['mesg'] === 'success'){
							this.cntInfo.materialboxoutcnt = res.out_cnt
							this.cntInfo.materialboxcheckcnt = res.check_cnt
							
							this.tableDisplaySource = res.res
							
						}else{
							this.showToast(res.reason, 'warning')
						}
					})
				}
				
			},
			handlePalletInput(){
				if(this.form.currentBox === ''){
					return
					//this.showToast("箱号不可为空", 'warning')
				}else{
					MaterialExportBoxIno({
						box_id: this.form.currentBox,
						export_no: this.form.plan
					}).then(res=>{
						if(res && res['mesg'] === 'success'){
							//console.log(res)
							this.lastBox['box_id'] = res.res.box_id
							this.lastBox['material_code'] = res.res.material_code
							this.focus = false
							
							MaterialExportListByExportnNo({
								expNo : this.form.plan
							}).then(res => {
								if(res && res['mesg'] === 'success'){
									this.cntInfo.materialboxoutcnt = res.out_cnt
									this.cntInfo.materialboxcheckcnt = res.check_cnt
									
									this.tableDisplaySource = res.res
									
								}else{
									this.showToast(res.reason, 'warning')
								}
							})
							
						}else{
							this.showToast(res.reason, 'warning')
						}
					})
				}
			},
			showToast(text, type) {
				this.$refs.uBankOutToast.show({
					title: text,
					type: type,
					duration: 5000,
					position: "center"
				})
			},
		}
	}
</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: 180rpx;
	}
</style>
