<template>
	<view>
		<view class="title-box">
			<uni-search-bar class="uni-mt-10" radius="5" placeholder="请输入商品名称" cancelButton="none" @blur="search" @clear="clearSearch" />
		</view>
		<view class="content-left" style="height: 85%;float: left;position: fixed;top: 100rpx;">
			<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="width: 570rpx;background: #fff;margin: 100rpx 0 70rpx 170rpx;height: 76%;padding-bottom: 50rpx;">
			<view class="right-box" v-for="(item,index) in shopList" :key="index">
				<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" v-if="type==0">
							<text>{{item.purchasePrice?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">
							<text>{{item.stockCount}}</text>
							<text>库存</text>
						</view>
					</view>
				</view>
				<checkbox-group @tap="checkboxChange(item)">
					<label>
						<checkbox :checked="item.checked" class="checkbox" />
					</label>
				</checkbox-group>
			</view>
			<u-loadmore :status="status" />
		</view>	
		<view class="bottom-box">
			<view style="width: 50%;"></view>
			<button class="bottom-btn" @tap="checkPay('1')">批量删除</button>
		</view>
		<!-- 弹出删除警示框 -->
		<uni-popup ref="delPopup" background-color="#fff">
			<view class="popup-del-content">
				<view class="popup-del-title">
					<text>选择商品价格</text>
				</view>
				<view style="line-height: 100rpx;">
					删除后的商品<text style="color: red;">无法找回</text>，是否继续？
				</view>
				<view style="display: flex;margin-top: 20rpx;">
					<view class="popup-bottom-left">
						<view class="bottom-del-btn" @tap="this.$refs.delPopup.close()"
							style="background: linear-gradient(90deg, #FF9797, #FFC1E0);">再想想</view>
					</view>
					<view class="popup-bottom-right">
						<view class="bottom-del-btn" @tap="checkPay()">确认删除</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				indexList: [],
				pageNum: 1, //分页的页码
				shopList: [],
				shopList1: [],
				info: 0,
				goodsList: [],
				categoryId: '', //分类id
				searchName: '', //搜索框输入值
				shopId: '', //店铺id,
				checkbox: '', //需要分享的商品id
				id: '',
				carList: [],
				carNum: 0,
				carType: 0,
				type: '',
				gwcList: [],
				checkPayData:'',
				data:{},
				height:0
			}
		},
		onReachBottom() {
			
			if (this.pageNum >= this.pages) return;
			// this.status = 'loading';
			this.pageNum ++;
			this.getShareList();
		},
		onLoad(options) {
			// wx.updateShareMenu({
			//   withShareTicket: true,
			//   isPrivateMessage:true,
			//   success () { }
			// })
			this.height = wx.getSystemInfoSync().windowHeight
			if (options.khid != undefined) {
				uni.redirectTo({
					url: "/package1/index/downStearmList?khid=" + options.khid
				})
			}else{
				this.type = uni.getStorageSync('type')
				this.getGategoryList()
			}
			
		},
		methods: {
			//初始化获取分类列表
			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.pageNum = 1
						this.searchName = ""
						this.shopList1 = []
						this.shopList = []
						this.getShareList();
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
			},
			//点击分类获取商品列表
			async getShareList(type) {
				let that = this
				this.goodsList = []
				await this.tui.request("/app/product/getShareList", "POST", {
					categoryId: this.searchName == ""?this.categoryId:"",
					searchStr: this.searchName,
					pageNum: this.pageNum,
					pageSize: '10'
				}, false, false).then((res) => {
					if (res.code == 200) {
						for(var i = 0; i < res.result.records.length; i++){
							if(res.result.records != ''){
								res.result.records[i].checked = false
							}
						}
						this.$nextTick(()=>{
							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]
								}
								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]
								}
								this.pages = res.result.pages
							}
						})
						
						
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
				await this.getCheck()
			},
			//顶部搜索框
			search(e) {
				if(e.value == ''){
					this.searchName = ""
					this.getShareList()
				}else{
					this.searchName = e.value
					this.getShareList('search')
					
				}
			},
			clearSearch(){
				this.searchName = ''
				this.getGategoryList()
			},
			getCheck(){
				let that = this;
				if(that.carList != ''){
					if(this.searchName != ''){
						for (var i = 0; i < that.carList.length; i++) {
							for (var m = 0; m < that.shopList.length; m++) {
								if(that.carList[i] == that.shopList[m].id){
									that.shopList[m].checked = true
								}
							}
						}
					}else{
						for (var i = 0; i < that.carList.length; i++) {
							for (var m = 0; m < that.shopList.length; m++) {
								// for (var j = 0; j < that.shopList[m].length; j++) {
									if(that.carList[i] == that.shopList[m].id){
										that.shopList[m].checked = true
									}
								// }
							}
						}
					}
				}
				
				this.$forceUpdate()
			},
			//点击左侧菜单切换
			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(this.indexList[index].id)
			},
			//选中商品
			checkboxChange(item) {
				item.checked = !item.checked
				if (this.carList.indexOf(item.id) != -1) {
					this.carList.splice(this.carList.indexOf(item.id), 1)
				} else {
					this.carList.push(item.id)
				}
				if (this.gwcList.length == 0) {
					this.gwcList.push(item)
				} else {
					for (let i = 0; i < this.gwcList.length; i++) {
						if (this.gwcList[i].id == item.id) {
							
							this.gwcList.splice(i, 1)
						} else {
							if (this.gwcList.length == (i + 1)) {
								
								this.gwcList.push(item)
								return
							}

						}
					}
				}
			},
			checkPay(type){
				if(type == '1'){
					this.$refs.delPopup.open()
				}else{
					if(this.carList.length == 0){
						this.tui.toast("请勾选商品后再删除")
						return
					}
					let data = ''
					for(let i=0;i<this.carList.length;i++){
						if(i == 0){
							data += this.carList[i]
						}else{
							data += ','+this.carList[i]
						}
						
					}
					this.$nextTick(()=>{
						this.tui.request("/app/product/batchDeleteProduct", "POST", {
							ids:data
						}, false, true).then((res) => {
							if (res.code == 200) {
								this.pageNum = 1
								this.searchName = ""
								this.shopList1 = []
								this.shopList = []
								this.getShareList()
								this.carList = []
								this.$refs.delPopup.close()
								setTimeout(res=>{
									this.tui.toast("删除成功！")
								},300)
								
							} else {
								this.tui.toast(res.message)
							}
						}).catch((res) => {})
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		font-size: 24rpx;
	}

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

	.uni-tab__dot {
		padding: 0 8rpx;
		line-height: 30rpx;
		color: #ffffff;
		text-align: center;
		font-size: 24rpx;
		background-color: #ff0000;
		border-radius: 30rpx;
	}

	.uni-tab__text {
		font-size: 24rpx;
		color: #646566;
	}

	.title-box {
		background: #fff;
		position: fixed;
		z-index: 99;
		width: 100%;
		top: 0;
	}

	.bottom-box {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		background: #fff;
		z-index: 99;
	}

	.bottom-btn {
		margin: 0;
		padding: 0;
		width: 45%;
		line-height: 70rpx;
		height: 70rpx;
		text-align: center;
		margin-top: 10rpx;
		color: #fff;
		font-size: 28rpx;
		background: linear-gradient(90deg, #60F3FF, #088FEB);
		border-radius: 70rpx;
	}

	.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;
		height: 100%;
		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;
	}

	.checkbox {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 20rpx;
		right: 30rpx;
	}

	.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);
		z-index: 99;
	}
	.noPic{
		border-radius: 10px;
		width: 150rpx;
		height: 150rpx;
		text-align: center;
		line-height: 140rpx;
		color: #777;
		background: #eee;
	}
	.popup-del-content {
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		width: 600rpx;
		height: 300rpx;
		text-align: center;
		background-color: #fff;
		border-radius: 10px;
	}
	
	.popup-del-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
	}
	
	.popup-del-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;
	}
	.popup-bottom-left {
		width: 50%;
		line-height: 80rpx;
	}
	
	.popup-bottom-right {
		width: 50%;
		line-height: 100rpx;
	}
	.bottom-del-btn {
		width: 90%;
		line-height: 70rpx;
		height: 70rpx;
		text-align: center;
		/* margin-top: 10rpx; */
		color: #fff;
		font-size: 28rpx;
		margin: 0 auto;
		background: linear-gradient(90deg, #60F3FF, #088FEB);
		border-radius: 70rpx;
	}
</style>