<template>
	<view>
		<u-navbar back-text="返回" title="拆托/组托" :background="background"></u-navbar>
		<u-form>
			<u-form-item :border-bottom="false">
				<p>扫描托盘：</p>
				<u-input v-model="SettobarCode" placeholder="请输入托盘" :border="true" @confirm="submit2" />
			</u-form-item>
			<radio-group @change="SplitOrMerge">
				<label class="radio">
					<radio value="cb">{{'拆盘'}}</radio>
				</label>
				<label class="radio" style="margin-left: 20px;">
					<radio value="zb">{{'组盘'}}</radio>
				</label>
			</radio-group>

			<u-form-item>
				<p>扫描条码：</p>
				<u-input class="uni-input" v-model="MaterialPackingcode" :focus="focusBarCode" placeholder="请扫描条码"
					:border="true" @confirm="submit" />
			</u-form-item>
		</u-form>
			<view class="container" style="margin-bottom: 80px;">
				<view class="list-item" v-for="(item, index) in BoxListInfo" :key="item.id">
					<view >
						<view>
							<div>
								<text class="card-description"> 序号: {{BoxListInfo.length -  index}}</text>
							</div>
						<div>
							<text class="card-description"> 批次: {{ item.CHARGE }}</text>
						</div>
						<div>
							<text class="card-description"> 料号: {{ item.MATERIALSPECNAME }}</text>
							<text class="card-description"> 阶段: {{ item.PHASE }}</text>
							<text class="card-description"> SDK规格: {{ item.SPECNAME }}</text>
						</div>
						<div>
							<text class="card-description"> 品名: {{ item.DESC_CN }}</text>
						</div>
						<div>
							<text class="card-description"> 实际规格: {{ item.TRUEGG }}</text>
						</div>
						<div>
							<text class="card-description"> 仓库: {{ item.ERPLOCATION }}</text>
						</div>
						<div>
							<text class="card-description"> 货位: {{ item.LOCATIONNAME }}</text>
						</div>
						<div>
							<text class="card-description"> 数量: {{ item.MATERIALQUANTITY }} {{ item.UNIT }}</text>
						</div>
						<div>
							<text class="card-description"> 
							载具: {{ item.TRAYNAME }}   
							库区: {{ item.DESCRIPTION }} 
							</text>
						</div>
						<div v-if="SPLIT" class="button-group" style = "margin: 5rpx; padding-bottom: 10rpx; align: center;">
							<u-button type="primary" size="mini" @click="deleteItem(item, index)">删除</u-button>
						</div>
					</view>
					</view>
				</view>
			</view>
		<br />
		<view class="tabbar_bottom">
			<uni-datetime-picker style="align-items: center;" type="date" :clear-icon="false" v-model="commitDate"
				@maskClick="maskClick" />
			<u-button class="btn-bottom" @click="FGStockIn" type="primary" :loading="loading">确定入库</u-button>
		</view>
		<br />
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commitDate: '',
				SPLIT: false,
				MERGE: false,
				loading: false,
				userId: "",
				SettobarCode: "", //托盘编号
				MaterialPackingcode: '', //标签编号
				BoxListInfo: [], //后端传回来的绑定表格的数据
				focusKw: false, //库位输入框焦点
				focusBarCode: true, //默认聚焦到条码框	
				background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}, //返回按钮的样式
				useId: "",
				//对应的材料列表
				column: [ //列
					{
						name: 'MATERIALSPECNAME',
						label: '料号'
					},
					{
						name: 'CHARGE',
						label: '批次',
						align: 'center',
						// fixed: true,
					},
					{
						name: 'DESC_CN',
						label: '品名'
					},

					{
						name: 'ERPLOCATION',
						label: '库位'
					},
					{
						name: 'LOCATIONNAME',
						label: '货架'
					}, {
						name: 'DESCRIPTION',
						label: '库区'
					}, {
						name: 'TRAYNAME',
						label: '载具'
					},
					{
						name: 'SHELFNAME',
						label: '立体库货架'
					},
					{
						name: 'MATERIALQUANTITY',
						label: '系统数量',
						sorter: true
					},
					{
						name: 'STOCKSTATE',
						label: '库存状态'
					}
				],
			};

		},
		onUnload() {
			uni.$off('rifdscan')
		},
		onShow() {
			let that = this
			// uni.$off('rifdscan')
			uni.$on('rifdscan', (res) => {
				console.log('扫码结果：', res);
				that.SettobarCode = res.rifd
			})
			this.BoxListInfo = [];
			//发送请求
			this.$MyRequest('/api/ApiQuery', {
				queryId: "GetDURABLENAME_PackingName",
				version: "00001",
				params: {
					DURABLENAME: this.SettobarCode,
				}
			}).then(res => {
				if (res.data.message == "SUCCESS!") {
					this.BoxListInfo = res.data.data
					for (let i = 0; i < this.BoxListInfo.length; i++) {
						console.log(this.BoxListInfo[i])
						this.BoxListInfo[i].ID = '可选'
					}
				} else {

				}
			}).catch(err => {
				this.$showMessage(err)
			})
		},
		mounted() {
			// let Things = 20
			// for (var i = 0; i < Things; i++) {
			// 	this.BoxListInfo.push({aa:"1"}) 
			// }	
			const site = uni.getStorageSync('sitename')
			// this.siteName = site
			this.siteName = 'SDK'
			const iduser = uni.getStorageSync('userid')
			this.userId = iduser
			this.getTimeData();
		},

		methods: {
			deleteItem(row, index) {
				console.log(index, row)
				var url = "//MaturationLibrary/deassignTryByBox"
				this.$MyRequest(url, {
					BARCODE: row.MATERIALPACKINGNAME,
					durableName: this.SettobarCode,
					userId: this.userId
				}).then(res => {
					console.log(res)
					if (res.data.success) {
						try {
							Vue.prototype.$playSuccess()
						} catch (e) {}
						this.submit2()
					} else {
						this.$showMessage(res.data.message)
						try {
							Vue.prototype.$playFail()
						} catch (e) {}
					}
				}).catch(err => {
					this.$showMessage(err)
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					this.$nextTick(() => {
						this.MaterialPackingcode = ""
						this.focusBarCode = true
					})
				});
			},
			getTimeData() {
				var year = new Date().getFullYear(); //年
				if (year < 1900) year = year + 1900;
				var month = new Date().getMonth() + 1; //月
				if (month < 10) month = '0' + month;
				var day = new Date().getDate(); //日
				if (day < 10) day = '0' + day;
				const calendar1 = year + '-' + month + '-' + day
				this.commitDate = calendar1
			},
			maskClick(e) {
				console.log('maskClick事件:', e);
			},
			cellStyleFn({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				return {
					backgroundColor: row.STOCKSTATE == 'StockOut' ? 'yellow' : 'white'
				}
			},
			//设置选中状态
			changeischecked() {
				this.ischecked = !this.ischecked //设置选中状态
			},
			SplitOrMerge(e) {
				 const selectedValue = e.detail.value; 
				if (selectedValue == 'cb') {
					this.SPLIT = true
					this.MERGE = false
				} else if (selectedValue == 'zb') {
					this.SPLIT = false
					this.MERGE = true
				}
			},
			submit() {
				this.focusBarCode = false;
				if (!this.MERGE && !this.SPLIT) {
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					this.$showMessage("请选择拆盘或组盘")
					this.$nextTick(() => {
						this.MaterialPackingcode = ""
						this.focusBarCode = true
						console.log(this.focusBarCode)
					})
					return
				}
				var url = "//MaturationLibrary/deassignTryByBox"
				if (this.MERGE && !this.SPLIT) {
					url = "//MaturationLibrary/assignTryByBox"
				}
				this.$MyRequest(url, {
					BARCODE: this.MaterialPackingcode,
					durableName: this.SettobarCode,
					userId: this.userId
				}).then(res => {
					if (res.data.success) {
						try {
							Vue.prototype.$playSuccess()
						} catch (e) {}

						this.submit2()
					} else {
						this.$showMessage(res.data.message)
						this.$nextTick(() => {
							this.MaterialPackingcode = ""
							this.focusBarCode = true
						})

						try {
							Vue.prototype.$playFail()
						} catch (e) {}
					}
				}).catch(err => {
					this.$showMessage(err)
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
					this.$nextTick(() => {
						this.MaterialPackingcode = ""
						this.focusBarCode = true
					})
				});

				// this.SettoSubmit()
			},
			submit2() {
				this.BoxListInfo = [];
				//发送请求
				this.$MyRequest('/api/ApiQuery', {
					queryId: "GetDURABLENAME_PackingName",
					version: "00001",
					params: {
						DURABLENAME: this.SettobarCode,
					}
				}).then(res => {
					if (res.data.message == "SUCCESS!") {
						this.BoxListInfo = res.data.data
						for (let i = 0; i < this.BoxListInfo.length; i++) {
							console.log(this.BoxListInfo[i])
							this.BoxListInfo[i].ID = '可选'
						}
					} else {

					}
					this.$nextTick(() => {
						this.MaterialPackingcode = ""
						this.focusBarCode = true
					})
				}).catch(err => {
					this.$showMessage(err)
					this.$nextTick(() => {
						this.MaterialPackingcode = ""
						this.focusBarCode = true
					})
				})

			},

			FGStockIn() {
				console.log(this.commitDate)
				if (this.BoxListInfo.length > 0) {
					this.loading = true;
					let MaterialPackingcodeLIST = this.BoxListInfo.map(item => {
						item.AREANAME = "E"
						item.FLAG = "IN"
						item.ISAGV = "FALSE"
						item.TRANSPORTCOMMANDTYPE = "IN"
						item.TRAYNAME = this.SettobarCode
						item.INDESTINATION = "E"
						return item;
					})
					this.$MyRequest('/MaturationLibrary/AutoStockIn', {
						SITENAME: "SDK",
						commitDate: this.commitDate,
						userId: this.userId,
						AREANAME: "E",
						aimAreaName: "",
						barCode: "",
						durableName: this.SettobarCode,
						MATERIALPACKINGNAME: MaterialPackingcodeLIST
					}).then(res => {
						if (res.data.success) {
							this.loading = false;
							this.resetValue();
							this.$showMessage(res.data.message)
							this.BoxListInfo = [];
						} else {
							this.loading = false;
							this.$showMessage(res.data.message)
							this.BoxListInfo = [];
						}
					}).catch(err => {
						this.loading = false;
						try {
							Vue.prototype.$playFail()
						} catch (e) {}
						this.$showMessage(err)
					});
				} else {
					this.$showMessage("请扫描！")
					try {
						Vue.prototype.$playFail()
					} catch (e) {}
				}
			}

		}
	}
</script>
<style>
	.btn-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
	}
</style>
<style lang="scss">
	.list-item {
		
		margin-top: 16px;
		/* 卡片之间的间距 */
		// padding: 12px;
		/* 卡片内部的内边距 */
		background-color: #aaaa7f;
		/* 卡片背景色 */
		border-radius: 8px;
		/* 卡片边框圆角 */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* 卡片阴影效果 */
	}
</style>
