<template>
	<view>
		<headerTo act_index="1" />
		<view class="list">
			<view class="search-user flex-y-center ">
				<view class="search-content flex-y-center">
					<icon type="search" size="18" />
					<input confirm-type="search" v-model="seTval" @confirm="confirm" @input="getSearch"
						class="flex-grow-1" type="text" placeholder-style="font-size:26rpx" placeholder="请输入关键词" />
					<view class="flex-center" style="margin-left: 10rpx;" @click.stop="onDel" v-if="seTval">
						<icon type="clear" size="18" />
					</view>
				</view>
				<view class="search-btn" @click="search">
					搜索
				</view>
			</view>

			<view style="height: 100rpx;"></view>

			<view class="box-pack-between batch">
				<view class="flex-grow-1">
					<view class="flex-y-center">
						<view style="margin-right:0;" class="rund flex-center" v-if="checkedshow" @click="choiceAll()">
							<icon type="success_no_circle" size="12" v-if="checkedAll" />
						</view>
						<text style="margin-left: 10rpx;" class="ft28">全选</text>
					</view>
				</view>
				<button size="mini" type="default" @click="checkedshow=false" v-if="checkedshow"
					style="margin-right: 10rpx;">取消</button>
				<button size="mini" @click="choiceBatch" class="ft28 batch_btn">{{checkedshow?'确定入库':'批量入库'}}</button>
			</view>
			
			<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" @click="onFold(index)" >
						<view class="flex-y-center">
							<view v-if="checkedshow" class="rund flex-center" @click.stop="choice(index)">
								<icon type="success_no_circle" size="12" v-if="item.checked" />
							</view>
							<view class="text-1" style="width: 430rpx;">{{item.name}}</view>
						</view>
						<view class="flex-y-center">
							<button @click.stop="confirmSpecs(index)" size="mini"
								style="margin: 0;background: #3b93fc;color: #fff;" type="default">确定入库</button>
							  <image class="down" :class="item.is_fold?'down_act':''"
							   src="../static/images/down.png"></image>
						</view>
					</view>
					
					<view v-show="item.is_fold" class="fold">
						<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>
			</view>
			<view>
				<block v-if='list.length<=0'>
					<no-none></no-none>
				</block>
			</view>
		</view>

		<view style="height: 200rpx;"></view>
		<view class="wyb-pagination-page" v-if="count>0">
			<wyb-pagination :totalItems="count" :current='pages' :page-items="limit" @change="Change" />
		</view>
		<uni-popup ref="popup" type="center">
			<view class="skockHome">
				<view class="skockHomeTitle">
					批量修改库存数量
				</view>
				<form @submit="formSubmit">
					<view class="skockHomeput">
						<input type="number" name="number" placeholder="请输入库存数量" />
					</view>

					<button form-type="submit" style="background: #007AFF;color: #FFFFFF;" class="skockHomebtn"
						type="default">确定</button>
				</form>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import wybPagination from "@/components/wyb-pagination/wyb-pagination";
	import headerTo from "../components/header";
	export default {
		components: {
			headerTo,
			wybPagination
		},
		data() {
			return {
				act_index: 1,
				seTval: '',
				keywords: '',
				checkedshow: false,
				checkedAll: false,
				count: 1,
				limit: 10,
				pages: 1,
				list: [],
			}
		},
		onLoad() {
			this.http();
		},
		methods: {
			
			onFold(index){
				this.list[index].is_fold = !this.list[index].is_fold;
			},
			
			Change(e) {
				this.pages = e.current;
				this.http();
			},
			
			getSearch(e) {
				if (!e.detail.value) {
					this.keywords = "";
					this.pages = 1;
					this.http();
				}
				this.keywords = e.detail.value;
			},

			onDel() {
				this.seTval = '';
				this.keywords = "";
				this.pages = 1;
				this.http();
			},

			confirm(e) {
				this.keywords = e.detail.value;
				this.pages = 1;
				this.http();
			},

			search(e) {
				this.pages = 1;
				this.http();
			},

			choiceBatch() {
				if (this.checkedshow) {
					let list = getData(this.list);
					function getData(col) {
						return col
							.filter(item => item.checked)
					}
					if (!list.length) {
						uni.showToast({
							title: "请选择商品",
							icon: "none"
						})
						return
					}
					this.$refs.popup.open();
					return
				}
				this.checkedshow = true
			},

			choiceAll() {
				if (this.checkedAll) {
					this.list.forEach((v, i) => {
						v.checked = false;
					})
					this.checkedAll = false
				} else {
					this.list.forEach((v, i) => {
						v.checked = true;
					})
					this.checkedAll = true
				}
			},

			choice(index) {
				let list = JSON.parse(JSON.stringify(this.list))
				list[index].checked = !list[index].checked;
				this.list = list;
				let allArr = getData(this.list);
				this.checkedAll = this.list.length === allArr.length ? true : false;
				function getData(col) {
					return col
						.filter(item => item.checked)
						.map(item => item.id);
				}
			},
			// 批量修改库存
			formSubmit({
				detail
			}) {
				console.log(detail)
				let arr = [];
				this.list.forEach((v, i) => {
					if (v.checked) {
						if (v.spec && v.is_gg == 2 && Array.isArray(v.spec)) {
							v.spec.forEach((g, l) => {
								// g.number = detail.value.number;
								g.inventory = Number(g.inventory) + Number(detail.value.number);
							})
							arr.push({
								id: v.id,
								spec: v.spec,
							})
						} else {
							v.stock = Number(v.stock) + Number(detail.value.number);
							arr.push({
								id: v.id,
								stock: v.stock,
							})
						}
					}
				})
				let data = {
					spec_arr: JSON.stringify(arr)
				}
				
				this.$refs.popup.close();
				this.enit(data)
			},
			
			// 新增减少库存
			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) {
				// console.log(data ," this.list")
				// return
				this.request({
					url: "Smdcshop/kucun_edit",
					data,
				}).then(res => {
					if (res.code == '200') {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						this.checkedAll= false
						setTimeout(()=>{
							this.http();
						},2e3)
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},

			http() {
				this.request({
					url: "Smdcshop/kucun_goods_lists",
					data: {
						store_id: uni.getStorageSync("store_id"),
						page: this.pages,
						limit: this.limit,
						keywords: this.keywords,
					}
				}).then(res => {
					if (res.code == '200' || res.code == 200) {
						this.count = res.data.count;
						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 = res.data.list;
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},
		},
	}
</script>

<style>
	.skockHome {
		width: 600rpx;
		height: 400rpx;
		background: #FFFFFF;
		padding: 50rpx;
		border-radius: 10rpx;
		text-align: center;
	}

	.skockHomeTitle {
		padding: 20rpx 0;
		font-size: 35rpx;
	}

	.skockHomeput {
		padding: 20rpx 0;
		font-size: 30rpx;
		border: 1rpx solid #f1f1f1;
		margin-bottom: 30rpx;
	}

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

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

	.item_spec {
		padding: 0 20rpx;
	}

	.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;
	}

	.rund {
		height: 40rpx;
		width: 40rpx;
		margin-right: 10rpx;
		border: 1rpx solid #ccc;
		border-radius: 3px;
	}

	.batch {
		padding: 10rpx 10rpx;
	    border-bottom: 1rpx solid #f1f1f1;
	}
     
	.batch_btn {
		color: #FFFFFF;
		background: #FF5722;
		font-size: 26rpx;
		padding: 6rpx 15rpx;
	}

	.wyb-pagination-page {
		position: fixed;
		width: 100%;
		bottom: 0;
		background: #FFFFFF;
		padding: 10rpx 0;
		z-index: 999;
	}
	.down{
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
	}
	.item .down_act{
	   transform: rotate(180deg)
	}
	.fold .item_spec{
		border-bottom: 1rpx solid #F1F1F1;
	}
	
	.fold .item_spec:last-child
	{
		border-bottom: none;
    }
	 .pdt{
		    padding-bottom: 20rpx;
	 }
</style>
