<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">
			<view style="display: flex; justify-content: space-between; align-items: center;">
				<view style="width: 90rpx;">储位</view>
				<u-input v-model="form.position" :focus="!focus" :border="true" style="background: #FFFFFF; margin: 10rpx 10rpx 0 10rpx;" @input="handlePositionScan"></u-input>
			</view>
			<view style="display: flex; justify-content: space-between; align-items: center;">
				<view style="width: 90rpx;">Box ID</view>
				<u-input v-model="form.box_id" :focus="focus" :border="true" style="background: #FFFFFF; margin: 10rpx 10rpx 0 10rpx;" @input="handleBoxScan"></u-input>
			</view>
			<u-card style="border: 1rpx solid #0081FF;" :show-head="false" :full="true" :body-style="{height: '200rpx'}" >
				<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">储位 ID</view><view>{{ lastBox['position'] || "--" }}</view>
						</u-col>
						<u-col span="12">
							<view class="info-label">上架时间</view><view>{{ lastBox['in_time'] || "--" }}</view>
						</u-col>
					</u-row>
				</view>
			</u-card>
			<u-table
				class="main-table"
			>
				<u-tr class="u-tr">
					<u-th class="u-th" width="240rpx">BOX ID</u-th>
					<u-th class="u-th" width="240rpx">储位</u-th>
					<u-th class="u-th" width="240rpx">上架时间</u-th>
				</u-tr>
				<u-tr class="u-tr" v-for="(item,index) in datasource" :key="index">
					<u-td class="u-td" width="240rpx">{{ item.box_id }}</u-td>
					<u-td class="u-td" width="240rpx">{{ item.position }}</u-td>
					<u-td class="u-td" width="240rpx">{{ item.in_time }}</u-td>
				</u-tr>
			</u-table>
		</view>
		<u-toast ref="uPutShelfToast" />
	</view>
</template>

<script>
	import {MaterialPut} from '../../../common/api.js'
	let timer = null;
	export default {
		data() {
			return {
				form: {
					box_id: '',
					position: ''
				},
				pre: {
					box_id: '',
					position: ''
				},
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				loadding: true,
				datasource: [],
				lastBox: {},
				focus: false,
				prePostion: ''
			}
		},
		mounted() {
			this.$nextTick(function(){
				this.loadding = false
				timer = setInterval(() => {
					uni.hideKeyboard()
				}, 10)
			})
		},
		destroyed() {
			if(timer) {
				clearInterval(timer)
			}
		},
		watch: {
			positionName(newVal,oldVal) {
				if(newVal=='') {
					this.focus = false
				} else {
					this.focus = true
				}
			}
		},
		computed: {
			positionName() {
				return this.form.position
			}
		},
		methods: {
			/* handleBoxScan(value){
				let that = this
				if((value.length - this.pre.box_id.length) > 5){
					this.focus = false
					this.form.palletId = value
				}
			},
			handlePositionScan(value) {
				let that = this
				if((value.length - this.pre.position.length) > 5){
					this.pre.position = value
					this.form.position = value
					this.form['username'] = uni.getStorageSync("username")
					MaterialPut(this.form).then(res => {
						if(res && res['mesg'] === 'success'){
							this.showToast("上架成功", 'success')
							this.lastBox = res['res']
							this.datasource.push(res['res'])
							this.form.box_id = ''
							this.form.position = ''
							this.pre.box_id = ''
							this.pre.position = ''
						}else{
							this.showToast("上架失败: "+res['reason'], 'error')
							this.form.box_id = ''
							this.form.position = ''
							this.pre.box_id = ''
							this.pre.position = ''
						}
						this.focus = true
					})
				}
			}, */
			handlePositionScan(value) {
				
			},
			handleBoxScan(value) {
				this.form.username = uni.getStorageSync("username")
				MaterialPut(this.form).then(res => {
					if(res && res['mesg'] === 'success') {
						this.showToast('上架成功','success')
						this.lastBox = res['res']
						this.datasource.push(res['res'])
						this.form.box_id = ''
					} else {
						this.showToast(value + ' 上架失败: ' + res['reason'],'error')
						this.form.box_id = ''
					}
				})
			},
			showToast(text, type) {
				this.$refs.uPutShelfToast.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;
		}
	}
}

.u-td {
	height: 60rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 120rpx;
}

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

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