<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="invSelectShow" :list="invSelectlist" @confirm="invSelectConfirm" mode="single-column" confirm-text='确认选择'/>
			<view style="display: flex; justify-content: space-between; margin-top: 10rpx;">
				<u-input v-model="form.inventoryNo" :border="true" style="background: #FFFFFF; margin-right: 10rpx;"></u-input>
				<u-button @click="invBtnClick">选单号</u-button>
			</view>
			<u-select v-model="fgSelectShow" :list="fgSelectlist" @confirm="fgSelectConfirm" mode="single-column" confirm-text='确认选择'/>
			<view style="display: flex; justify-content: space-between; margin-top: 10rpx;">
				<u-input v-model="form.fgcode" :border="true" style="background: #FFFFFF; margin-right: 10rpx;"></u-input>
				<u-button @click="fgBtnClick">fgcode</u-button>
			</view>
			<view style="display: flex; justify-content: space-between; align-items: center;">
				<view style="width: 110rpx;">Pallet id</view>
				<u-input v-model="form.palletId" :border="true" @input="handlePalletIn" style="background: #FFFFFF; margin: 10rpx 10rpx 0 10rpx;" :focus="focus"></u-input>
			</view>
			<u-card style="border: 1rpx solid #0081FF;" :show-head="false" :full="true" :body-style="{height: '220rpx'}" >
				<view class="card-body" slot="body">
					<u-row gutter="8" justify="between">
						<u-col span="12">
							<view class="info-label">Pallet id</view><view>{{ lastPallet['pallet_id'] || "--" }}</view>
						</u-col>
						<u-col span="12">
							<view class="info-label">储位</view><view>{{ lastPallet['loc'] || "--" }}</view>
						</u-col>
						<u-col span="12">
							<view class="info-label">数量</view><view>{{ lastPallet['picked_cnt'] || "--" }}</view>
						</u-col>
					</u-row>
				</view>
			</u-card>
			<u-table
				class="main-table"
			>
				<u-tr class="u-tr">
					<u-th class="u-th">Pallet id</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 datasource" :key="index">
					<u-td class="u-td">{{ item.pallet_id }}</u-td>
					<u-td class="u-td">{{ item.loc }}</u-td>
					<u-td class="u-td" width="140rpx">{{ item.picked_cnt }}</u-td>
				</u-tr>
			</u-table>
		</view>
		<view>
			<u-toast ref="toast"></u-toast>
		</view>
	</view>
</template>

<script>
	import {FGInventoryNoListData,FGInventoryQueryPltData,FGInventory,FGListByInventorytNo} from '../../../common/api.js'
	export default {
		data() {
			return {
				invSelectShow: false,
				invSelectlist: [],
				fgSelectShow: false,
				fgSelectlist: [],
				
				form: {
					inventoryNo: '',
					fgcode: '',
					palletId: ''
				},
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				loadding: true,
				datasource: [],
				lastPallet: {},
				focus: false
			}
		},
		mounted() {
			this.$nextTick(function(){
				this.loadding = false
			})
		},
		watch: {
			inventoryName(newVal) {
				if(newVal.length == 0) {
					this.form.fgcode = ''
				}
			}
		},
		computed: {
			inventoryName() {
				return this.form.inventoryNo
			}
		},
		methods: {
			showToast(text,type) {
				this.$refs.toast.show({
					title: text,
					type: type,
					duration: 5000,
					position: 'center'
				})
			},
			invSelectConfirm(data){
				this.form.inventoryNo = data[0]['value']
				//this.form.fgcode = data[0]['label']
				this.form.palletId = ''
			},
			fgSelectConfirm(data) {
				this.form.fgcode = data[0]['value']
				this.form.palletId = ''
				this.focus = true
			},
			invBtnClick() {
				if(this.form.inventoryNo === '') {
					this.showToast('为保证数据量可控，请输入单号前缀','warning')
				} else {
					FGInventoryNoListData({inventory_no: this.form.inventoryNo}).then(res => {
						if(res['code'] === '300') {
							this.showToast('盘点单号查询失败: ' + res['reason'],'error')
						} 
						if (res['code'] === '200') {
							this.invSelectlist = res['res']
							this.invSelectShow = true
						}
					})
				}
			},
			fgBtnClick() {
				if(this.form.inventoryNo === '' || this.form.inventoryNo.length <= 3) {
					this.showToast('请先选择盘点单号','warning')
					return
				}
				FGListByInventorytNo({inventory_no: this.form.inventoryNo}).then(res => {
					if(res['code'] === '300') {
						this.showToast(inventory_no + ' : ' + res['reason'],'error')
					}
					if(res['code'] === '200') {
						this.fgSelectlist = res['res']
						this.fgSelectShow = true
					}
				})
				this.focus = false
			},
			handlePalletIn(data) {
				if(this.form.inventoryNo === '' || this.form.fgcode === '') {
					this.showToast('未选择盘点单号或fgcode','error')
					this.focus = false
				} else {
					FGInventoryQueryPltData({pallet_id: data,fgcode: this.form.fgcode}).then( res => {
						if(res['code'] === '300') {
							this.showToast(data + ' : ' + res['reason'],'error')
							this.form.palletId = ''
							this.focus = true
						}
						if(res['code'] === '200') {
							this.lastPallet = res['res']
							let palletList = [
								{
									plt_id: data,
									inventory_no: this.form.inventoryNo
								}
							]
							console.log(palletList)
							FGInventory({pallet_list: JSON.stringify(palletList)}).then(res => {
								if(res['code'] === '300') {
									console.log(res)
									this.showToast(data + ' : ' + res['reason'],'error')
								}
								if(res['code'] === '200') {
									this.showToast('记录成功','success')
									this.datasource.push(this.lastPallet)
								}
								this.form.palletId = ''
								this.focus = 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;
	}
}

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