<template>

	<view>
		<headerTo act_index="2" />

		<!-- 圆圈扩散 -->
		<view  v-if="list.length<=0" class="point point-flicker" @click="scan">
			<image src="../static/images/my_icon_6.png" class="scanTextsImgs"></image>
			<view class="scanTexts">扫码入库</view>
		</view>
		<!-- 圆圈扩散end -->

		<view class="list" v-if="list.length>0">
			<view class="item flex-y-center" v-for="(item,index) of list" :key='index'>
				<view class="flex-grow-1">
					<view class="ft30 box-pack-between">
						<view class="flex-y-center">
							<view class="text-1" style="width: 430rpx;">{{item.name}}</view>
						</view>
						<!-- 	<button @click="confirmSpecs(index)" size="mini"
						style="margin: 0;background: #3b93fc;color: #fff;" type="default">确定入库</button> -->
					</view>
						<block v-if="item.spec.length>0 && item.is_gg == 2">
							<view v-for="(goods,idx) of item.spec" :key='idx' class="item_spec">
								<view class="ft26 box-pack-between item-center">
									<view class="flex-y-center">
										<text class="stock">当前库存:{{goods.inventory}}</text>
									</view>
									<uni-number-box @change="changeValue" :value="goods.number" :min="-goods.inventory" :max="9999"
										:index='index' :idx='idx' />
								</view>
								<view class="box-pack-between ft26 pdt">
									<text class="specs"> 规格：￥{{goods.growth}}/{{goods.spec}}</text>
									<!-- <button @click="confirmSpecs(index,idx)" size="mini" style="margin: 0;background: #3b93fc;color: #fff;" type="default">确定入库</button> -->
								</view>
							</view>
						</block>
						
						<block v-else>
							<view class="ft26 box-pack-between item-center">
								<view class="flex-y-center">
									<text class="stock">当前库存:{{item.stock}}</text>
								</view>
								<uni-number-box @change="changeValue" :value="item.number" :min="-item.stock" :max="999"
									:index='index' />
							</view>
							<view class="box-pack-between ft26">
								<text class="specs"></text>
							</view>
						</block>
				</view>
			</view>
			
			<button @click="confirmSpecs(0)" style="background: #3b93fc;color: #fff;width: 650rpx;margin: 50px auto;margin-bottom: 30rpx;"
				type="default">确定入库</button>
				
			<button @click="cancel" style="background: #999;color: #fff;width: 650rpx;margin: 50px auto; margin-top: 0;"
				type="default">取消入库</button>	
				
		</view>
		
	</view>
</template>

<script>
	import headerTo from "../components/header";
	export default {
		components: {
			headerTo,
		},
		data() {
			return {
				list: [],
				result:'',
			}
		},
		mounted() {
			// this.http(1101209)
		},
		methods: {
			//扫描核销
			scan() {
				uni.scanCode({
					success: (res) => {
						console.log(res, "eeeee")
						this.result=res.result;
						this.http()
						
					}
				});
			},
			cancel(){
				this.list=[]
			},
			// 新增减少库存
			changeValue({
				index,
				idx,
				inputValue
			}) {
				if (idx || idx === 0) {
					let inventory = Number(this.list[index].spec[idx].inventory)
					this.list[index].spec[idx].number = inputValue;
				} else {
					let stock = this.list[index].stock 
					this.list[index].number = inputValue;
				}
			},

			confirmSpecs(index,idx) {
				let stock, specs, data;
				uni.showModal({
					title: '提示',
					content: `是否入库${this.list[index].name}?`,
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if(res.confirm){
							 if (this.list[index].spec) {
								 this.list[index].spec.forEach((v)=>{
								      v.inventory = Number(v.inventory) + Number(v.number)
								 })
							 	data = {
							 		spec_arr: JSON.stringify([{
							 			spec: this.list[index].spec,
							 			id: this.list[index].id,
							 		}])
							 	}
							 } else {
								let stock = Number(this.list[index].stock) + Number(this.list[index].number);
							 	data = {
							 		spec_arr: JSON.stringify([{
							 			stock,
							 			id: this.list[index].id,
							 		}])
							 	}
							 }
							 this.enit(data)
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},

			enit(data) {
				this.request({
					url: "Smdcshop/kucun_edit",
					data,
				}).then(res => {
					if (res.code == '200') {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(()=>{
							this.http();
						},2e3)
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},

			http() {
				let list = [];
				this.request({
					url: "Smdcshop/kucun_code",
					data: {
						code: this.result
					}
				}).then(res => {
					if (res.code == '200' || res.code == 200) {
						list.push(
							res.data
						)
						list.forEach((v, i) => {
							v.is_fold = false
							if (v.spec && v.is_gg == 2 && Array.isArray(v.spec)) {
								v.spec.forEach((g, l) => {
									g.number = 0;
								})
							} else {
								v.number = 0
							}
						})
						this.list = list;
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},

		}
	}
</script>

<style>
	
	.list .item {
		padding: 20rpx;
		border-bottom: 1rpx solid #F1F1F1;
	}

	.item-center {
		padding: 30rpx 0;
	}

	.item_spec {
		padding: 0rpx 20rpx 20rpx 20rpx;
		border-bottom: 1rpx solid #F1F1F1;
	}
	
	.list .item_spec:last-child
	{
		border-bottom: none;
    }

	.specs {
		color: #FF5722;
	}

	.stock {
		color: #C9271B;
	}

	.pof {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.confirm {
		background: #007AFF;
		color: #fff;
		margin: 0 10rpx;
	}

	.cancel {
		margin: 0 10rpx;
	}

	/* 圆圈扩散 */
	.point {
		width: 400rpx;
		height: 400rpx;
		position:
			/* absolute */
		;
		left: 170rpx;
		top: 220rpx;
		background: linear-gradient(180deg, #6fa5ff, #438aff);
		position: relative;
		border-radius: 50%;
	}

	/* 设置动画前颜色 */
	.point-flicker:after {
		background: linear-gradient(180deg, #6fa5ff, #438aff);
	}

	/* 设置动画后颜色 */
	.point-flicker:before {
		background: linear-gradient(180deg, #6fa5ff, #438aff);
	}

	/* 设置动画 */
	.point-flicker:before,
	.point-flicker:after {
		content: '';
		width: 400rpx;
		height: 400rpx;
		position: absolute;
		left: 10%;
		top: 10%;
		margin-left: -40rpx;
		margin-top: -40rpx;
		border-radius: 50%;
		animation: warn 1.5s ease-out 0s infinite;
	}


	/* @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 */
	@keyframes warn {

		0% {
			transform: scale(0.5);
			opacity: 1;
		}

		30% {
			opacity: 1;
		}

		100% {
			transform: scale(1.4);
			opacity: 0;
		}
	}

	/* 圆圈扩散 end*/
	.scanTextsImgs {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		left: 50%;
		top: 45%;
		transform: translate(-50%, -50%);
		z-index: 998;
	}

	.scanTexts {
		position: absolute;
		left: 50%;
		top: 70%;
		transform: translate(-50%, -50%);
		color: #fff;
		font-size: 36rpx;
		z-index: 999;
	}
</style>
