<template>
	<div>
		<uni-nav-bar title="退仓复核-详情" :status-bar="true" background-color="#3F92F9" color="#FFF">
			<view slot="left">
				<u-icon name="account-fill" color="#FFF" size="35"></u-icon>
				<span style="padding: 0 5rpx;color: #FFFFFF;">{{ userInfo.name }}</span>
			</view>
			<view slot="right" @tap="$utils.openNew(`/pages/warehouse/review`)">
				<span style="color: #FFFFFF;">返回</span>
			</view>
		</uni-nav-bar>
		<ul class="review-ul">
			<li v-for="(i,index) in dtlData.checkDetailsInfoList" :key="i.materialId">
				<view class="title">
					物料名称:{{i.materialName}}
				</view>
				<view class="lists">
					<view class="list-box" v-for="(j,jindex) in i.stockBackDetailsList" :key="i.id">
						<view class="col" style="width:15%">
							卷{{jindex + 1}}
						</view>
						<view class="col" style="padding: 0 10rpx;">
							{{j.materialMeters}}
						</view style="padding: 0 10rpx;">
						<view class="col" style="min-height:10rpx;width:25%" @click="openRfidModal(j.rfid)">
							{{j.rfid ? '*' + j.rfid.slice(16) : ' '}}
						</view>
						<view class="col">
							<button @click="sacnFn(index,jindex)">扫描</button>
						</view>
						<view class="col">
							<button @click="tagFn(index,jindex)">生成</button>
						</view>
					</view>
					<view class="footer-btn-warp" style="margin-top: 20rpx;">
						<button class="cancel" style="color:#333" @click="dtlDataListDlt(index)">删除</button>
						<button class="upload" style="color:#333" @click="listUpdate(i,index)">修改</button>
					</view>
				</view>
			</li>
		</ul>
		<view class="footer-btn-warp" style="margin-top: 20rpx;">
			<button class="cancel" style="background-color:red" @tap="$utils.back()">取消</button>
			<button class="upload" style="background-color:blue" @click="submitCheck">确定</button>
		</view>
		<uni-popup ref="addModal" type="bottom">
			<view class="addModal-content">
				<view class="select-warp">
					<view class="label">
						选择面料
					</view>
					<view class="show-text" @click="openSelectModal">
						{{!selectMaterialDtl.materialName ? '请选择物料' : selectMaterialDtl.materialName }}
					</view>
					<view class="add-icon">
						+
					</view>
				</view>
				<view style="height:40rpx;border-bottom: 1px solid #ccc;">

				</view>
				<view class="ul">
					<view class="li" v-for="(i,index) in selectMaterialDtl.stockBackDetailsList">
						<view class="delete-icon" @click="materialMetersListDelete(index)">
							-
						</view>
						<view class="li-label">
							卷{{index + 1}}
						</view>
						<view class="input">

							<input type="number" :value="i.materialMeters" @input="((e)=>inputChange(e,index))">
						</view>
					</view>

				</view>
				<!-- <button class="add-btn" @click="addList">在添加一卷</button> -->
				<view class="footer-btn-warp" style="margin-top: 20rpx;">
					<button class="cancel" style="background-color:red" @click="closeaddModal">取消</button>
					<button class="upload" style="background-color:blue" @click="closeaddModal">确定</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" type="bottom">
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
				swiperWidth="750"></u-tabs-swiper>
			<view class="search-box" v-if="current == 0">
				<ul>
					<li @click="selectMaterialList(i)" v-for="i in pickingToday" :key="i.id">
						{{i.name}}
					</li>
					<view class="no-data" v-if="pickingToday.length == 0">
						暂无今日领取面料数据
					</view>
				</ul>
			</view>
			<view class="search-box" v-if="current == 1">
				<view class="input-warp">
					<u-input v-model="req.search" :searchIcon="true" :border="true" placeholder="请输入物料名称或编码"
						@search="getSelectMaterialList" class="search-input" />
				</view>
				<ul style="height:60vh;overflow-y: scroll;">
					<li @click="selectMaterialList(i)" v-for="i in materialData" :key="i.id">
						{{i.name}}
					</li>
					<view class="no-data" v-if="materialData.length == 0">
						暂无数据
					</view>
				</ul>
			</view>
		</uni-popup>
		<uni-popup ref="alertDialog" type="dialog">
			<view  style="color:#fff;font-size: 34rpx;">
				{{showModalId}}
			</view>
		</uni-popup>
	</div>
</template>

<script>
	import scan from './scan'
	export default {
		name: "xx",
		components: {
			scan
		},
		data() {
			return {
				dtlData: {},
				isEdit: false,
				swiperCurrent: 0,
				current: 0,
				list: [{
					name: '今日领取的面料'
				}, {
					name: '选择其他'
				}],
				userInfo: this.$storage.getStorageSync('userInfo'),
				form: {
					operatorId: this.$storage.getStorageSync('userInfo').id,
					backDetailList: [],
				},
				req: {
					userId: this.$storage.getStorageSync('userInfo').id,
					pageNum: 1,
					pageSize: 30,
					search: null,
					materialCode: null,
				},
				pickingToday: [],
				materialData: [],
				selectMaterialDtl: {},
				updateIndex: null,
				showModalId: null,
			}
		},
		onLoad(option) {
			const v = this
			uni.getStorage({
				key: 'reviewDtl',
				success: function(res) {
					console.log(res)
					v.dtlData = res.data
				},
				fail(err) {
					v.getDtl(option.id)
				}
			});

		},
		created() {
			this.selectList()
			this.getSelectMaterialList()
		},
		methods: {
			dialogClose(){
				this.$refs.alertDialog.close()
			},
			openRfidModal(id) {
				this.showModalId = id
				this.$refs.alertDialog.open()
			},
			closeaddModal() {
				this.$refs.addModal.close()
			},
			submitCheck() {
				uni.showLoading({
					title: '正在提交'
				})
				const v = this
				var rfidItems = []
				for (var i = 0; i < v.dtlData.checkDetailsInfoList.length; i++) {
					const element = v.dtlData.checkDetailsInfoList[i]
					for (var j = 0; j < element.stockBackDetailsList.length; j++) {
						const jelement = element.stockBackDetailsList[j]
						if (!jelement.rfid) {
							this.$msg.showToast('请扫描或生成所有面料！')
							return
						} else {
							rfidItems.push(jelement.rfid)
						}
					}
				}
				const obj = {
					"userId": v.req.userId,
					"plcCode": "1",
					"rfidItems": rfidItems,
					"stockChangeType": "16",
					"remark": "退仓复合"
				}
				
				uni.request({
					url: 'http://120.79.80.64:8050' + '/cloudApi/stockBack/submitCheck',
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
					},
					data: v.dtlData,
					success: res => {
						console.log(res)
						if (res.data.code == 200) {
							this.$http.HandleMacStockInOut(obj).then(res => {
								console.log(res)
								if (res.code === 0) {
									this.$msg.showToast(res.msg || '操作成功！')
									this.timer = setTimeout(() => {
										this.$utils.openNew(`/pages/warehouse/review`)
									}, 2000)
								}
							})

						}
						uni.hideLoading()
					},
					fail() {
						uni.hideLoading()
					}
				});
			},
			tagFn(index, jindex) {
				const v = this
				v.dtlData.index = index
				v.dtlData.jindex = jindex
				uni.setStorage({
					key: 'reviewDtl',
					data: v.dtlData,
					success: function() {
						v.$utils.open('/pages/warehouse/tag')
					}
				});
			},
			sacnFn(index, jindex) {
				const v = this
				v.dtlData.index = index
				v.dtlData.jindex = jindex
				uni.setStorage({
					key: 'reviewDtl',
					data: v.dtlData,
					success: function() {
						v.$utils.open('/pages/warehouse/scan')
					}
				});
			},
			getDtl(_id) {
				console.log(_id)
				const v = this
				uni.request({
					url: 'http://120.79.80.64:8050' + '/cloudApi/stockBack/checkDetails',
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
					},
					data: {
						stockBackId: _id
					},
					success: res => {
						this.dtlData = res.data.data
						v.dtlData.checkerId = this.$storage.getStorageSync('userInfo').id
						console.log(this.dtlData)
					},
				});
			},
			submitBack() {
				const v = this
				console.log(v.form)
				uni.request({
					url: 'http://120.79.80.64:8050' + '/cloudApi/stockBack/submitBack',
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
					},
					data: v.form,
					success: res => {
						console.log(res)
						if (res.data.code == 200) {
							this.$msg.showToast('操作成功！')
							this.$utils.back()
						}
					},
				});

			},
			dtlDataListDlt(index) {
				this.dtlData.checkDetailsInfoList.splice(index, 1)
			},
			materialMetersListDelete(index) {
				this.dtlData.checkDetailsInfoList[this.updateIndex].stockBackDetailsList.splice(index, 1)
			},
			listUpdate(i, index) {
				console.log(i)
				this.selectMaterialDtl = i
				this.updateIndex = index
				this.$refs.addModal.open()
			},
			listDelete(index) {
				this.form.backDetailList.splice(index, 1)
			},
			pushList() {
				if (this.updateIndex === null) {
					this.form.backDetailList.push(this.selectMaterialDtl)
				} else {
					this.form.backDetailList[this.updateIndex] = this.selectMaterialDtl
				}

				this.selectMaterialDtl = {}
				this.$refs.addModal.close()
			},
			inputChange(e, index) {

				this.selectMaterialDtl.stockBackDetailsList[index].materialMeters = e.detail.value
				console.log(this.selectMaterialDtl)
			},
			tabsChange(index) {
				this.swiperCurrent = index;
				this.current = index;
			},
			addList() {
				this.selectMaterialDtl.materialMetersList.push({
					"id": "1565274397500047361",
					"stockBackId": "1565274397445521410",
					"materialId": "01.002.0043",
					"materialMeters": 0,
					"oldMaterialMeters": 0,
					"rfid": ""
				})
			},
			selectMaterialList(i) {
				const v = this
				this.dtlData.checkDetailsInfoList[this.updateIndex].materialId = i.code
				this.dtlData.checkDetailsInfoList[this.updateIndex].materialName = i.name
				console.log(i)
				console.log(this.updateIndex)
			},
			openSelectModal() {

				this.$refs.popup2.open()
			},

			getSelectMaterialList() {
				const v = this
				uni.request({
					url: 'http://120.79.80.64:8050' + '/cloudApi/material/selectList',
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
					},
					data: v.req,
					success: res => {
						console.log(res)
						this.materialData = res.data.data
					},
				});
			},
			selectList() {
				const v = this
				uni.request({
					url: 'http://120.79.80.64:8050' + '/cloudApi/stockBack/getPickingToday',
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
					},
					data: v.req,
					success: res => {
						console.log(res)
						this.pickingToday = res.data.data
					},
				});
			},
			openModal() {
				this.$refs.addModal.open('bottom')
			},
		},
	}
</script>

<style scoped lang="less">
	.review-ul {
		padding: 0 20rpx;

		li {
			background-color: #fff;
			border-radius: 6rpx;
			list-style: none;
			margin-top: 20rpx;

			.title {
				height: 100rpx;
				line-height: 100rpx;
				font-size: 30rpx;
				border-bottom: 1px solid #dcdcdc;
				padding: 0 20rpx;
				overflow: hidden;
			}

			.lists {
				.list-box {
					overflow: hidden;
					line-height: 80rpx;

					.col {
						float: left;
						width: 20%;
						text-align: center;
						overflow: hidden;

						button {
							width: 80%;

						}
					}
				}
			}
		}
	}

	.footer-btn-warp {
		display: flex;
		padding: 20rpx;

		button {
			width: 48%;
			color: #fff;
		}
	}

	.search-box {
		.input-warp {
			padding: 40rpx;
		}

		.search-input {}

		background-color: #fff;

		text-align: center;

		ul {
			li {
				padding: 25rpx 30rpx;
				border-bottom: 1rpx solid #dcdcdc;
				list-style: none;
			}
		}

		.no-data {
			padding: 100rpx;
		}
	}

	.addModal-content {
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding-top: 40rpx;

		.footer-btn-warp {
			display: flex;
			padding: 20rpx;

			button {
				width: 48%;
				color: #fff;
			}
		}

		.ul {

			.li {
				display: flex;
				justify-content: space-between;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 20rpx;

				.input {
					width: 70%;

					input {
						border: 1rpx solid #dcdcdc;
						height: 78rpx;
						line-height: 78rpx;
						padding: 0 20rpx;
					}
				}
			}

			.delete-icon {
				height: 80rpx;
				width: 80rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 40rpx;
				color: #fff;
				background-color: #ccc;
			}
		}

		.select-warp {
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.show-text {
				width: 70%;
				border: 1rpx solid #dcdcdc;
				padding: 0 20rpx;
			}

			.add-icon {
				height: 80rpx;
				width: 80rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 40rpx;
				color: #fff;
				background-color: #ccc;
			}
		}
	}

	.ul {
		.li {
			background-color: #fff;
			border-radius: 5rpx;
			margin: 20rpx 20rpx 0;

			.label {
				height: 100rpx;
				line-height: 100rpx;
				font-weight: 30rpx;
				border-bottom: 1rpx solid #ccc;
				padding: 0 20rpx;

			}

			.lists {
				border-bottom: 1rpx solid #ccc;

				.list-box {
					height: 100rpx;
					line-height: 100rpx;
					display: flex;
					justify-content: space-between;
					padding: 0 20rpx;
				}
			}

			.list-btn-warp {
				display: flex;
				padding: 20rpx;

				button {
					width: 48%;
				}
			}
		}
	}

	.add-header {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		font-weight: bold;
		overflow: hidden;
		padding: 20rpx;

		button {
			width: 200rpx;
			color: #fff;
			background-color: red;
			float: right;
			margin: 14rpx 0;
		}
	}
</style>