<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">出售中（{{count[0]}}）</view>
			</view>
			<view class="tabitems flex1" :class="{active:tabactive==2}" @tap="taggletab(2)">
				<view class="tabtitle">已下架（{{count[1]}}）</view>
			</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">删 除</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)" v-else-if="tabactive==1">下 架</view>
						<view class="btns btnboxxj"  @tap="sold_outfun(item.id,0)"  v-show="tabactive==2">上 架</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" >
					<view>
						<!-- :checked="isallchind==1" -->
						<!-- <radio color="#FF6600" value="1"  /> -->
						<checkbox value="a" :checked="isallchind" />
					</view>
					<view>全选</view>
				</label>
			</checkbox-group>
			<view class="rightbtn flex">
				<!-- <view class="btns btns1">删除</view> -->
				<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>
		
		<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"
	export default {
		components:{
			pageScrollTo,
			empty,
		},
		data() {
			return {
				tabactive:1,
				isallchind:false,//是否全选 批量操作
				datas:"",
				page:-1,
				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;
			}
			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:{
			//交互
			//获取产品列表
			async goods_product_list(){
				uni.showLoading({
					title: '加载中...'
				});
				this.page++;
				let res = await goods_product_list(this.tabactive-1,this.page);
				uni.hideLoading();//结束加载
				if(res.code==0){
					if(this.page==0){
						this.count = res.data.count;
					}
					
					if(res.data.goods_list!=null && res.data.goods_list.length!=0){
						let data = res.data.goods_list;
						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){
				let res = {};
				
				if(id=="all"){
					//全选的方法
					res = await sold_outAll(this.idArr,closed);
					
				}else{
					//单选的方法
					res = await sold_out(id,closed);
				}
				
				if(res.code==0){
					this.$api.msg(res.msg);
					
					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 =-1;
				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 "./HotelManage.scss"
</style>
