<template>
	<page-meta root-font-size="16px"></page-meta>
	<view class="">
		<!-- <comscanitem ref="comItem" @item="getItem" placeholder="请扫描零件" :boxFocus='false' :clearResult='false'>
		</comscanitem> -->
		<view class="scanType">库存状态</view>
		<checkbox-group @change="checkboxChange" style="transform:scale(0.9)">
			<label v-for="item in inventoryStatusArray" :key="item.value">
				<checkbox :value="item.value" :checked="item.checked">{{item.text}}</checkbox>
			</label>
		</checkbox-group>

		<scroll-view scroll-y="true" class="scrollView">
			<view hover-class="uni-list-cell-hover" v-for="(item, index) in locationList" :key="item.id">
				<view class="uni-flex uni-row">
					<view>
						<checkbox :checked="item.checked" style="transform:scale(0.7);margin-top:80rpx"
							@click="checkBox($event, item)">
						</checkbox>
					</view>
					<view style="-webkit-flex: 1;flex: 1;">
						<view class="device-detail">
							<view class="list-style">
								<view class="uni-flex uni-row space-between">
									<view class="text-bolder">库位代码:{{ item.code }}</view>
								</view>
								<view>库位名称:{{ item.name }}</view>
								<view>库位组:{{ item.locationGroupCode }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="uni-flex bottom">
			<button class="accept-button" @click="deleteItem()">删除</button>
			<button type="primary" class="save-button" @click="submit()">提交</button>
		</view>
		<comMessage ref="comMessage"></comMessage>
	</view>
</template>

<script>
	import {
		getLocationByItem,
		createCountJob
	} from '@/api/index.js'
	import {
		getInventoryStatusArray
	} from '@/common/array.js'

	// import comscanitem from '../../mycomponents/scan/comscanitem.vue'
	import comMessage from '@/mycomponents/common/comMessage.vue'
	import {
		getBalancesByFilter,
		byContainercode,
		byPackingcode,
		checkjobbypacking,
		checkjobbycontainer
	} from '@/api/index.js';
	import {
		showConfirmMsg,
		showConfirmMsg1,
		goHome
	} from '@/common/basic.js';

	export default {
		name: 'countByLocation',
		components: {
			// comscanitem,
			comMessage
		},
		data() {
			return {
				itemCode: '',
				locationList: [],
				inventoryStatusArray: [],
				submitting: false,
			};
		},
		props: {
			datacontent: {
				type: Object,
				value: null
			}
		},
		filters: {

		},
		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			}
		},
		onLoad() {
			this.inventoryStatusArray = getInventoryStatusArray();
			this.inventoryStatusArray.forEach(r => {
				if (r.value == 1 || r.value == 2 || r.value == 3) {
					r.checked = true
				} else {
					r.checked = false
				}
				r.value = String(r.value)
			})
		},
		mounted() {

		},

		methods: {
			getItem(item, itemCode) {
				if (item == null) {
					return;
				}
				if (this.locationList.length > 0) {
					showConfirmMsg('是否要清空现有库位列表?', confirm => {
						if (confirm) {
							this.getLocations(itemCode);
						}
					})
				} else {
					this.getLocations(itemCode);
				}
			},

			getLocations(itemCode) {
				uni.showLoading({
					title: '加载中...'
				})
				if (itemCode != null) {
					this.itemCode = itemCode;
					let param = {
						itemCode: itemCode
					};
					getLocationByItem(param).then(res => {
						this.locationList = res;
						if (this.locationList.length == 0) {
							this.showMessage("未查找到库位信息");
						}
						uni.hideLoading();
					}).catch(ex => {
						this.showMessage(ex.message);
						uni.hideLoading();
					});
				}
			},

			checkBox(e, item) {
				item.checked = !item.checked;
			},

			checkboxChange: function(e) {
				var items = this.inventoryStatusArray,
					values = e.detail.value;
				for (var i = 0; i < items.length; i++) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},

			submit() {
				let checkedItems = this.inventoryStatusArray.filter(r => r.checked);
				if (this.locationCode == '') {
					this.showMessage('请扫描库位');
					return;
				} else if (checkedItems.length == 0) {
					this.showMessage('请选择库存状态');
					return;
				} else if (this.locationList.length == 0) {
					this.showMessage('没有要盘点的零件');
					return;
				}

				this.submitting = true;
				uni.showLoading({
					title: "提交中..."
				});

				let statusMap = new Map();
				checkedItems.filter((r) => !statusMap.has(r.value) && statusMap.set(Number(r.value), 1));
				let sList = [];
				statusMap.forEach((i, m) => {
					sList.push(m)
				})
				
				let locationMap = new Map();
				this.locationList.filter((r) => !locationMap.has(r.code) && locationMap.set(r
					.code, 1))
				let lList = [];
				locationMap.forEach((i, m) => {
					lList.push(m)
				})
				let itemList = [this.itemCode];

				let params = {
					"countMethod": 3, //按库位按零件
					"countStage": 4, //循环盘点
					"company": localStorage.company,
					"partCondition": itemList,
					"locCondition": lList,
					"statusList": sList,
					"worker": localStorage.userName,
					"warehouseCode": localStorage.warehouseCode,
				}

				createCountJob(params).then(res => {

					this.afterSubmit();
					this.hideLoading();
				}).catch(ex => {
					this.showMessage(ex.message);
					this.hideLoading();
				})
			},

			afterSubmit() {
				this.locationList = [];
				this.$refs.comItem.clear();
			},

			hideLoading() {
				this.submitting = false;
				uni.hideLoading();
			},

			//删除
			deleteItem() {
				let checkItems = this.locationList.filter(r => {
					return r.checked
				});

				if (checkItems.length > 0) {
					showConfirmMsg('是否要删除选择中的零件?', confirm => {
						if (confirm) {
							for (var i = this.locationList.length - 1; i >= 0; i--) {
								let item = this.locationList[i];
								if (item.checked) {
									this.locationList.splice(i, 1);
								} else {
									item.checked = false;
								}
							}
						}
					});
				} else {
					this.showMessage('没有要删除的零件')
				}
			},

			showMessage(message) {
				this.$refs.comMessage.showMessage(message);
			},
		}
	}
</script>

<style>
	.scanType {
		padding: 5rpx 30rpx;
		font-size: 16px;
		color: gray;
	}
</style>
