<template>
	<view class="wrap">
		<view class="header">
			<view class="header_lf">已添加的</view>
			<view class="header_rg" @tap="confirm">确定</view>
		</view>
		<!-- 已选择 -->
		<view class="message_list">
			<view class="select_messgae">
			    <view class="select_messgae_item select_messgae_item1" v-for="item,index in select_messgae" :key="index">
			        <view class="select_messgae_item_text">{{item.name}}</view>
			        <view class="iconfont close" @tap="close(item,index)"></view>
			    </view>
			</view>
		</view>
		<!-- 可添加的 -->
		<view class="content">
			<view class="content_item" v-for="item,index in allData.contain_rh_item_list" :key="index">
				<view class="header1 clear" @tap="changeCurrent(item,index)">
				    <view class="header_lf1">
				        <view class="header_title">{{item.title}}</view>
				    </view>
				    <view class="header_rg1">
				        <text :class="['iconfont',item.current == 0?'header_bottom':'top']"></text>
				    </view>
				</view>
				<!-- 隐藏二级菜单 -->
				<view :class="['content_list',item.current == 0?'':'show']">
					<!--全选按钮-->
					<view class="all_select" @tap="allSelect(item,index)">
					    <image :src="item.allSelect == 1?'http://web.jzdsh.com/images/select.png':'http://web.jzdsh.com/images/no_select.png'" id="select_img" ></image>
					    <view class="select_text">全选</view>
					</view>
					<view :class="['content_list_wrap',item.flodStatus == 1?'flod':'']">
					    <view class="content_list_item" v-for="item,childIndex in item.arr" :key="childIndex">
							<view :class="['content_list_item_text',item.active == 1?'active':'']" @tap="getValue(item,index,childIndex)">{{item.title}}</view>
					    </view>
					</view>
					<!--折叠按钮-->
					<view class="news_more" @tap="changeFlod(index)">{{flod}} <view class="iconfont header_bottom"></view></view>
				</view>
			</view>
		</view>
		<view class="footer">
			<button class="submit" @tap="confirm">确定</button>
		</view>
	</view>
</template>

<script>
	import api from "../../../../../../api.js";
	let app = getApp();
	export default {
		data() {
			return {
				paramType:'',//分类信息  小型车等等
				allData:{
					contain_rh_item_list:[]
				},//页面数据
				select_messgae:[],//已选择的主营信息
				select_small:[],//已选中的小分类信息
				flod:'展开更多',//折叠按钮文字
			}
		},
		onLoad(options) {
			this.getData();
		},
		methods: {
			//加载主营信息
			getData(){
				let data = {
					token:app.globalData.token
				}
				api.getUserMyMessage(data).then((res)=>{
					console.log(res);
					let contain_rh_item_list = res.data.data.vo.data.contain_rh_item_list;
					for (let i = 0; i < contain_rh_item_list.length; i++){
					    let current = 0;
					    let arr = contain_rh_item_list[i].arr;
					    let length = arr.length;
					    contain_rh_item_list[i].current = 0;
					    contain_rh_item_list[i].flodStatus = 0;
					    arr.map((item,index,arr)=>{
					        if(item.active == 1){
					            current++;
					        }
					        if(current == length){
					            contain_rh_item_list[i].allSelect = 1;
					        }else{
					            contain_rh_item_list[i].allSelect = 0;
					        }
					    })
					}
					this.allData.contain_rh_item_list = contain_rh_item_list;
					this.select_messgae = res.data.data.pMainBusinessList;
					this.select_small = res.data.data.mainBusinessList;
					// this.allData = res.data.data;
				})
			},
			//点击展开二级菜单
			changeCurrent(item,index){
				let current = this.allData.contain_rh_item_list[index].current;
				if(current == 0){
					this.allData.contain_rh_item_list[index].current = 1;
				}else{
					this.allData.contain_rh_item_list[index].current = 0;
				}
				
			},
			//点击折叠按钮
			changeFlod(index){
				let flodStatus = this.allData.contain_rh_item_list[index].flodStatus;
				if(flodStatus == 0){
					this.allData.contain_rh_item_list[index].flodStatus = 1;
					this.flod = '点击收起'
				}else{
					this.allData.contain_rh_item_list[index].flodStatus = 0;
					this.flod = '展开更多'
				}
			},
			//点击小分类
			getValue(item,index,childIndex){
				let active = this.allData.contain_rh_item_list[index].arr[childIndex].active;
				let pId = this.allData.contain_rh_item_list[index].arr[childIndex].pId;
				let pName = this.allData.contain_rh_item_list[index].arr[childIndex].pName;
				let name = this.allData.contain_rh_item_list[index].arr[childIndex].title;
				let arr = this.allData.contain_rh_item_list[index].arr;
				let length = arr.length;
				let current = 0;//判断全选
				let select_messgaeArr = this.select_messgae;
				if(active == 0){
					this.allData.contain_rh_item_list[index].arr[childIndex].active = 1;
					select_messgaeArr.push({pId:pId,name:pName});
					this.select_small.push({pId:pId,name:name});
					let res = this.doWeight(select_messgaeArr);
					this.select_messgae = res;
					//判断小类是否全部选中
					arr.map((item,arr)=>{
						if(item.active == 1){
						  current ++;
						}
						if(current == length){
							this.allData.contain_rh_item_list[index].allSelect = 1;
						}
					})
				}else{
					this.allData.contain_rh_item_list[index].arr[childIndex].active = 0;
					let array = [];
					this.select_small.map((item,index,select_small)=>{
					    array.push(item.name);
					});
					let i = arr.indexOf(name);
					this.select_small.splice(i,1);//删除对应小分类
					let mianBusinessId = [];
					this.select_small.map((item,index,select_small)=>{
						mianBusinessId.push(item.pId)
					})
					let selectId = [];
					this.select_messgae.map((item,index,select_messgae)=>{
					    selectId.push(item.pId)
					})
					for(let i = 0;i<selectId.length;i++){
						if(mianBusinessId.indexOf(selectId[i]) == -1){
						  console.log(i);
						  this.select_messgae.splice(i,1)
						}
					}
					//判断小类是否全部选中
					arr.map((item,arr)=>{
						if(item.active == 0){
						  current ++;
						}
						if(current == length){
							this.allData.contain_rh_item_list[index].allSelect = 0;
						}
					})
				}
			},
			//数组对象去重
			doWeight(arr){
				//数组对象去重
				let res = []
				let obj = {}
				for (let i = 0; i < arr.length; i++) {
				    if (!obj[arr[i].name]) { // name  对应数组中的name
				        res.push(arr[i])
				        obj[arr[i].name] = true
				    }
				}
				return res;
			},
			//点击大分类的删除按钮
			close(item,index){
				console.log(item,index);
				let pId = item.pId;
				this.select_messgae.splice(index,1);  //删除掉大类
				//删除掉对应小类
				for (let i = this.select_small.length - 1; i >= 0; i--){
				    if(this.select_small[i].pId === item.pId){
				        this.select_small.splice(i,1)
				    }
				}
				let array = this.allData.contain_rh_item_list;
				for(let i = 0;i<array.length;i++){
					if(array[i].ids == pId){
						console.log(i);
						array[i].allSelect = 0;
						let arr = array[i].arr;
						arr.map((item,index,arr)=>{
						  item.active = 0
						})
					}
				}
				this.allData.contain_rh_item_list = array;
			},
			//全选按钮
			allSelect(item,index){
				console.log(item,index);
				let arr = item.arr;
				if(item.allSelect == 0){
					this.allData.contain_rh_item_list[index].allSelect = 1;
					for (let i = this.select_small.length - 1; i >= 0; i--){
					    if(this.select_small[i].pId === item.ids){
					        this.select_small.splice(i,1)
					    }
					}
					arr.map((item,index,arr)=>{
					    item.active = 1;
					    this.select_small.push({pId:item.pId,name:item.title})
					})
					this.select_messgae.push({pId:item.ids,name:item.title});
					let res = this.doWeight(this.select_messgae);
					this.select_messgae = res;
				}else{
					this.allData.contain_rh_item_list[index].allSelect = 0;
					for (let i = this.select_small.length - 1; i >= 0; i--){
					    if(this.select_small[i].pId === item.ids){
					        this.select_small.splice(i,1)
					    }
					}
					arr.map((item,index,arr)=>{
					    item.active = 0
					});
					let select = [];
					this.select_messgae.map((item,index)=>{
					    select.push(item.name)
					})
					let num = select.indexOf(item.title);
					this.select_messgae.splice(num,1);
				}
			},
			confirm(){
				let select_messgae = this.select_messgae;
				let select_small = this.select_small;
				let select_messgaeArr = [];
				select_messgae.map((item,index,select_messgae)=>{
				    select_messgaeArr.push(item.name)
				})
				let select_smallArr = [];
				select_small.map((item,index,select_small)=>{
				    select_smallArr.push(item.name)
				})
				console.log(select_messgaeArr,select_smallArr);
				
			}
		}
	}
</script>

<style>
	page{
	  width: 100%;
	  height:100%;
	  background-color: #f9f9f9;
	}
	.header{
	  width:100%;
	  overflow: hidden;
	  padding:0 24rpx 30rpx 30rpx;
	  box-sizing: border-box;
	  background: #ffffff;
	}
	.header_lf{
	  font-size: 30rpx;
	  color:#333333;
	  font-weight: bold;
	  float:left;
	  margin-top:12rpx;
	}
	.header_rg{
	  width:102rpx;
	  height:48rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  border-radius:6rpx;
	  text-align: center;
	  line-height: 48rpx;
	  font-size: 24rpx;
	  color:#ffffff;
	  float:right;
	  margin-top:10rpx;
	}
	.message_list{
	  width: 100%;
	  /* overflow: hidden; */
	  /* padding:0 30rpx;
	  margin-top:30rpx; */
	  box-sizing: border-box;
	}
	.select_messgae{
	  width:100%;
	  padding:0 30rpx;
	  box-sizing: border-box;
	  background-color: #ffffff;
	  border-bottom: 1px solid #f2f2f2;
	}
	.select_messgae_item{
	  width:150rpx;
	  height:78rpx;
	  background:rgba(247,247,247,1);
	  border-radius:6rpx;
	  margin:0 30rpx 40rpx 0;
	  text-align: center;
	  line-height: 78rpx;
	  color:#777777;
	  font-size: 26rpx;
	  display: inline-block;
	  position: relative;
	}
	.select_messgae_item_text{
	  width:100%;
	  height:100%;
	  overflow: hidden;
	  text-overflow:ellipsis;
	  white-space: nowrap;
	}
	.close{
	  position: absolute;
	  width:32rpx;
	  height:32rpx;
	  display: block;
	  top:-16rpx;
	  right:-16rpx;
	  font-size: 32rpx;
	  text-align: center;
	  line-height: 32rpx;
	  color:rgba(34,34,34,0.5);
	}
	.select_messgae_item:nth-child(4n){
	  margin-right: 0;
	}
	.content{
	  width:100%;
	  margin-top:20rpx;
	  overflow: hidden;
	  padding-bottom: 120rpx;
	}
	.content_item{
	  width:100%;
	  background-color: #ffffff;
	  box-sizing: border-box;
	  margin-bottom: 20rpx;
	}
	.header1{
	  height:100rpx;
	  line-height: 100rpx;
	  position: relative;
	  padding:0 30rpx;
	}
	.header_lf image{
	  float:left;
	  width:26rpx;
	  height:36rpx;
	  margin-top:32rpx;
	}
	.header_title{
	  font-size: 30rpx;
	  color:#222222;
	  float:left;
	}
	.header_rg1{
	  float:right;
	}
	.header_bottom{
	  font-size: 26rpx;
	  color:#999999;
	}
	.top{
	  font-size: 26rpx;
	  color:#999999;
	}
	.content_list{
	  width:100%;
	  padding:0rpx 0 0 30rpx;
	  overflow: hidden;
	  display: none;
	}
	.show{
	  display: block;
	}
	.content_list_item{
	  width: 150rpx;
	  height: 78rpx;
	  background: rgba(247,247,247,1);
	  border-radius: 6rpx;
	  margin: 0 30rpx 40rpx 0;
	  text-align: center;
	  color: #777777;
	  font-size: 26rpx;
	  position: relative;
	  display: table;
	  float:left;
	}
	.content_list_item_text{
	  width: 100%;
	  height: 100%;
	  display: table-cell;
	  vertical-align: middle;
	}
	.active{
	  border-color:#F67100;
	  color:#F67100;
	  background:rgba(231,120,23,0.1);
	}
	.content_list_item:nth-child(4n){
	  margin-right: 0;
	}
	.content_list_wrap{
	  height:200rpx;
	  overflow: hidden;
	  padding-top:20rpx;
	}
	.flod{
	  height:auto;
	}
	.news_more{
	  text-align: center;
	  margin-top:16rpx;
	  font-size: 24rpx;
	  color:#E77817;
	  margin-bottom: 30rpx;
	  background-color: #ffffff
	}
	.header_bottom{
	  display: inline-block;
	  font-size:24rpx;
	  margin-left: 10rpx;
	  box-sizing: border-box;
	}
	.all_select{
	  height:80rpx;
	  display: flex;
	  align-items: center;
	}
	#select_img{
	  width:28rpx;
	  height:28rpx;
	}
	.select_text{
	  font-size: 28rpx;
	  color:#666666;
	  margin-left: 10rpx;
	}
	.footer{
	  width:100%;
	  height:100rpx;
	  background:rgba(255,255,255,1);
	  box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.5);
	  position: fixed;
	  bottom:0;
	  left:0;
	  z-index:100;
	}
	.submit{
	  width:690rpx;
	  height:80rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  border-radius:40rpx;
	  text-align: center;
	  font-size: 32rpx;
	  color:#ffffff;
	  position: absolute;
	  top:10rpx;
	  left:50%;
	  transform: translateX(-50%)
	}
</style>
