<template>
	<!-- 产品管理 -->
	<!-- 产品 -->
	<view class="ProductManage pb-100 yocode">
		<!-- tab切换 -->
		<view class="projuctTab flex">
			<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">
						<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 btnboxdel" @tap="tochanges(item,index)">修 改</view>
					</view>
				</view>
				
				
			</checkbox-group>
			
		</view>
		
		<empty  v-if="goods_list.length==0"></empty>
		
		
		<!-- footchindbox 底部栏 -->
		<view class="footchindbox flex ali-c jus-b">
			<!-- <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> -->
			
			<navigator url="/pages/addEditEleProduct/addEditEleProduct" class="submitbtns">添加</navigator>
		</view>
		
		<pageScrollTo v-if="isshowtop" ></pageScrollTo>
		
	</view>
</template>

<script>
	// import { goods_product_list, sold_out,sold_outAll} from "@/utils/api/store.js";
	import pageScrollTo from "@/components/pageScrollTo/pageScrollTo.vue"
	import empty from "@/components/empty/empty.vue"
	
	import {eleProductList,autoManageProduct,deleteEleProduct} from "@/utils/api/api.js";
	export default {
		components:{
			pageScrollTo,
			empty,
		},
		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,//修改数据插入索引
				
			};
		},
		onLoad(opdata){
			
			
			if(opdata.isselect==1){
				this.isselect = 1;
				this.sendindex = opdata.sendindex;//插入索引
			}else{
				this.isselect = 2;
			}
			
		},
		onShow() {
			this.goods_list  = [];
			this.page = 0;
			this.isallshow=false;
			this.goods_product_list();
		},
		computed: {
			staticUrl () {//静态资源地址
				return this.$store.state.staticUrl;
			}
		},
		onPageScroll(e){
			//处理返回顶部
			if(e.scrollTop>400){
				this.isshowtop = true;
			}else{
				this.isshowtop = false;
			}
		},
		onReachBottom(){
			console.log("11");
			
			if(!this.isallshow){
				this.goods_product_list();
			}
			
		},
		methods:{
			//修改外卖产品
			tochanges(data,index){
				uni.navigateTo({
					url:`/pages/addEditEleProduct/addEditEleProduct?id=${data.product_id}`,
				})
			},
			//删除外卖产品
			async deleteEleProductfun(data,index){
				let res = await deleteEleProduct({
					product_id:data.product_id,
				});
				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: '加载中...'
				});
				this.page++;
				let res = await eleProductList({
					closed:this.tabactive-1,//上下架状态（0上架，1下架）
					page:this.page,
				});
				uni.hideLoading();//结束加载
				if(res.code==0){
					// if(this.page==0){
					// 	this.count = res.data.count;
					// }
					
					if(res.data!=null && 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);
				}
				
			},
			
			//交互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>
