<template>
	<!-- 商品列表 -->
	<view class="page1">
		<view class="title" style="z-index: 81;">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'padding-top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-search" :style="{'padding-top': menuButtonInfo.top +'px'}" @tap="goDetail('search')">
					<uni-icons type="search" size="18" style="margin: 9rpx;"></uni-icons>
					<input type="text" placeholder="搜索" @input="search" />
				</view>
			</view>
		</view>
		<view style="width: 100%;display: flex;height: 100%;padding-bottom: 60rpx;padding-top: 28%;position: fixed;top: 0;z-index:80;">
			<view class="content-left">
				<view class="left-box" v-for="(item, index) in indexList" :key="index"
					: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" style="padding-bottom: 140rpx;margin-bottom: 200rpx;">
				<view class="right-box" v-for="(item,index) in shopList" :key="index">
					<view style="position: relative;display: flex;">
						<view class="box-left" @tap="largeImg(item)">
							<view v-if="(item.buyCountNew!= null && item.buyCountNew!= undefined)" style="position: absolute;left: 110rpx;color: #fff;background: red;width: 45rpx;height: 40rpx;font-size: 28rpx;text-align: center;line-height: 40rpx;border-radius: 10rpx;">
								{{item.buyCountNew}}
							</view>
							<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"></view>
							<view class="box-right-price">
								<view class="price-box">
									<text>{{item.lunchBox}}</text>
									<text>餐盒费</text>
								</view>
								<view class="price-box">
									<text>{{item.startPayNum}}</text>
									<text>起售数量</text>
								</view>
								<view class="price-box" @tap="changeShow(index,'shopList')" style="flex: 1;text-align: right;padding-top: 26rpx;">
									<uni-icons type="down" size="18"></uni-icons>
								</view>
							</view>
						</view>
					</view>
					<view class="show-box" v-show="item.isShow">
						<view class="show-text" @tap="goDetail('goods',item)" style="border-right: 1px solid #fff;">
							<uni-icons type="compose" size="18"></uni-icons>
							编辑
						</view>
						<view class="show-text" @tap="isPush('shopList',index,item,item.isPush==1?0:1)" style="border-right: 1px solid #fff;">
							<uni-icons type="hand-up" size="18"></uni-icons>
							{{item.isPush == 0?'设为推荐':'取消推荐'}}
						</view>
						<view class="show-text" @tap="isMust('shopList',index,item,item.isMust==1?0:1)" style="border-right: 1px solid #fff;">
							<uni-icons type="star" size="18"></uni-icons>
							{{item.isMust == 0?'设为必点':'取消必点'}}
						</view>
						<view class="show-text" @tap="upDown('shopList',index,item,item.delFlag==1?0:1)" style="border-right: 1px solid #fff;">
							<uni-icons type="upload" size="18"></uni-icons>
							{{item.delFlag == 1?'下架':'上架'}}
						</view>
						<view class="show-text" @tap="remove(item)">
							<uni-icons type="trash" size="18"></uni-icons>
							删除
						</view>
					</view>
				</view>
			
				<view class="right-box" v-for="(item,index) in shopList1" :key="index">
					<view style="position: relative;display: flex;">
						<view class="box-left" @tap="largeImg(item)">
							<view v-if="(item.buyCountNew!= null && item.buyCountNew!= undefined)" style="position: absolute;left: 110rpx;color: #fff;background: red;width: 45rpx;height: 40rpx;font-size: 28rpx;text-align: center;line-height: 40rpx;border-radius: 10rpx;">
								{{item.buyCountNew}}
							</view>
							<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"></view>
							<view class="box-right-price">
								<view class="price-box">
									<text>{{item.lunchBox}}</text>
									<text>餐盒费</text>
								</view>
								<view class="price-box">
									<text>{{item.startPayNum}}</text>
									<text>起售数量</text>
								</view>
								<view class="price-box" @tap="changeShow(index,'shopList1')" style="flex: 1;text-align: right;padding-top: 26rpx;">
									<uni-icons type="down" size="18"></uni-icons>
								</view>
							</view>
						</view>
					</view>
					<view class="show-box" v-show="item.isShow">
						<view class="show-text" @tap="goDetail('goods',item)" style="border-right: 1px solid #fff;">
							编辑
						</view>
						<view class="show-text" @tap="isPush('shopList1',index,item,item.isPush==1?0:1)" style="border-right: 1px solid #fff;">
							<uni-icons type="hand-up" size="18"></uni-icons>
							{{item.isPush == 0?'设为推荐':'取消推荐'}}
						</view>
						<view class="show-text" @tap="isMust('shopList1',index,item,item.isMust==1?0:1)" style="border-right: 1px solid #fff;">
							<uni-icons type="star" size="18"></uni-icons>
							{{item.isMust == 0?'设为必点':'取消必点'}}
						</view>
						<view class="show-text" @tap="upDown('shopList1',index,item,item.delFlag==1?0:1)" style="border-right: 1px solid #fff;">
							<uni-icons type="upload" size="18"></uni-icons>
							{{item.delFlag == 1?'下架':'上架'}}
						</view>
						<view class="show-text" @tap="remove(item)" style="border-right: 1px solid #fff;">
							<uni-icons type="trash" size="18"></uni-icons>
							删除
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="bottom-box">
			<view class="bottom-btn" @tap="goDetail('goods')" style="background: rgba(0, 35, 28, 1);color: rgba(166, 255, 234, 1);">新增商品</view>
			<view class="bottom-btn" @tap="goDetail('type')">新增分类</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexList: [],
				shopList: [],
				shopList1: [],
				pageNum: 1,
				searchName: '',
				shopId:'',
				categoryId: '',
			}
		},
		filters: {
	
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.getGategoryList()
		},
		onLoad(option) {
			this.shopId = uni.getStorageSync('shopId')
			
		},
		onReachBottom() {
			if (this.pageNum >= this.pages) return;
			// this.status = 'loading';
			this.pageNum++;
			if(this.gateType == 'search'){
				this.getShareList('search');
			}else{
				this.getShareList();
			}
			
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			//顶部搜索框
			search(e) {
				this.pageNum = 1
				this.shopList1 = []
				this.shopList = []
				if (e == '') {
					this.searchName = ""
					this.getShareList()
				} else {
					this.searchName = e
					this.getShareList('search')
			
				}
			},
			changeShow(index,type){
				console.log("1111",index)
				console.log("1111",type)
				if(type == 'shopList'){
					this.shopList[index].isShow = !this.shopList[index].isShow
					console.log(this.shopList[index])
				}else{
					this.shopList1[index].isShow = !this.shopList1[index].isShow
					console.log(this.shopList1[index])
				}
				this.$forceUpdate()
			},
			isPush(type,index,item,value) {
				this.tui.request("/app/product/isPush", "POST", {
					id: item.id,
					isPush:value
				}, false, true).then((res) => {
					if (res.code == 200) {
						if(type == 'shopList'){
							this.shopList[index].isPush = value
						}else{
							this.shopList1[index].isPush = value
						}
						this.tui.toast('设置成功',1000)
					} else {
						this.tui.toast(res.message,1000)
					}
				}).catch((res) => {})
			},
			remove(v) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除该商品吗？',
					success: function (res) {
						if (res.confirm) {
							that.tui.request("/app/product/delById", "POST", {
								id: v.id
							}, false, true).then((res) => {
								if (res.code == 200) {
									that.getShareList()
									that.tui.toast('删除成功',1000)
								} else {
									that.tui.toast(res.message,1000)
								}
							}).catch((res) => {})
						}
					}
				});
			},
			isMust(type,index,item,value) {
				this.tui.request("/app/product/isMust", "POST", {
					id: item.id,
					isMust:value
				}, false, true).then((res) => {
					if (res.code == 200) {
						if(type == 'shopList'){
							this.shopList[index].isMust = value
						}else{
							this.shopList1[index].isMust = value
						}
						this.tui.toast('设置成功',1000)
					} else {
						this.tui.toast(res.message,1000)
					}
				}).catch((res) => {})
			},
			upDown(type,index,item,value) {
				if(value == 0){
					this.tui.request("/app/product/down", "POST", {
						id: item.id
					}, false, true).then((res) => {
						if (res.code == 200) {
							if(type == 'shopList'){
								this.shopList[index].delFlag = value
							}else{
								this.shopList1[index].delFlag = value
							}
							this.tui.toast('设置成功',1000)
						} else {
							this.tui.toast(res.message,1000)
						}
					}).catch((res) => {})
				}else{
					this.tui.request("/app/product/up", "POST", {
						id: item.id
					}, false, true).then((res) => {
						if (res.code == 200) {
							if(type == 'shopList'){
								this.shopList[index].delFlag = value
							}else{
								this.shopList1[index].delFlag = value
							}
							this.tui.toast('设置成功',1000)
						} else {
							this.tui.toast(res.message,1000)
						}
					}).catch((res) => {})
				}
				
			},
			goDetail(type,item){
				let url=""
				if(type == 'goods'){
					url = '/package1/myCenter/addGoods?dataList='+ JSON.stringify(item)
				}else{
					url = '/package1/myCenter/addType'
				}
				uni.navigateTo({
					url:url
				})
			},
			//点击分类获取商品列表
			getShareList(type) {
				let data = {}
				if (type == 'search') {
					this.gateType = 'search'
					data = {
						categoryId: "",
						searchStr: this.searchName,
						pageNum: this.pageNum,
						pageSize: '10'
					}
				} else {
					this.gateType = ''
					data = {
						categoryId: this.categoryId,
						searchStr: this.searchName,
						pageNum: this.pageNum,
						pageSize: '10'
					}
				}
				let that = this
				this.tui.request("/app/product/getShareList", "POST", data, false, false).then((res) => {
					if (res.code == 200) {
						if (type == 'search') {
							this.shopList = []
							this.status = 'nomore';
							if (this.pages == 1) {
								this.shopList1 = res.result.records
							} else {
								this.shopList1 = [...this.shopList1, ...res.result.records]
							}
							for(let i=0;i<this.shopList1.length;i++){
								this.shopList1[i].isShow = false
							}
							this.pages = res.result.pages
						} else {
							this.shopList1 = []
							this.status = 'nomore';
							if (this.pages == 1) {
								this.shopList = res.result.records
							} else {
								this.shopList = [...this.shopList, ...res.result.records]
							}
							for(let i=0;i<this.shopList.length;i++){
								this.shopList[i].isShow = false
							}
							this.pages = res.result.pages
						}
					} else {
						this.tui.toast(res.message,1000)
					}
				}).catch((res) => {})
			},
			//点击左侧菜单切换
			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.pageNum = 1
				this.searchName = ""
				this.shopList1 = []
				this.shopList = []
				this.getShareList()
			},
			//初始化获取分类列表
			getGategoryList() {
				this.tui.request("/app/productCategory/list", "get", {
					shopId:this.shopId
				}, 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,1000)
					}
				}).catch((res) => {})
			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}
	
	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
		
	}
	.title{
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 13%;
		position: fixed;
		top: 0;
	}
	.title-sreach{
		width: 75%;
		display: flex;
		height: 200rpx;
	}
	.back-btn{
		padding-top: 110rpx;
	}
	.title-search{
		margin-top: 110rpx;
		display: flex;
		background: #fff;
		height: 54rpx;
		margin-left: 20rpx;
		border-radius: 54rpx;
		flex: 1;
		input{
			height: 54rpx;
			line-height: 54rpx;
		}
	}
	.content-left {
		width: 170rpx;
		background: #eee;
		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: 6rpx solid red;
	}
	.content-right {
		flex: 1;
		overflow-y: scroll;
		height: 100%;
		background: #fff;
	}
	
	.right-box {
		width: 100%;
		height: auto;
		border-bottom: 1px solid #eee;
	}
	.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;
		    flex: 1;
	}
	
	.box-right-name {
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.box-right-num {
		padding: 5rpx 0;
		color: #777;
		text-align: right;
		padding-right: 20rpx;
		height: 40rpx;
	}
	
	.box-right-price {
		display: flex;
		font-size: 25rpx;
		text-align: center;
	}
	.price-box {
		display: flex;
		flex-direction: column;
		margin-right: 20rpx;
	}
	
	.price-box text:first-child {
		color: #ffa200
	}
	.bottom-box {
		width: 100%;
		height: 140rpx;
		display: flex;
		background: #fff;
		z-index: 98;
		position: fixed;
		bottom: 0;
		display: flex;
		padding-top: 20rpx;
	}
	
	.bottom-btn {
		width: 50%;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 90rpx;
		font-size: 28rpx;
		font-weight: 700;
		background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));
		text-align: center;
		margin: 0 20rpx;
	}
	.show-box{
		display: flex;
		height: 100rpx;
		background: #eee;
	}
	.show-text{
		display: flex;
		flex-direction: column;
		text-align: center;
		flex: 1;
		padding-top: 14rpx;
	}
</style>