<template>
	<view class="location-edit">
		<ul>
			<li v-for="(i,index) in listData" :key="i.id">
				<view class="label">
					物料编码：{{i.materialCode}}
					<view class="" @click="deteleFn(i,index)">
						<image style="width:36rpx;height:36rpx" src="@/static/images/delete.png" mode=""></image>
					</view>
				</view>
				<view class="label">
					物料名：{{i.materialName}}
				</view>
				<view class="label">
					<view class="">
						数量：{{i.quantity}}
					</view>
					<view class="">
						所在仓库：{{i.houseName}}
					</view>
				</view>
				<view class="label" @click="open(i,index)">
					货架：{{ i.PlaceAreaName || '点击选择货架'}} >
				</view>
			</li>
		</ul>
		<view class="footer-btn">
			<view class="shaomiao" @click="scan()">
				<image style="width:36rpx;height:36rpx" src="@/static/images/shaomiao.png" mode=""></image>
				扫描
			</view>
			<view class="set"  @click="open()">
				批量设置库存
			</view>
		</view>
		<view class="fixed-btn">
			<button style="background-color: #1A3AF0;color:#fff" @click="submitFn">提交</button>
			<button @click="backFn">取消</button>
		</view>
		<uni-popup ref="popup" type="top">
			<view class="search-box">
				<view class="">
					<input v-model="searchText" @input="search" class="uni-input" @ placeholder="输入货架名称进行搜索如A5" />
				</view>
				<ul>
					<li @click="selectMaterialList(i)"  v-for="(i,index) in range" :key="i.id">
						{{i.name}}
					</li>
				</ul>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const pda = uni.requireNativePlugin('js-pda');
	export default {
		data(){
			return {
				timer: null,
				data: {},
				isReading: true,
				rfidCode: '',
				scanCode: '',
				listData:[],
				range:[],
				rangeCopy:[],
				searchText:'',
				setIndex:0,
			}
		},
		created(){
			this.getStockArea()
		},
		methods:{
			deteleFn(item,index){
				this.listData.splice(index,1)
			},
			backFn(){
				uni.navigateBack()
			},
			submitFn(){
				const req = [];
				if(this.listData.length == 0){
					uni.showToast({
						icon:"none",
					    title: '请扫描物料',
					    duration: 1000
					})
					return
				}
				for (var i = 0; i < this.listData.length; i++) {
					if(this.listData[i].PlaceAreaName == null){
						uni.showToast({
							icon:"none",
						    title: '请选择货架',
						    duration: 1000
						})
						return
					}
					req.push({
						placeareaid:this.listData[i].PlaceAreaId,
						id:this.listData[i].id
					})
				}
				
				uni.request({
					url: 'http://120.79.80.64:8050' + '/cloudApi/stockDetail/setAreaId',
					data: req,
					method: 'POST',
					success: (res) => {
						console.log(res)
						if(res.data.code == 200){
							uni.showToast({
							    title: '设置成功',
							    duration: 1000
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						}
					},
					fail: (err) => {
						console.log(err)
					}
				});
				
			},
			search(){
				const v  = this
				v.range = []
				const range = JSON.parse(JSON.stringify(v.rangeCopy))
				for (var i = 0; i < range.length; i++) {
					if(range[i].name.indexOf(v.searchText) != -1){
						v.range.push(range[i])
					}
				}
			},
			open(item,index){
				console.log(index)
				if(index != undefined){
					this.$refs.popup.open('top')
					this.setIndex = index
				}else{
					this.$refs.popup.open('top')
					this.setIndex = 'all'
				}
				
			},
			selectMaterialList(i){
				const v = this
				console.log(i)
				if(this.setIndex == 'all'){
					for (var j = 0; j < v.listData.length; j++) {
						v.listData[j].PlaceAreaId = i.id
						v.listData[j].PlaceAreaName = i.name
					}
				}else{
					v.listData[v.setIndex].PlaceAreaId = i.id
					v.listData[v.setIndex].PlaceAreaName = i.name
				}
				console.log(v.listData)
				this.$refs.popup.close()
			},
			getStockArea(){
				const v = this
				uni.request({
					url: 'http://120.79.80.64:8050' + '/cloudApi/stockArea/list',
					data: {},
					method: 'POST',
					success: (res) => {
						console.log(res)
						if(res.data.code == 200){
							this.range = res.data.data
							this.rangeCopy = res.data.data
						}
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			scan() {
				const v = this
				uni.scanCode({
					success(res) {
						uni.request({
							url: 'http://120.79.80.64:8050' + '/cloudApi/stockDetail/getMaterialInfoByQrCode',
							data: {
								qrCode:res.result
							},
							method: 'POST',
							success: (res) => {
								console.log(res.data)
								if(res.data.code == 200){
									for (var i = 0; i < v.listData.length; i++) {
										if(v.listData[i].materialCode == res.data.data.materialCode){
											uni.showToast({
												icon:"none",
											    title: '此物料已扫描',
											    duration: 1000
											})
											return
										}
									}
									v.listData.push({...res.data.data,PlaceAreaName:null})
								}
							},
							fail: (err) => {
								
							}
						});
					}
				})
			},
		},
	}
</script>

<style scoped lang="less">
	.fixed-btn{
		display: flex;
		position: fixed;
		bottom: 10rpx;
		left: 0;
		right: 0;
		button{
			width: 40%;
			margin: 0 5%;
		}
	}
	.search-box{
		height: 80vh;
		overflow-y: scroll;
		background-color: #fff;
		ul{
			height: 70vh;
			overflow-y: scroll;
		}
		input{
				height: 70rpx;
				padding: 10rpx;
				border:1rpx solid #dcdcdc;
				margin: 10rpx;
		}
		ul{
			
		}
	}
	.location-edit{
		.footer-btn{
			.set{
				height: 70rpx;
				line-height: 70rpx;
				background: #EF0000;
				text-align: center;
				margin: 20rpx 20rpx;
				border-radius: 10rpx;
				color: #fff;
			}
			.shaomiao{
				height: 70rpx;
				line-height: 70rpx;
				background: #fff;
				text-align: center;
				margin: 0 20rpx;
				border:2rpx solid #979797;
				border-radius: 10rpx;
				image{
					margin-right: 20rpx;
					position: relative;
					top: 10rpx;
				}
			}
		}
		ul{
			padding: 0;
			margin: 30rpx 18rpx 20rpx;
			li{
				padding: 5rpx 40rpx;
				list-style: none;
				background-color: #fff;
				margin-top: 20rpx;
				.label{
					height: 66rpx;
					line-height: 66rpx;
					display: flex;
					justify-content: space-between;
				}
				.fl{
					float: left;
				}
				.fr{
					float: right;
				}
			}
		}
	}
</style>