<template>
	<view class="billing_box_bg">
    <app-tabs :tabs="tabs" :currentTab="tabIndex" @change="change" itemWidth="50%"/>
    <view class="input-wrap">
			<view class="search-bar">
				<app-search-module v-if="tabs[tabIndex].name=='库存预警'" v-model="py" placeholder="输入商品名拼音首字母查询" @input="searchFnContrapose"/>
				<app-search-module v-else v-model="py" placeholder="输入商品名拼音首字母查询" @input="searchFn"/>
			</view>
      <!--<view v-if="loginInfo.super" class="city-select text-line">-->
				<!--<DorpdownSelect :menuObj.sync="menuObj" :selectItemId.sync="shopId" top="0" @selectSussess="selectSussess"></DorpdownSelect>-->
			<!--</view>-->
		</view>

		<view v-if="tabs[tabIndex].name=='库存预警'" class="scroll-middle_bx">
			<!--内容部分 start -->
			<!--内容部分 start -->
			<block v-if="!$util.isEmpty(filterProductInfoContrapose)">
<!--				<view class="item_list_bx" v-for="(classItem, classIndex) in filterProductInfoContrapose" :key="classIndex" :id="`class_${classItem.classId}`">-->
<!--				</view>-->
					<!--					<text v-else>当前库存充足</text>-->
				<scroll-view scroll-y class="item_list_bx" @scrolltolower="loadMore" lower-threshold="100" style="width: 100%">
					<template v-for="(productItem, productIndex) in filterProductInfoContrapose">
						<CommodityStock
							:isPrice="false"
							:type="tabs[tabIndex].key"
							:key="productIndex"
							:info="productItem"
						></CommodityStock>
					</template>
				</scroll-view>
			</block>

			<block v-else>
				<view style="width: 100%">
					<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(filterProductInfoContrapose)"/></view>
			</block>
		</view>



		<view v-else class="scroll-middle_bx">
			<scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop">
				<div v-for="(item, index) in filterProductInfo" :key="index" class="tab-bar-item" :class="[classIndex == index ? 'active' : '']" :data-current="index" @tap.stop="swichClass(index)">
					<text>{{ item.className || "" }}</text>
				</div>
			</scroll-view>
<!--			<scroll-view scroll-y class="right-box" v-if="currentTab == index" :scroll-into-view="scrollClassId">-->
				<scroll-view scroll-y class="right-box" :scroll-into-view="scroll_into_view" scroll-with-animation="true"
																	@scroll="scroll_detail"
																	lower-threshold="100"
																	@scrolltolower="scroll_bottom">
				<!--内容部分 start -->
				<!--内容部分 start -->
				<block v-if="!$util.isEmpty(filterProductInfo)">
					<view class="item_list_bx selectAll" v-for="(classItem, classIndex) in filterProductInfo" :key="classIndex" :id="`class_${classIndex}`">
						<view class="item_list_title" v-if="!$util.isEmpty(classItem.child)"> {{ classItem.className }}</view>
						<text v-if="tabs[tabIndex].name=='库存预警'&&$util.isEmpty(classItem.child)">当前库存充足</text>
						<template v-for="(productItem, productIndex) in classItem.child">
							<CommodityStock
								:isPrice="false"
								:type="tabs[tabIndex].key"
								:key="productIndex"
								:info="productItem"
							></CommodityStock>
						</template>
					</view>
				</block>
				<block v-else>
					<view style="width: 100%">
						<app-wrapper-empty  title="暂无数据" :is-empty="$util.isEmpty(filterProductInfo)"/>
					</view>
				</block>
				<!--内容部分 end -->
			</scroll-view>
		</view>
		<!-- :maskClosable="false" -->
    <kd-entrance></kd-entrance>
	</view>
</template>

<script>
import AppSearchModule from "@/components/module/app-search";
import AppTabs from "@/components/plugin/tabs";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import CommodityStock from "../components/CommodityStock";
import { STOCK_TYPE } from "@/utils/declare";
import productMins from "@/mixins/product";
import productContraposeMins from "@/mixins/productContrapose";
import { selectShop } from "@/mixins";
import { mapGetters } from "vuex";
import DorpdownSelect from "@/components/module/dorpdownSelect";
export default {
	name: "stock_manage", // 开单
	components: {
		AppTabs,
		AppSearchModule,
		AppWrapperEmpty,
		CommodityStock,
		DorpdownSelect
	},
	mixins: [productMins, selectShop,productContraposeMins],
	data() {
		return {
			STOCK_TYPE,
			autoLoad: false, //不自动请求数据  自定义请求
			pageType: "stock",
			tabIndex: 0,
			tabs: [
				{
					name: "库存预警",
					key: STOCK_TYPE.WARN
				},
				{
					name: "库存管理",
					key: STOCK_TYPE.MANAGE
				}
			]
		};
	},
	computed:{
		...mapGetters(["getMyShopInfo","getLoginInfo"]),
	},
	onLoad() {
		let type = this.tabs[this.tabIndex].key == STOCK_TYPE.WARN ? "waring" : "";
		// 当前门店
		// this.shopId = this.userInfo.id;
		this.shopId = this.getMyShopInfo.id;
		if(type=="waring"){
			this.initDataContrapose({ type, shopId: this.shopId });
		}else{
			this.initData({ type, shopId: this.shopId });
		}

	},

	methods: {
		affirm(val) {
			if (val.index === 0) {
				this.modalCancel();
			} else {
			}
		},
		change(e) {
			if (this.tabIndex == e.index) {
				return false;
			} else {
				uni.showLoading({
					title: "加载中"
				});
				this.tabIndex = e.index;
				this.tabs[this.tabIndex].key;
				let type = this.tabs[this.tabIndex].key == STOCK_TYPE.WARN ? "waring" : "";
				if(type=="waring"){
					this.filterProductInfoContrapose = this.allFilterProductInfoContrapose;
					uni.hideLoading();
					// this.initDataContrapose({ type, shopId: this.shopId });
				}else{
					this.initData({ type, shopId: this.shopId });
				}
			}
		},
		// searchFn() {
		// 	// uni.showLoading({
		// 	// 	title: "加载中"
		// 	// });
		// 	// if(type=="waring"){
		// 	// 	this.initDataContrapose({ type, shopId: this.shopId });
		// 	// }else{
		// 	// 	this.initData({ type, shopId: this.shopId });
		// 	// }
		// 	// this.initData({ shopId: this.shopId });
		// },
		scrollTop() {},
		initProductInfo() {
			this.filterProductInfoContrapose = [];
			this.page = 1;
			this.isMore = true;
			},
		selectSussess(val) {
			uni.showLoading({
				title: "加载中"
			});
			this.initProductInfo();
			let type = this.tabs[this.tabIndex].key == STOCK_TYPE.WARN ? "waring" : "";
			this.shopId = val.selectItem.id;
			// this.initData({ type, shopId: this.shopId });
			if(type=="waring"){
				this.initDataContrapose({ type, shopId: this.shopId });
			}else{
				this.initData({ type, shopId: this.shopId });
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.billing_box_bg {
	height: 100%;
	display: flex;
	flex-direction: column;
	.input-wrap {
		display: flex;
		padding: 22px 20px 22px 30px;
		.search-bar {
			flex: 1;
		}
		.city-select {
			display: flex;
			flex-shrink: 0;
			align-items: center;
			margin-right: 15upx;
			margin-left: 45px;
			background-color: #ffff;
			.iconfont {
				margin-left: 20upx;
				font-size: 30upx;
			}
		}
	}
	.scroll-middle_bx {
		flex: 1;
		display: flex;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.tab-view {
		height: 100%;
		width: 170upx;
		flex-shrink: 0;
		background-color: #f0f2f6;
		.tab-bar-item {
			position: relative;
			width: 170upx;
			height: 90upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26upx;
			color: #444;
			font-weight: 400;
			.tag {
				display: flex;
				padding: 0 20px;
				align-items: center;
				position: absolute;
				right: 0;
				top: 0;
				height: 32px;
				background: #ff2842;
				border-radius: 16px;
				color: #fff;
				font-size: 20px;
			}
      &:last-child{
        margin-bottom: 110upx;
      }
		}

		.active {
			position: relative;
			color: $mainColor;
			font-size: 26px;
			background: #fff;
		}

		.active::before {
			content: "";
			position: absolute;
			border-left: 8upx solid $mainColor;
			height: 100%;
			left: 0;
		}
	}
	.right-box {
		height: 100%;
		flex: 1;
		box-sizing: border-box;
	}
	.item_list_bx {
		padding: 40px 16px;
    //&:last-child{
    //  margin-bottom: 70upx;
    //}
	}
	.item_list_title {
		margin-bottom: 20px;
		font-size: 24px;
		font-weight: 600;
		color: #666666;
	}
	.select-cmd_bx {
		& .kc {
			color: #999999;
			font-size: 28px;
			font-weight: 400;
			margin-bottom: 60px;
			text-align: center;
			margin-top: 10px;
		}
		& .num_bx {
			display: flex;
			align-items: center;
			margin-bottom: 80px;
			& > input {
				width: 212px;
				height: 80px;
				border: 1px solid #dddddd;
				border-radius: 4px;
				text-align: center;
				margin-right: 24px;
			}
		}
	}
}
</style>
