<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="inventoryTypeList" @confirm="invSelectConfirm" mode="single-column"
				confirm-text='确认选择' />
			<view style="display: flex; justify-content: space-between; margin-top: 10rpx;">
				<u-input v-model="form.inventoryName" :border="true" style="background: #FFFFFF; margin-right: 10rpx;"
					placeholder="请选择盘点类型" disabled></u-input>
				<u-button @click="invTypeClick">盘点类型</u-button>
			</view>
			<view style="display: flex; justify-content: space-between; margin-top: 10rpx;">
				<u-input v-model="form.inventoryPalletOrLoc" :border="true" @input="handlePalletOrSlotIn"
					style="background: #FFFFFF; margin-right: 10rpx;"></u-input>
				<view style="width: 168rpx;padding-top: 15rpx;margin-left: 30rpx;">栈板/储位</view>
			</view>
			<u-button @click="invBtnClick" style="margin-top: 10rpx;">生成盘点单</u-button>
			<u-card style="border: 1rpx solid #0081FF;" :show-head="false" :full="true"
				:body-style="{height: '180rpx'}">
				<view class="card-body" slot="body">
					<u-row gutter="8" justify="between">
						<u-col span="12">
							<view class="info-label">数量</view>
							<view>{{ inventoryCnt }}</view>
						</u-col>
						<u-col span="12">
							<view class="info-label">盘点单号</view>
							<view>{{inventoryNo}}</view>
						</u-col>
					</u-row>
				</view>
			</u-card>
			<u-table class="main-table">
				<u-tr class="u-tr">
					<u-th class="u-th" width = "270rpx">储位</u-th>
					<u-th class="u-th">栈板</u-th>
				</u-tr>
				<u-tr class="u-tr" v-for="(item,index) in datasource" :key="index">
					<u-td class="u-td" width = "270rpx">{{ item.loc }}</u-td>
					<u-td class="u-td">{{ item.plt }}</u-td>
				</u-tr>
			</u-table>
		</view>
		<view>
			<u-toast ref="toast"></u-toast>
		</view>
	</view>
</template>

<script>
	import {
		CreateFgInv
	} from '../../../common/api.js'
	export default {
		data() {
			return {
				inventoryTypeList: [
					{
						label: "按栈板盘点",
						value: "plt"
					}, {
						label: "按储位盘点",
						value: "loc"
					}
				],
				inventoryInfoList: '',
				inventoryCnt: 0,
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				loadding: true,
				datasource: [
					
					// {boxId:'a',loc:'a'},
					// {boxId:'a',loc:'a'},
					// {boxId:'a',loc:'a'}
				],
				inventoryNo: '--',
				username: '',
				invSelectShow: false,
				
				form: {
					palletOrLoc: '',
					inventoryName: '',
					inventoryType: ''
				},
			}
		},
		mounted() {
			this.$nextTick(function() {
					this.loadding = false
				}),
				this.username = uni.getStorageSync('username')
		},
		watch: {

		},
		computed: {

		},
		methods: {
			invTypeClick() {
				this.invSelectShow = true
			},
			invSelectConfirm(data) {
				this.form.inventoryType = data[0]['value']
				this.form.inventoryName = data[0]['label']
				//console.log(this.inventoryType)								
			},
			handlePalletOrSlotIn(data) {
				if (this.form.inventoryName === '') {
					this.showToast('请选择盘点方式', 'warning')
				} else {
					if(this.inventoryInfoList === ''){
						this.datasource = []
						this.inventoryNo = '--'
					}
					
					if (data.length !== 0) {	
						var datainfo2 = {}
						if(this.form.inventoryType === 'loc'){
							datainfo2 = {
								loc: data,
								plt: '--'
							}
						}else{
							datainfo2 = {
								loc: '--',
								plt: data
							}
						}
						
						this.inventoryInfoList =data + ',' + this.inventoryInfoList 
						this.datasource.push(datainfo2)
						this.inventoryCnt++
					}
				
				}
			},

			showToast(text, type) {
				this.$refs.toast.show({
					title: text,
					type: type,
					duration: 5000,
					position: 'center'
				})
			},
			invBtnClick() {
				if (this.inventoryInfoList.length === 0) {
					this.showToast('盘点信息为空，请选择盘点数据', 'warning')
				} else {			
					CreateFgInv({
							para_List: this.inventoryInfoList, 
							userId: this.username,
							invType:this.form.inventoryType
					}).then(res => {
						console.log(res)
						if (res['code'] === '200') {
							this.inventoryNo = res['invNo']
							this.datasource = res['pltInfos']
							this.inventoryInfoList = ''
							this.inventoryCnt = 0
							//this.invSelectShow = true
						}else{
							this.showToast('盘点单生成失败: ' + res['mesg'], 'error')
							this.inventoryCnt = 0
							this.inventoryInfoList = ''
							this.datasource = []
						}
					})

				} 
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pick_main {
		border: 1rpx solid #ffffff;
		background: #FFFFFF;
		width: 300rpx;
		height: 60rpx;
		flex: 1;
		font-size: 30rpx;
		text-align: center;
	}

	.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>
