<template>
	<!-- 导商品 -->
	<!-- 穿梭框 -->
	<view class="guidegoods">
		<view class="shuttlemain flex ">

			<!-- 一级 -->
			<view class="shuttlecell">
				<view class="shuttle_head">
					<label @tap="taggleAllChecked">
						<checkbox color="#ff6900" value="cb" :checked="cateAllChecked"  />分类
					</label>
				</view>
				<view class="shuttle_body">
					<checkbox-group @change="changegroup">
					<label class="flex shuttle_items" v-for="(item,index) in categorylist" :key="index">
						<checkbox color="#ff6900" :value="item.cate_id" :checked="item.checked" />
						<view class="shuttle_items_tit">{{item.cate_name}}</view>
					</label>
					</checkbox-group>
				</view>
			</view>
			
			<view class="changesicon">
				<view class="arrowicon" @tap="AntiElection">←</view>
				<view class="arrowicon" @tap="eleProductListfun">→</view>
				<view class="arrowicon submitsss" @tap="submitfuns">提交</view>
			</view> <!-- 二级 -->
					
			<view class="shuttlecell">
					<view class="shuttle_head">
						<label @tap="taggleAllCheckedTwo">
							<checkbox color="#ff6900" value="cb" :checked="ProAllChecked" />产品
						</label>
					</view>
					<view class="shuttle_body">
						<checkbox-group @change="changegrouptwo">
							<label class="flex shuttle_items" v-for="(item,index) in projuctList" :key="index">
								<checkbox color="#ff6900" :value="item.product_id" :checked="item.checked" />
								<view class="shuttle_items_tit">{{item.product_name}}</view>
							</label>
						</checkbox-group>
					</view>
			</view>
		</view>
		
		<view class="pstest">产品勾选提交后将会覆盖之前提交的产品</view>

	</view>
</template>

<script>
	import {shop_class,eleProductList,CopyList} from "@/utils/api/goods.js";
	export default {
		data() {
			return {
				cateAllChecked:false,//分类是否全选
				cateVal:[],//分类选中的值
				categorylist: [], //分类
				
				ProAllChecked:false,
				ProVal:[],//产品选中的值
				projuctList:[],//分类下面的产品
				oneload:false,
				
			};
		},
		onLoad() {
			this.shop_classfun();//获取分类
			
		},
		onShow() {
			if(this.oneload){
				this.getCopyList();//获取之前选中的数据
			}
		},
		computed:{
			
		},
		methods:{
			//获取之前选中的数据
			async getCopyList(){
				this.oneload = true;
				let res = await CopyList({
					
				});
				if(res.code==0){
					let list = res.data;
					list = list.map((item,index)=>{
						item.checked = false;//选中状态 默认没有选中
						item.product_id = String(item.product_id);//默认字符串类型
						item.cate_id = String(item.cate_id);//默认字符串类型
						return item;
					})
					this.projuctList = list;
					
					this.clearChecked();
					
					
					
					
					//获取选中的分类id
					let Provalcate = [];
					let projuctList = [];
					this.projuctList.forEach((item,index)=>{
						Provalcate.push(String(item.cate_id))
					})
					console.info("Provalcate",Provalcate);
					if(Provalcate.length!=0){
						this.ProAllChecked = false;
					}
					
					let cateVal =[];
					this.categorylist = this.categorylist.map((item,index)=>{
						if(Provalcate.indexOf(item.cate_id)!=-1){
							console.info("符合~",index);
							item.checked = true;//选中状态 默认没有选中
							cateVal.push(item.cate_id)
							
						}
						return item;
					})
					this.cateVal = cateVal;
					
					
					
				}else{
					//获取之前的默认数据失败
				}
			},
			
			//获取分类
			async shop_classfun(){
				let res = await shop_class({});
				if(res.code==0){
					let list = res.data;
					list = list.map((item,index)=>{
						item.checked = false;//选中状态 默认没有选中
						item.cate_id = String(item.cate_id);//默认字符串类型
						return item;
					})
					this.categorylist = list;
					
					this.getCopyList();//获取之前选中的数据
					
				}else{
					//获取分类失败
				}
			},
			//获取指定分类下面的产品
			async eleProductListfun(){
				if(this.cateVal.length==0){
					return false;
				}
				let class_id = this.cateVal.join(",");
				let res  = await eleProductList({
					class_id:class_id,
				});
				if(res.code==0){
					let list = res.data;
					list = list.map((item,index)=>{
						item.checked = false;//选中状态 默认没有选中
						item.product_id = String(item.product_id);//默认字符串类型
						item.cate_id = String(item.cate_id);//默认字符串类型
						return item;
					})
					this.projuctList = list;
					
					// this.clearChecked();
					
					if(res.data.length==0){
						this.$api.msg("未获取到产品");
					}
					
				}else{
					this.projuctList = [];//失败了要清除
					
					//获取指定分类下的产品失败了
				}
			},
			//--------------------------------------requist end--------------------------------
			//监听菜品勾选的改版
			changegroup(e){
				this.cateVal = e.detail.value;//选中的值
				//修改对应的状态
				this.categorylist = this.categorylist.map((item,index)=>{
					if(this.cateVal.indexOf(item.cate_id)!=-1){
						item.checked = true;
					}else{
						item.checked = false;
					}
					return item;
				})
				
				this.testingAllChecked();
				
			},
			//检测分类是否全选hian
			testingAllChecked(){
				let bool = this.categorylist.every((item,index)=>{
					return item.checked ==true;
				})
				this.cateAllChecked  = bool;
			},
			//分类的全选反选
			taggleAllChecked(){
				this.cateAllChecked = !this.cateAllChecked;
				if(this.cateAllChecked){
					//全部选中
					let cateVal =[];
					this.categorylist = this.categorylist.map((item,index)=>{
						item.checked = true;//选中状态 默认没有选中
						cateVal.push(item.cate_id)
						return item;
					})
					this.cateVal = cateVal;
				}else{
					//全部去除勾选
					this.cateVal =[];
					this.categorylist = this.categorylist.map((item,index)=>{
						item.checked = false;//选中状态 默认没有选中
						return item;
					})
				}
			},
			///---------------------------分类逻辑end--------------------------
			
			//产品选中
			changegrouptwo(e){
				this.ProVal = e.detail.value;//选中的值
				//修改对应的状态
				this.projuctList = this.projuctList.map((item,index)=>{
					if(this.ProVal.indexOf(item.product_id)!=-1){
						item.checked = true;
					}else{
						item.checked = false;
					}
					return item;
				})
				
				this.testingAllCheckedTwo();
			},
			//检测是否全选
			testingAllCheckedTwo(){
				let bool = this.projuctList.every((item,index)=>{
					return item.checked ==true;
				})
				this.ProAllChecked  = bool;
			},
			//菜品的全选反选
			taggleAllCheckedTwo(){
				this.ProAllChecked = !this.ProAllChecked;
				if(this.ProAllChecked){
					//全部选中
					let ProVal =[];
					this.projuctList = this.projuctList.map((item,index)=>{
						item.checked = true;//选中状态 默认没有选中
						ProVal.push(item.product_id)
						return item;
					})
					this.ProVal = ProVal;
				}else{
					//全部去除勾选
					this.ProVal =[];
					this.projuctList = this.projuctList.map((item,index)=>{
						item.checked = false;//选中状态 默认没有选中
						return item;
					})
				}
			},
			//取消全部选中
			clearChecked(){
				//取消分类的选中
				//取消 之前产品的选中
				this.cateAllChecked=false;
				this.cateVal=[];
				this.ProAllChecked=false;
				this.ProVal=[];
				this.categorylist = this.categorylist.map((item,index)=>{
					item.checked = false;//选中状态 默认没有选中
					return item;
				})
			},
			//反选 通过去除选中的产品 回选出对应的分类
			AntiElection(){
				//获取选中的分类id
				let Provalcate = [];
				let projuctList = [];
				this.projuctList.forEach((item,index)=>{
					if(item.checked){
						Provalcate.push(String(item.cate_id))
					}else{
						projuctList.push(item)
					}
				})
				this.projuctList =projuctList;
				console.info("Provalcate",Provalcate);
				if(Provalcate.length!=0){
					this.ProAllChecked = false;
				}
				
				// let cateVal =[];
				// this.categorylist = this.categorylist.map((item,index)=>{
				// 	if(Provalcate.indexOf(item.cate_id)!=-1){
				// 		console.info("符合~",index);
				// 		item.checked = true;//选中状态 默认没有选中
				// 		cateVal.push(item.cate_id)
						
				// 	}
				// 	return item;
				// })
				// this.cateVal = cateVal;
				
				
			},
			//提交商品
			submitfuns(){
				if(this.ProVal.length==0){
					this.$api.msg("请勾选产品");
					return false;
				}
				
				let checkedProList = [];
				this.projuctList.forEach((item,index)=>{
					if(item.checked){
						checkedProList.push(item);
					}
				})
				uni.setStorageSync("checkedProList",checkedProList);
				uni.navigateTo({
					url:"/pages/guidegoodstwo/guidegoodstwo"
				})
				
			}
		}
	}
</script>

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