<template>

	<view class="page-wraper">

		<view class="page-header">
			<view class="" style="margin-bottom: 8rpx; margin-top: 8rpx; background-color: #fff">
				<scroll-view scroll-x="true" class="scrollview-box">
					<block v-for="(item, index) in tabs" :key="index">
						<view :class="tabIndex==index ? 'item_select' : 'item'" :data-current="index" @click="ontabtap">
							<text class="name">{{item}}</text>
						</view>
					</block>

				</scroll-view>

			</view>

		</view>
		<view class="uni-list" v-if="showList.length>0">
			<view class=""
				style="font-size: 40rpx; font-weight: bold; align-items: center; display: flex; justify-content: center;  margin-bottom: 20rpx; ">
				工位关系
			</view>
			<view class="uni-flex" style="flex-wrap: wrap;justify-content: space-between; margin: 10rpx;" >
				<view   style="width: 50%; display: flex; flex-direction: row;"  v-for="(item, index) in workStationList" :key="item.value">
					<view class="uni-flex" style="flex-direction: row; margin: 12rpx;"  @click="checkeClick(item.value)">
						<view class="">
							<checkbox :value="item.value" :checked="item.checked" />
						</view>
						<view class="">
							{{item.name}}
						</view>
					</view>
					
				</view>
			</view>
		</view>

		<view class="page-main">
			<scroll-view scroll-y="true" class="page-main-scroll">
				<view class="uni-flex uni-row" style="flex-wrap: wrap; margin: 5rpx;">
					<view class="uni-flex" style=" width: 50%; justify-content: center; margin-top: 40rpx; "
						v-for="(item, index) in showList" :key="index">
						<view class="uni-flex"
							style="flex-direction: column; margin-left: 10rpx; border-radius: 10rpx; border: 0.5px solid #000;padding: 5rpx;">
							<view class="" style="">
								<uni-tag :customStyle="customStyle" style="width: 100%;white-space: normal;"
									:inverted="!item.checked" :circle="false" :text="item.code+'\n'+item.desc1"
									type="primary" @click="setContainerModel(item)" />
							</view>

							<view style="display: flex; flex-direction: row; align-items: center; width: 100%;">
								<view class="" style="font-size: 32rpx;">
									收容数
								</view>
								<com-number-box :ref="'comNumberBox_'+index" v-model="item.stdPackQty" :max="999999"
									:min="0" style='' @change="qtyChanged($event,item,index)">
								</com-number-box>
							</view>
						</view>

					</view>

				</view>
			</scroll-view>
		</view>

		<view class="page-footer">
			<div class="new_bot_box">
				<win-collapse-location scanTitle='扫描目标库位' ref='comCollapseLocation'
					@getLocationCode='getDefaultToLocation' @clear='clearDefaultLocation'>
				</win-collapse-location>
				<view class="new_btn_bot bot_pos uni-flex">
					<button class="new_save_btn " style="width: 100%;" @click="submit()">提交</button>
				</view>
			</div>
		</view>

		<com-message ref="comMessage"></com-message>
	</view>
</template>
<script>
	import {
		injectionIssuePlanRequest,
		getItemCategoryList,
		injectionIssuePlanRequestItemCategoryName,
		injectionIssuePlanRequestItemCategory,
		locations,
		getWorkStationByLocation,
	} from '@/api/index.js';

	import {
		goHome,
		dateFormat,
		getContainerTypeName,
		showConfirmMsg,
		getISODateTime,
		scanSuccessAudio,
		scanFailedAudio
	} from '@/common/basic.js';

	import winEmptyView from '@/mycomponents/wincom/winEmptyView.vue'
	import comJobTopInfo from '@/mycomponents/comjob/comJobTopInfo.vue'
	import comMessage from '@/mycomponents/common/comMessage.vue'
	import winCollapseLocation from '@/mycomponents/wincom/winCollapseLocation.vue'
	import comNumberBox from '@/mycomponents/common/comNumberBox.vue';
	export default {
		components: {
			winEmptyView,
			comJobTopInfo,
			comMessage,
			winCollapseLocation,
			comNumberBox
		},
		data() {
			return {
				tabs: [],
				current: 0,
				pageSize: this.modelConfig,
				pageIndex: 1,
				loadingType: "nomore",
				showList: [],
				toLocationInfo: null,
				tabIndex: 0,
				customStyle: "white-space: normal;word-break:break-all",
				workStationList: [],


			};
		},
		filters: {
			formatDate: function(val) {
				return dateFormat(val)
			},
		},

		onShow() {},
		onLoad() {
			this.getCategoryListName();
		},
		onReachBottom() {},
		onPullDownRefresh() {},
		//后退按钮
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			goHome();
			return true;
		},
		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				goHome();
			} else if (e.index === 1) {
				window.location.reload();
			}
		},
		methods: {
			checkeClick(value) {
			
				for (let i = 0; i < this.workStationList.length; i++) {
					this.workStationList[i].checked = false
				}
			
				for (let i = 0; i < this.workStationList.length; i++) {
					if (this.workStationList[i].value === value) {
						if (this.workStationList[i].checked == true) {
							this.workStationList[i].checked = false
						} else {
							this.workStationList[i].checked = true
						}
					}
				}
				this.$forceUpdate()
			},
			getCategoryListName() {
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				injectionIssuePlanRequestItemCategoryName().then(res => {
					uni.hideLoading()
					if (res.length == 0) {
						this.showMessage("获取分类信息失败,请在字典中维护")
					} else {
						this.tabs = res;
						this.getCategoryList(this.tabs[0])
					}
					this.tabIndex = 0

				}).catch(error => {
					uni.hideLoading()
					this.showMessage("获取分类信息失败" + error)
				})
			},
			getCategoryList(categoryName) {
				injectionIssuePlanRequestItemCategory(categoryName).then(res => {
					uni.hideLoading()
					if (res.length == 0) {
						this.showMessage("获取[" + categoryName + "]信息失败,请在字典中维护")
					} else {
						this.showList = res;
						this.showList.forEach(item => {
							item.defaultStdPackQty = item.stdPackQty
							item.checked = false
						})
					}

				}).catch(error => {
					uni.hideLoading()
					this.showMessage("获取[" + categoryName + "]信息失败," + error)
				})
			},

			clearDefaultLocation() {
				this.toLocationInfo = null
			},
			//扫描默认目标库位
			getDefaultToLocation(locationCode) {
				uni.showLoading({
					title: "扫描中",
					mask: true
				});
				locations(locationCode).then(res => {
					uni.hideLoading();
					if (res) {
						this.toLocationInfo = res
						getWorkStationByLocation(res.code).then(res => {
							if (res && res.length > 0) {
								this.workStationList = []
								res.forEach(item => {
									this.workStationList.push({
										value: item.code,
										name: item.name,
										checked: false
									})
								})
								scanSuccessAudio()
							} else {
								scanFailedAudio()
								this.showMessage("获取工位失败")
							}
						
						}).catch(error => {
							scanFailedAudio()
							this.showMessage("获取工位失败")
						})
					} else {
						scanFailedAudio()
						this.showMessage('目标库位【' + locationCode + '】不存在');
					}

				}).catch(err => {
					scanFailedAudio()
					uni.hideLoading();
					this.toLocationInfo = null
					this.showMessage(err.message);

				})
			},
			setContainerModel(item) {
				item.checked = !item.checked
				this.showList.forEach(res => {
					if (res.code != item.code) {
						res.checked = false
					}

				})
				this.$forceUpdate()
			},

			//查询发货任务
			showMessage(message) {
				this.$refs.comMessage.showMessage(message);
			},
			showCommitSuccessMessage() {
				this.$refs.comMessage.showCommitSuccess();
			},
			clearData() {
				this.tabs = []
				this.current = 0
				this.showList = []
				this.toLocationInfo = null,
				this.tabIndex = 0;
				this.$refs.comCollapseLocation.clearLocation();
				this.workStationList=[]

			},
			submit(item) {
				var checked = this.showList.filter(r => r.checked)
				if (checked.length == 0) {
					this.showMessage("请选择零件")
					return;
				}

				if (this.toLocationInfo == null) {
					this.showMessage("请先扫描目标库位")
					return;
				}


				uni.showLoading({
					title: "提交中...",
					mask: true
				});
				var workStation = this.workStationList.find(r => r.checked == true)
				var params = {
					remark: workStation ? workStation.value : "",
					worker: localStorage.userName_CN == "" ? localStorage.userName : localStorage.userName_CN,
					activeDate: getISODateTime(),
					useOnTheWayLocation: false,
					type: "Qty",
					details: [

					]
				}
				var item = {
					remark: workStation ? workStation.value : "",
					itemCode: checked[0].code,
					itemName: checked[0].name,
					itemDesc1: checked[0].desc1,
					itemDesc2: checked[0].desc2,
					uom: checked[0].basicUom,
					qty: checked[0].stdPackQty,
					stdPackQty: checked[0].stdPackQty,
					toLocationCode: this.toLocationInfo.code,
					toLocationArea: this.toLocationInfo.areaCode,
					toLocationGroup: this.toLocationInfo.locationGroupCode,
					toLocationErpCode: this.toLocationInfo.erpLocationCode,
					toWarehouseCode: localStorage.warehouseCode,
					positionCode: "",
					recommendType: "SEMI",
					boxQty: checked[0].stdPackQty
				}
				params.details.push(item)
				console.log("测试", JSON.stringify(params));
				injectionIssuePlanRequest(params)
					.then(res => {
						uni.hideLoading();
						if (res) {
							this.showCommitSuccessMessage();
							this.clearData();
							this.getCategoryListName();
						} else {
							this.showMessage("提交失败");
						}
					})
					.catch(err => {
						this.showMessage(err.message);
						uni.hideLoading();
					});
			},
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				if (this.tabIndex == index) {
					return;
				}
				this.tabIndex = index;
				this.getCategoryList(this.tabs[index])
			},
			qtyChanged(value, item, index) {
				if (value <= 0) {
					item.qty = item.defaultHandleQty
					this.$refs['comNumberBox_' + index][0].setValue(item.qty);
					this.showMessage('数量不能小于或等于0')
					return;
				}
			},
		}
	};
</script>
<style>
	.scrollview-box {
		white-space: nowrap;
		/* 滚动必须加的属性 */
		width: 100%;
	}

	.item {
		margin: 10rpx;
		padding: 15rpx;
		display: inline-flex;
		/* item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 */
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		color: #007AFF;
		border: 1px solid #007AFF;
		border-radius: 8rpx;
	}

	.item_select {
		margin: 10rpx;
		padding: 15rpx;
		display: inline-flex;
		/* item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 */
		flex-direction: column;
		align-items: center;
		background-color: #007AFF;
		color: #fff;
		border: 1px solid #007AFF;
		border-radius: 8rpx;
	}

	.name {
		font-size: 35rpx;
		/* color: #fff; */
		padding: 0;
		/* width: 90%; */
		text-align: center;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
</style>