<template>
	<view class="page1">
		<view style="z-index: 99;width: 100%;">
			<view style="background: #fff;">
				<button size="default" type="default" @tap="goAddGoods" hover-class="is-hover">新增商品</button>
			</view>
			<view class="title-box">
				<uni-search-bar class="uni-mt-10" radius="5" placeholder="商品名称/货号/供应商" cancelButton="none"
					@confirm="search" @blur="search" @clear="clearSearch" />
			</view>
		</view>
		<view class="content-box" :style="{height:height - 224 +'rpx'}">
			<view class="content-left">
				<view class="left-box" v-if="gateType == ''" v-for="(item, index) in indexList" :key="item"
					:class="item.parentId ? 'left-box-hover':''" @tap="clickLeftBtn(index)">
					<text style="width: 100%;height: 90rpx;line-height: 90rpx;display: inline-block;overflow: hidden;"
						:class="item.parentId ? 'red' :''">{{item.categoryName}}</text>
				</view>
			</view>
			<view class="content-right">
				<view class="right-box" v-for="(item,index) in shopList" :key="index" @tap="backPrevPage(item)">
					<!-- 当商品的delFlag=0和未入库状态时，显示此遮罩，点击弹出弹窗提示不能操作 -->
					<!-- <view class="shop-mask" v-if="item.delFlag == 0 || item.inStorageStatus == 0"
						@tap.stop="clickMask(item)"></view> -->
					<view class="box-left">
						<img class="img-radius" :src="item.productPicture" alt="" v-if="item.productPicture">
						<view class="noPic" v-else>暂无图片</view>
					</view>
					<view class="box-right">
						<view class="box-right-name">
							{{item.productName == null ?'':item.productName}}
							<text style="color: red;" v-if="item.delFlag == 0">(已下架)</text>
						</view>
						<view class="box-right-num">{{item.productSn}}</view>
						<view class="box-right-price">
							<view class="price-box">
								<text>{{item.inStorageStatus==0?'待入库':item.purchasePrice == null ?'新商品':item.purchasePrice}}</text>
								<text>采购价</text>
							</view>
							<view class="price-box">
								<text>{{item.wholesalePrice}}</text>
								<text>批发价</text>
							</view>
							<view class="price-box">
								<text>{{item.price}}</text>
								<text>零售价</text>
							</view>
							<view class="price-box" @tap.stop="seeStockCount(item.stockCount,item.minusStockCount)">
								<text>{{item.stockCount + item.minusStockCount}}</text>
								<view>
									库存
									<uni-icons type="help" size="15"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="right-box" v-for="(item,index) in shopList1" :key="index" @tap="backPrevPage(item)">
					<view class="box-left">
						<img class="img-radius" :src="item.productPicture" alt="" v-if="item.productPicture">
						<view class="noPic" v-else>暂无图片</view>
					</view>
					<view class="box-right">
						<view class="box-right-name">{{item.productName == null ?'':item.productName}}</view>
						<view class="box-right-num">{{item.productSn}}</view>
						<view class="box-right-price">
							<view class="price-box">
								<text>{{item.inStorageStatus==0?'待入库':item.purchasePrice == null ?'新商品':item.purchasePrice}}</text>
								<text>采购价</text>
							</view>
							<view class="price-box">
								<text>{{item.wholesalePrice}}</text>
								<text>批发价</text>
							</view>
							<view class="price-box">
								<text>{{item.price}}</text>
								<text>零售价</text>
							</view>
							<view class="price-box" @tap.stop="seeStockCount(item.stockCount,item.minusStockCount)">
								<text>{{item.stockCount + item.minusStockCount}}</text>
								<view>
									库存
									<uni-icons type="help" size="15"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 显示正负库存弹窗 -->
		<uni-popup ref="showPopup" background-color="#fff">
			<view class="popup-pay-content" style="width: 550rpx;">
				<view class="popup-pay-title">
					<text>库存数</text>
				</view>
				<view style="width: 100%;height: 150rpx;">
					<view
						style="width: 200rpx;height: 130rpx;border: 3px solid #FFE4C4;border-radius: 10px;margin-top: 20rpx;padding-top: 10px;display: flex;flex-direction: column;text-align: center;float: left;margin-left: 20rpx;">
						<text style="font-weight: bold;">
							正数库存
						</text>
						<text style="font-size: 30rpx;color: #000;font-weight: bold;">
							{{zheng}}
						</text>
					</view>
					<view
						style="width: 200rpx;height: 130rpx;border: 3px solid #FFE4C4;border-radius: 10px;margin-top: 20rpx;padding-top: 10px;display: flex;flex-direction: column;text-align: center;float: left;margin-left: 40rpx;">
						<text style="font-weight: bold;">
							负数库存
						</text>
						<text style="font-size: 30rpx;color: #000;font-weight: bold;">
							{{fu}}
						</text>
					</view>
				</view>
				<view class="popup-pay-container" style="display: flex;margin-top: 50rpx;background: #89CFF0;">
					<view @tap='$refs.showPopup.close()'
						style="flex:1;text-align: center;border-right: 1px solid #eee;background: #088FEB;font-size:32rpx;">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				indexList: [],
				pageNum: 1, //分页的页码
				shopList: [],
				zheng:'',
				fu:'',
				shopList1: [],
				categoryId: '', //分类id
				searchName: '', //搜索框输入值
				height: 0,
				gateType:''
			}
		},
		onLoad() {
			this.height = wx.getSystemInfoSync().windowHeight
		},
		onShow() {
			this.getGategoryList()
		},
		methods: {
			seeStockCount(zheng,fu){
				this.zheng = zheng;
				this.fu = fu;
				this.$refs.showPopup.open()
			},
			//初始化获取分类列表
			getGategoryList() {
				this.tui.request("/app/productCategory/list", "get", {
					// shopId: 1,
				}, false, true).then((res) => {
					if (res.code == 200) {
						this.indexList = res.result;
						for (var i = 0; i < this.indexList.length; i++) {
							if (i == 0) {
								this.indexList[i].parentId = true
							} else {
								this.indexList[i].parentId = false
							}
						}
						this.categoryId = this.indexList[0].id
						this.getShareList();
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
			},
			//点击商品，返回上一页
			backPrevPage(item) {
				item.productId = item.id
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.carList1 = item
				prevPage.$vm.merge = 1
				uni.navigateBack({
					delta: 1
				})
			},
			//点击分类获取商品列表
			getShareList(type) {
				let data = {}
				if(type=='search'){
					this.gateType = 'search'
					data = {
						categoryId: "",
						searchStr: this.searchName,
						pageNum: this.pageNum,
						pageSize: '100'
					}
				}else{
					this.gateType = ''
					data = {
						categoryId: this.categoryId,
						searchStr: this.searchName,
						pageNum: this.pageNum,
						pageSize: '100'
					}
				}
				this.tui.request("/app/product/getShareList", "POST", data, false, false).then((res) => {
					if (res.code == 200) {
						if(type=='search'){
							this.shopList = []
							this.shopList1 = res.result.records
						}else{
							this.shopList1 = []
							this.shopList = res.result.records
						}
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
			},
			//跳转新增商品
			goAddGoods() {
				uni.navigateTo({
					url: "/package1/inventory/addGoods"
				})
			},
			//顶部搜索框
			search(e) {
				if(e.value == ''){
					this.searchName = ""
					this.getShareList()
				}else{
					this.searchName = e.value
					this.getShareList('search')
					
				}
			},
			//清空搜索条件
			clearSearch(){
				this.searchName = ''
				this.getShareList()
			},
			//未入库遮罩
			clickMask(item) {
				let title = ''
				if (item.delFlag == 0) {
					title = '请将商品上架后再操作！'
				} else {
					title = '请将上次入库的采购价维护后再进行操作！'
				}
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			//点击左侧菜单切换
			clickLeftBtn(index) {
				for (var i = 0; i < this.indexList.length; i++) {
					if (i == index) {
						this.indexList[i].parentId = true
					} else {
						this.indexList[i].parentId = false
					}
				}
				this.categoryId = this.indexList[index].id
				this.getShareList()
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	button {
		color: #ffffff !important;
		background: #5fd9ee !important;
		width: 95%;
		margin-top: 20rpx;
	}

	.page1 {
		display: flex;
		flex-direction: column;
		height: 100%;
		font-size: 28rpx;
	}

	.uni-tab__dot {
		padding: 0 4px;
		line-height: 15px;
		color: #ffffff;
		text-align: center;
		font-size: 12px;
		background-color: #ff0000;
		border-radius: 15px;
	}


	.uni-tab__text {
		font-size: 12px;
		color: #646566;
	}

	.title-box {
		background: #fff;
	}

	.content-box {
		background: #fff;
		flex: 1;
		display: flex;
	}

	.content-left {
		width: 170rpx;
		background: #eee;
		height: 100%;
		overflow: scroll;
	}

	.left-box {
		width: 100%;
		height: 90rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 90rpx;
		border-bottom: 1px solid #fff;
	}

	.left-box-hover {
		width: 100%;
		height: 90rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 90rpx;
		border-bottom: 1px solid #fff;
		background-color: #fff;
	}

	.red {
		border-right: 3px solid red;
	}

	.content-right {
		flex: 1;
		overflow-y: scroll;
	}

	.right-box {
		width: 100%;
		height: 190rpx;
		display: flex;
		border-bottom: 1px solid #eee;
		position: relative;
	}

	.box-left {
		width: 130rpx;
		height: 131rpx;
		background-size: 100%;
		margin: 25rpx 30rpx 35rpx 10rpx;
		border-radius: 20rpx;
	}

	.box-left img {
		width: 100%;
		height: 100%;

	}

	.box-right {
		margin-top: 17rpx;
	}

	.box-right-name {
		font-size: 30rpx;
		font-weight: bold;
	}

	.box-right-num {
		padding: 5rpx 0;
		color: #777;
	}

	.box-right-price {
		display: flex;
		font-size: 25rpx;
	}

	.price-box {
		display: flex;
		flex-direction: column;
		margin-right: 20rpx;
	}

	.price-box text:first-child {
		color: #ffa200
	}

	.uni-tab__cart-button-right,
	.uni-tab__cart-sub-right {
		display: none;
		flex: none;
	}


	.shop-mask {
		width: 100%;
		height: 190rpx;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.1);
	}

	.noPic {
		border-radius: 10px;
		width: 150rpx;
		height: 150rpx;
		text-align: center;
		line-height: 140rpx;
		color: #777;
		background: #eee;
	}
	.popup-pay-content {
		align-items: center;
		justify-content: center;
		padding: 15px;
		width: 500rpx;
		height: auto;
		background-color: #fff;
	}
	.popup-pay-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
	}
	
	.popup-pay-container {
		margin-top: 20rpx;
		height: 100rpx;
		border-radius: 10px;
		background: #088FEB;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1px solid #eee;
		border-top: 1px solid #eee;
		color: #fff;
	}
</style>