<template>
	<view class="zd_container">
		<nav-bar :title="title"></nav-bar>
		<view class="zd_content">
			<view class="zd_wrapper">
				<view class="zd-row border-bottom">
					<view class="zd-col-7">
						<span class="filter_label">{{pType ? '目标托盘' : '原始托盘'}}</span>
					</view>
					<view class="zd-col-17">
						<search-box
						v-model="val1"
						@handleChange="handleChange"
						/>
					</view>
				</view>
			</view>
			<view v-show="oPallet" class="table_container bg_blue">
				<view class="font-1">原始托盘：<text>{{oPallet}}</text></view>
				<view class="th_content">
					<table class="table">
						<tr>
							<th width="28%" class="th_c">800号</th>
							<th width="28%">物料编码</th>
							<th width="25%">数量</th>
							<th width="19%">
								<view class="flex-center" @tap="toggleSelectAll">
									<uni-icons class="icon-check" type="checkmarkempty" size="20" :color="isAllSelected ? '#010319' : 'transparent'"></uni-icons>
								</view>
							</th>
						</tr>
					</table>
				</view>
				<view class="table_content">
					<table class="table">
						<tr v-for="(e, i) in oPalletData" :key="'o' + i">
							<td width="28%" class="td_c">{{e.order_code}}</td>
							<td width="28%">{{e.material_code}}</td>
							<td width="25%">{{e.material_qty}}</td>
							<td width="19%">
								<view class="flex-center" @tap="toggleSelect(i)">
									<uni-icons class="icon-check" type="checkmarkempty" size="20" :color="e.selected ? '#3a3a3a' : 'transparent'"></uni-icons>
								</view>
							</td>
						</tr>
					</table>
				</view>
			</view>
			<view v-show="oPallet && tPallet" class="change-wrap" @tap="interChange">
				<uni-icons type="arrow-down" size="30" color="#3a3a3a"></uni-icons>
				<uni-icons type="arrow-up" size="30" color="#3a3a3a"></uni-icons>
			</view>
			<view v-show="tPallet" class="table_container bg_red">
				<view class="font-1">目标托盘：<text>{{tPallet}}</text></view>
				<view class="th_content">
					<table class="table">
						<tr>
							<th width="35%" class="th_c">800号</th>
							<th width="35%">物料编码</th>
							<th width="30%">数量</th>
						</tr>
					</table>
				</view>
				<view class="table_content">
					<table class="table">
						<tr v-for="(e, i) in tPalletData" :key="'t' + i">
							<td width="35%" class="td_c">{{e.order_code}}</td>
							<td width="35%">{{e.material_code}}</td>
							<td width="30%">{{e.material_qty}}</td>
						</tr>
					</table>
				</view>
			</view>
		</view>
		<view class="zd-row submit-bar">
			<button class="zd-col-7 button-default" @tap="clearUp">清空</button>
			<button class="zd-col-15 button-primary" :class="{'button-info': !oPallet || !tPallet}" :disabled="disabled" @tap="toSure">合托</button>
		</view>
		<view class="msg_wrapper" :class="show ? 'popshow' : 'pophide'">
			<view class="pop_content">
				<view class="zd_wrapper">
					<view class="zd-row border-bottom">
						<view class="zd-col-7">
							<span class="filter_label">入库托盘码</span>
						</view>
						<view class="zd-col-17">
							<search-box
							v-model="val2"
							/>
						</view>
					</view>
					<view class="zd-row border-bottom">
						<view class="zd-col-7">
							<span class="filter_label">入库点位</span>
						</view>
						<view class="zd-col-17">
							<search-box
							v-model="val3"
							/>
						</view>
					</view>
					<view class="mgt20 font-size-1">{{message}}</view>
				</view>
			</view>
			<view class="zd-row submit-bar">
				<button class="zd-col-6 button-default" @tap="toCancel">取消</button>
				<button class="zd-col-16 button-primary" :class="{'button-info': !val2 || !val3}" :disabled="disabled" @tap="_generateStoreInTask">入库</button>
			</view>
		</view>
		<view v-show="show" class="msg_mask"></view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import SearchBox from '@/components/SearchBox.vue'
	import {checkTrayInfo, combineMaterials, generateStoreInTask} from '@/utils/getData2.js'
	export default {
		components: {
			NavBar,
			SearchBox
		},
		data() {
			return {
				title: '',
				val1: '',
				disabled: false,
				pType: 0, // 0是原始托盘，1是目标托盘
				oPallet: null,
				tPallet: null,
				oPalletData: [],
				tPalletData: [],
				show: false,
				val2: '',
				val3: '',
				times: 0,
				message: null
			};
		},
		computed: {
			isAllSelected() {
				if (this.oPalletData.length === 0) return false
				return this.oPalletData.every(item => item.selected)
			},
			selectedItems() {
				return this.oPalletData.filter(item => item.selected)
			}
		},
		onLoad (options) {
			this.title = options.title
		},
		methods: {
			toCancel() {
				this.show = false
			},
			handleChange (e) {
				if (e) {
					this._checkTrayInfo(e)
				}
			},
			async _checkTrayInfo (e) {
				try {
					let res = await checkTrayInfo(e)
					// pType:  控制输入框：0是原始托盘, 1是目标托盘
					// oPallet 表格里的 原始托盘 , oPalletData 原始托盘grid
					// tPallet 表格里的 目标托盘 , tPalletData 目标托盘gird
					if (this.pType === 1) {
						// if (res.vehicle_code !== this.val1) {
						if (res.vehicle_code !== this.oPallet) {
							this.tPallet = res.vehicle_code
							this.tPalletData = [...res.materials]
							this.pType = 0
						} else {
							uni.showToast({
								title: '原始托盘跟目标托盘不能一致',
								icon: 'none'
							})
						}
					}
					// 扫原始托盘，同时原始托盘表格没值，就第一次查
					if (this.pType === 0 && this.oPallet === null) {
						this.oPallet = res.vehicle_code
						this.oPalletData = res.materials.map(item => ({
							...item,
							selected: false
						}))
						this.pType = 1
					}
					
				} catch (e) {
					if (this.pType === 0) {
						this.oPallet = null
						this.oPalletData = []
					} else {
						this.tPallet = null
						this.tPalletData = []
					}
				}
				setTimeout(()=> {
					this.val1 = ''
				}, 1600)
			},
			toggleSelect(index) {
				this.$set(this.oPalletData, index, {
					...this.oPalletData[index],
					selected: !this.oPalletData[index].selected
				})
			},
			toggleSelectAll() {
				const allSelected = this.isAllSelected
				this.oPalletData = this.oPalletData.map(item => ({
					...item,
					selected: !allSelected
				}))
			},
			interChange () {
				const tempPallet = this.oPallet
				const tempPalletData = [...this.oPalletData]

				this.oPallet = this.tPallet
				this.oPalletData = [...this.tPalletData]

				this.tPallet = tempPallet
				this.tPalletData = tempPalletData
				
				this.resetSelection()
			},
			resetSelection() {
				this.oPalletData = this.oPalletData.map(item => ({
					...item,
					selected: false
				}))
			},
			clearUp () {
				this.val1 = ''
				this.disabled = false
				this.pType = 0
				this.oPallet = null
				this.tPallet = null
				this.oPalletData = []
				this.tPalletData = []
				this.times = 0
				this.message = null
				this.val2 = ''
				this.val3 = ''
				this.show = false
			},
			toSure () {
				this.disabled = true
				if (!this.oPallet || !this.tPallet) {
					this.disabled = false
					return
				}
				if (this.selectedItems.length < this.oPalletData.length) {
					uni.showModal({
						title: '提示',
						content: '本次合托未全部转移，是否确定？',
						success: (res) => {
							if (res.confirm) {
								this._combineMaterials()
							} else if (res.cancel) {
								this.disabled = false
							}
						}
					})
				} else {
					this._combineMaterials()
				}
			},
			async _combineMaterials () {
				try {
					let res = await combineMaterials(this.oPallet, this.tPallet, this.selectedItems)
					if (!res.need_store_in) {
						this.clearUp()
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					} else if (res.need_store_in) {
						uni.showModal({
							title: '提示',
							content: '请将托盘放置在SD01/SD02点位，扫描托盘码进行入库。',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									this.show = true
								}
							}
						})
					}
					this.disabled = false
				} catch (e) {
					this.disabled = false
				}
			},
			async _generateStoreInTask () {
				this.disabled = true
				if (!this.val2 || !this.val3) {
					this.disabled = false
					return
				}
				try {
					let res = await generateStoreInTask(this.val2, this.val3, this.oPallet, this.tPallet)
					if (this.times === 0) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						if (res.is_second_store_in === false) {
							this.times = 1
							this.message = '请等待AGV取走第一个托盘后再将另一个托盘放置在SD01点位，扫描托盘码进行入库。'
						}
						if (res.success === true) {
							this.val2 = ''
							this.val3 = ''
							this.times = 1
						}
					} else {
						if (res.is_second_store_in) {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
							this.clearUp()
						} else {
							this.message = '第一个托盘还未取走，请等待取走后再提交。'
						}
					}
					this.disabled = false
				} catch (e) {
					this.disabled = false
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
@import '../../common/style/mixin.styl';
.table_container
	width 100%
	border-radius 24rpx
	padding 22rpx 11rpx
	margin-bottom 20rpx
	box-shadow inset 0px 0px 3px 1px rgba(255, 255, 255, 50%)
.bg_blue
	background-color #98c1ff
.bg_red
	background-color #fdbaa0
	.table
		th
			&.th_c
				color #e2483c
		td
			&.td_c
				color #c74e44
.font-1
	_font(32rpx, 36rpx, #000620,,)
	padding 0 22rpx
	margin-bottom 20rpx
	text
		_font(36rpx, 36rpx, #000620,700,)
.th_content
	width calc(100% - 22rpx)
	margin 0 auto
.table_content
	width calc(100% - 22rpx)
	margin 0 auto
	background-color #fff
	border-radius 24rpx
.table
	width 100%
	color #fff
	border-spacing 0
	padding 0 11rpx
	th
		_font(32rpx, 32rpx, #010319,700,center)
		padding 20rpx 10rpx
		.icon-check
			border-color #010319
		&.th_c
			color #165ad1
	td
		_font(32rpx, 32rpx, #3a3a3a,,center)
		padding 20rpx 10rpx
		white-space pre-wrap
		word-break break-all
		border-bottom 1px dashed #343434
		&.td_c
			color #0083ff
	tr
		&:last-child
			td
				border-bottom 0
.icon-check
	width 28px
	height 28px
	line-height: 26px
	border 1px solid #3a3a3a
.change-wrap
	width 60px
	margin 0 auto
	border 1px solid #3a3a3a
	margin-bottom 20rpx
</style>
