<template>
	<!-- 产品管理 -->
	<!-- 产品 -->
	<view class="ProductManage pb-100 yocode">
		
		<view class="projuctTab flex" style="justify-content: center;align-items:center ;">
			<view class="" style="width: 70upx;height: 70upx;background-color: #EEEEEE;" @click="saoma">
				<image src="../../static/icon/1.png" mode="" style="display: inline;"></image>
			</view>
			<view class="flex" style="align-items: center;justify-content: center;margin-left: 30upx;" >
				<view class="" >
					<input type="text" value="" @input="inputkeys" v-model="keywords" placeholder="搜索要修改的产品" style="background-color: #eee; height: 60upx; border-radius: 20upx; width:460upx;" />
					
					<text style="position: absolute;top: 0;right: 144upx;" v-if="keywords!=''" @click="clearWord">x</text>
					
				</view>
				
				<view class="" style="margin-left: 10px;" @click="searchProduct">
					<text >搜索</text>
				</view>
				
			</view> 
		</view>
		
		<!-- tab切换 -->
		<view class="projuctTab flex" v-if="edit==0">
				<view class="tabitems flex1" :class="{active:tabactive==1}" @tap="taggletab(1)">
					<view class="tabtitle">出售中</view>
					<!-- （{{count[0]}}） -->
				</view>
				<view class="tabitems flex1" :class="{active:tabactive==2}" @tap="taggletab(2)">
					<view class="tabtitle">已下架</view>
					<!-- （{{count[1]}}） -->
				</view>
		</view>
		
	<!-- 	<view class="projuctlist" v-if="goods_list.length!=0">
			<checkbox-group @change="checkboxChange" v-model="idArr">
				<view class="itempro flex " v-for="(item,index) in goods_list" :key="index">
					<label class="ali-c">
						<checkbox :value="item.id.toString()" :checked="item.checked==true" />
					</label>
					<image class="thumbnail" :src="staticUrl + item.photo" mode=""></image>
					<view class="infobox" style="width: 60%;">
						<view class="title oneline">{{item.product_name}}</view>
						<view class="time">上架时间：{{item.create_time}}</view>
						<view class="price">¥{{item.price}}元</view>
					</view>
					<view class="btnbox flex">
						<view class="btns btnboxdel" @tap="deleteEleProductfun(item,index)">删 除</view>
						<view class="btns btnboxxj"  @tap="Selectiondata(item)"  v-if="tabactive==1 && isselect==1">加入活动</view>
						<view class="btns btnboxxj" @tap="sold_outfun(item.id,1,index)" v-else-if="tabactive==1">下 架</view>
						<view class="btns btnboxxj"  @tap="sold_outfun(item.id,0,index)"  v-show="tabactive==2">上 架</view>
						<view class="btns btnboxxj" @click="setSpecs(item.product_id)" >规格</view>
						
						<view class="btns btnboxdel" @tap="tochanges(item,index)">修 改</view>
					</view>
				</view>
			</checkbox-group>
		</view> -->
		
		<view class="projuctlist" v-if="goods_list.length!=0 && edit==0">
			<checkbox-group @change="checkboxChange" v-model="idArr">
				<!-- 单个商品 -->
				<view class="itempro flex " v-for="(item,index) in goods_list" :key="index">
					<!-- <label class="ali-c">
						<checkbox :value="item.id.toString()" :checked="item.checked==true" />
					</label> -->
					<image class="thumbnail" :src="staticUrl + item.photo" mode=""></image>
					<view class="infobox" style="width: 60%;">
						<view class="title oneline">{{item.product_name}}</view>
						<!-- <view class="time">上架时间：{{item.create_time}}</view> -->
						<view class="price">¥{{item.price}}元</view>
					</view>
					<view class="btnbox flex">
						<view class="btns btnboxdel" @tap="deleteEleProductfun(item,index)">删 除</view>
						<view class="btns btnboxxj"  @tap="Selectiondata(item)"  v-if="tabactive==1 && isselect==1">加入活动</view>
						<view class="btns btnboxxj" @tap="sold_outfun(item.id,1,index)" v-else-if="tabactive==1">下 架</view>
						<view class="btns btnboxxj"  @tap="sold_outfun(item.id,0,index)"  v-show="tabactive==2">上 架</view>
						<view class="btns btnboxxj" @click="setSpecs(item.product_id)" >规格</view>
						
						<view class="btns btnboxdel" @tap="tochanges(item,index)">修 改</view>
					</view>
				</view>
			</checkbox-group>
		</view>
		
		<view class="projuctlist" v-if="goods_list.length!=0 && edit==1">
			<checkbox-group @change="checkboxChange" v-model="idArr">
				<!-- 单个商品 -->
				<view class="itempro flex " v-for="(item,index) in goods_list" :key="index">
					<!-- <label class="ali-c">
						<checkbox :value="item.id.toString()" :checked="item.checked==true" />
					</label> -->
					<image class="thumbnail" :src="staticUrl + item.photo" mode=""></image>
					<view class="infobox" style="width: 60%;">
						<view class="title oneline">{{item.product_name}}</view>
						<!-- <view class="time">上架时间：{{item.create_time}}</view> -->
						<view class="price">¥{{item.price}}元</view>
						<!-- <view class="price" ></view> -->
						<view class="price" v-if="item.code !='' && item.code!=0" >编码:{{item.code}}</view>
						
					</view>
					<view class="btnbox flex">
						<!-- <view class="btns btnboxdel" @tap="deleteEleProductfun(item,index)">删 除</view>
						<view class="btns btnboxxj"  @tap="Selectiondata(item)"  v-if="tabactive==1 && isselect==1">加入活动</view>
						<view class="btns btnboxxj" @tap="sold_outfun(item.id,1,index)" v-else-if="tabactive==1">下 架</view>
						<view class="btns btnboxxj"  @tap="sold_outfun(item.id,0,index)"  v-show="tabactive==2">上 架</view>
						<view class="btns btnboxxj" @click="setSpecs(item.product_id)" >规格</view> -->
						
						<view class="btns btnboxdel" @tap="editPrice(item,index)" style="width: 160upx;">修改价格</view>
					</view>
				</view>
			</checkbox-group>
		</view>
		
		<view class="projuctlist" v-if="goods_list.length!=0 && edit== 2">
			<checkbox-group @change="checkboxChange" v-model="idArr">
				<!-- 单个商品 -->
				<view class="itempro flex " v-for="(item,index) in goods_list" :key="index">
					<!-- <label class="ali-c">
						<checkbox :value="item.id.toString()" :checked="item.checked==true" />
					</label> -->
					<image class="thumbnail" :src="staticUrl + item.photo" mode=""></image>
					<view class="infobox" style="width: 60%;">
						<view class="title oneline">{{item.product_name}}</view>
						<!-- <view class="time">上架时间：{{item.create_time}}</view> -->
						<view class="price">库存：{{item.code.length == 13 || item.code.length == 0 ?item.stock:item.stock/1000}} {{item.code.length == 13 || item.code.length == 0 ?'件':'kg'}}</view>
						<view class="price" v-if="item.code !='' && item.code!=0" >编码:{{item.code}}</view>
					</view>
					<view class="btnbox flex">
						<!-- <view class="btns btnboxdel" @tap="deleteEleProductfun(item,index)">删 除</view>
						<view class="btns btnboxxj"  @tap="Selectiondata(item)"  v-if="tabactive==1 && isselect==1">加入活动</view>
						<view class="btns btnboxxj" @tap="sold_outfun(item.id,1,index)" v-else-if="tabactive==1">下 架</view>
						<view class="btns btnboxxj"  @tap="sold_outfun(item.id,0,index)"  v-show="tabactive==2">上 架</view>
						<view class="btns btnboxxj" @click="setSpecs(item.product_id)" >规格</view> -->
						
						<view class="btns btnboxdel" @tap="editStore(item,index)" style="width: 160upx;">修改库存</view>
					</view>
				</view>
			</checkbox-group>
		</view>
		
		<empty  v-if="goods_list.length==0"></empty>
		
		
		<!-- footchindbox 底部栏 -->
		<view class="footchindbox flex ali-c jus-b" v-if="edit==0">
			<!-- <checkbox-group @change="radioChange" v-model="datas" >
				<label class="uni-list-cell uni-list-cell-pd flex ali-c" >
					<view class="chbox">
						
						<checkbox value="a" :checked="isallchind" />
					</view>
					<view>全选</view>
				</label>
			</checkbox-group>

			<view class="rightbtn flex">
				<view class="btns btns2" v-show="tabactive==1" @tap="sold_outfun('all',1)">下架</view>
				<view class="btns btns2" v-show="tabactive==2"  @tap="sold_outfun('all',0)">上架</view>
			</view> -->
			<!-- <view @click="open" class="submitbtns">添加</view> -->
			<navigator :url="'/pages/addEditEleProduct/addEditEleProduct?activity_type='+activity_type+'&isadd=0' " class="submitbtns" >添加</navigator>
		</view>
		<!--  -->
		<pageScrollTo v-if="isshowtop" ></pageScrollTo>
		<!-- <uniPopup ref="popup" type="bottom" >
			<view class="" style="background-color: #fff;">
				<button @click="addeleproduct" type="default">添加外卖</button>
				<navigator :url="'/pages/addEditEleProduct/addEditEleProduct?activity_type='+activity_type+'&isadd=0' " class="submitbtns2">添加外卖</navigator>
				<navigator :url="'/pages/addEditEleProduct/addEditEleProduct?activity_type='+activity_type+'&isadd=0' " class="submitbtns2">商品入库</navigator>
				<button type="default">商品入库</button>
				<view @click="close" type="default" class="submitbtns2">取消</view>
			</view>
		</uniPopup> -->
	</view>
</template>

<script>
	// import { goods_product_list, sold_out,sold_outAll} from "@/utils/api/store.js";  接口名：eleProductList，搜索字段 keywords， scan_code  = 1扫码进来的
	import pageScrollTo from "@/components/pageScrollTo/pageScrollTo.vue"
	import empty from "@/components/empty/empty.vue"
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import {eleProductList,autoManageProduct,deleteEleProduct} from "@/utils/api/api.js";
	export default {
		components:{
			pageScrollTo,
			empty,
			uniPopup
		},
		data() {
			return {
				tabactive:1,
				isallchind:false,//是否全选 批量操作
				datas:"",
				page:0,
				isallshow:false,
				goods_list:[],
				count:[0,0],
				isshowtop:false,
				idArr:["16535","7350","6164"],//全选 选中的id
				isselect:2,//1 是抽奖选择商品状态 2是默认的
				sendindex:0,//修改数据插入索引
				activity_type:0,
				edit:0,
				keywords:'',
				isScanCode:'',
				productData:[],
				isSearch:true
			};
		},
		onLoad(opdata){
			
			this.edit = opdata.edit
			
			console.log(this.edit)
			this.activity_type = opdata.activity_type
			
			if(opdata.isselect==1){
				this.isselect = 1;
				this.sendindex = opdata.sendindex;//插入索引
			}else{
				this.isselect = 2;
			}	
		},
		
		onShow() {
			// console.log(this.$refs.popup)
			this.goods_list  = [];
			this.page = 1;
			this.isallshow=false;
			this.tabactive = 1,
			// this.goods_product_list();
			this.searchProduct();
		},
		
		computed: {
			staticUrl () {//静态资源地址
				return this.$store.state.staticUrl;
			}
		},
		onPageScroll(e){
			//处理返回顶部
			if(e.scrollTop>400){
				this.isshowtop = true;
			}else{
				this.isshowtop = false;
			}
		},
		onReachBottom(){
			
			
			if(!this.isallshow){
				// if(this.isSearch){
					this.goods_product_list();
				// }
			}
			
		},
		methods:{
			
			clearWord(){
				this.keywords = ''
			},
			inputkeys(){
				this.isScanCode = ''
				console.log(this.isScanCode)
				console.log('asdadasdadadadsada');
			},
			
			searchProduct(){
			
				console.log(this.keywords)
				let son = ''
				if(this.edit == 1){
					son = ''
				}else if(this.edit == 2){
					son=1
				}
				eleProductList({
					keywords:this.keywords,
					scan_code:this.isScanCode,
					son:son,
				}).then(res=>{
					if(res.code == 0){
						// console.log(res.data)
						this.isSearch = false
						if(res.data.length == 0){
							this.$api.msg('没有找到此商品')
						}else{
							 this.goods_list = res.data
						}
					}
					
				})
			},
			saoma(){
				uni.scanCode({
					success: (res) => {
						this.isScanCode = 1
						this.keywords = res.result
						console.log(this.keywords)
						console.log(this.isScanCode)
						this.searchProduct()
					},
					fail: (err) => {
						console.log(res.err)
					}
				})
			},
				
			addeleproduct(){
				console.log('外卖')
				// :url="'/pages/addEditEleProduct/addEditEleProduct?activity_type='+activity_type+'&isadd=0' "
				uni.navigateTo({
					url:"'/pages/addEditEleProduct/addEditEleProduct?activity_type="+this.activity_type+'&isadd=0'
				})
			},
				
			close(){
				this.$refs.popup.close()
			},
			
			open(){
				this.$refs.popup.open()
			},
			//修改外卖产品
			tochanges(data,index){
				uni.navigateTo({
					url:`/pages/addEditEleProduct/addEditEleProduct?id=${data.product_id}&activity_type=${this.activity_type}&isadd=1`,
				})
			},
			
			editStore(data,index){
				uni.navigateTo({
					url:`/pages/addEditEleProduct/editProductStore?id=${data.product_id}`,
				})
			},
			editPrice(data,index){
				uni.navigateTo({
					url:`/pages/addEditEleProduct/editProductPrice?id=${data.product_id}`,
				})
			},
			//删除外卖产品
			async deleteEleProductfun(data,index){
				this.$showModal({
					title:'温馨提示',
					concent:'你确定要删除此商品吗？',
					cancelVal:'取消',
					confirmVal:'确定',
				}).then(resa=>{
					deleteEleProduct({
						product_id:data.product_id,
					}).then((res)=>{
						if(res.code==0){
							this.$api.msg(res.msg);
							this.goods_list.splice(index,1);//删除那条
						}else{
							this.$api.msg(res.msg);
						}
					})
					
				})
			},
			//交互
			//获取产品列表
			async goods_product_list(){
				uni.showLoading({
					title: '加载中...'
				});
				let son = ''
				if(this.edit == 1){
					son = ''
				}else if(this.edit == 2){
					son=1
				}
				this.page++;
				let res = await eleProductList({
					closed:this.tabactive-1,//上下架状态（0上架，1下架）
					page:this.page,
					son:son
				});
				uni.hideLoading();//结束加载
				if(res.code==0){
					// if(this.page==0){
					// 	this.count = res.data.count;
					// }
					console.log(res.data)
					console.log(res.data.length)
					if(res.data!=[] && res.data.length!=0){
						let data = res.data;
						data = data.map((item,index)=>{
							 item.checked = false;
							 return item;
						})
						this.goods_list = [...this.goods_list,...data]
					}else{
						this.$api.msg("没有更多了~");
						this.isallshow = true;
					}
				}else{
					this.$api.msg(res.msg);
				}
			},
			//下架 上下架方法
			async sold_outfun(id,closed,index){
				let res = {};
				
				if(id=="all"){
					//全选的方法
					// res = await autoManageProduct({
					// 	product_id:"",//产品id
					// 	closed:"",//上下架（0上架，1下架）
					// });
					
				}else{
					//单选的方法
					res = await autoManageProduct({
						product_id:id,//产品id
						closed:closed,//上下架（0上架，1下架）
					});
				}
				
				if(res.code==0){
					this.$api.msg(res.msg);
					
					this.goods_list.splice(index,1);//本地删除
					
					// if(this.tabactive == 1){
					// 	this.taggletab(2);
						
					// }else if(this.tabactive==2){
					// 	this.taggletab(1);
					// }
					
				}else{
					this.$api.msg(res.msg);
				}
				
			},
			setSpecs(id){
				//处理规格
				uni.navigateTo({
					url:`/pages/specsShop/specsShop?id=${id}`,
				})
			},
			//交互end
			taggletab(inde){
				this.tabactive = inde;
				this.isallshow = false;
				this.goods_list = [];
				this.isallchind = false;
				this.page =0;
				this.goods_product_list();
			},
			checkboxChange(e){//单选事件 列表
				console.info(e.detail.value);
				this.idArr = e.detail.value;
				
			},
			//处理反选全选
			taggledata(type){
				//type 1 全选 2反选
				this.idArr = [];
				this.goods_list = this.goods_list.map((item,index)=>{
					if(type==1){
						//全选
						item.checked = true;
						this.idArr.push(item.id);
					}else{
						//反选
						this.idArr = [];
						item.checked = false;
					}
					return item;
				});
				
			},
			radioChange(e){//全选 反选
				console.info(e);
				this.isallchind = !this.isallchind;
				
				if(e.detail.value.length==0){
					console.log("反选");
					this.taggledata(2)
				}else{
					this.taggledata(1)
					console.log("全选");
				}
				
			},
			//活动抽奖选择商品
			Selectiondata(data){
				console.info(data);
				
				//选择商品卡回调
				if(this.isselect==1){
					uni.setStorageSync('selectaddres', {data,sendindex:this.sendindex});//存
					uni.navigateBack({//返回上一页
						delta: 1
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "./eleProduct.scss";
</style>
