<template>
	<view class="content">
		<view class="content_item" v-for="item,index in list" :key="index">
		    <view class="header clear" @tap="changeCurrent(item,index)">
		        <view class="header_lf">
					<view class="header_title">{{item.title}}</view>
		        </view>
		        <view class="header_rg">
					<text :class="['iconfont', item.current === 0?'header_bottom':'top']"></text>
		        </view>
		    </view>
		    <!-- 隐藏二级菜单 -->
		    <view :class="['content_list',item.current == 0?'':'show']">
		        <view :class="['content_list_wrap', item.flodStatus == 1?'flod':'']">
		            <view :class="['content_list_item', value === item.title?'active':'']" v-for="item,cindex in item.arr" :key="cindex" @tap="getItem(item)">
						<view class="content_list_item_text">{{item.title}}</view>
		            </view>
		        </view>
		        <!--折叠-->
		        <view class="news_more" @tap="changeFlod(item,index)">{{flod}} <view class="iconfont header_bottom"></view></view>
		    </view>
		</view>
		<view class="footer">
			<button class="submit" @tap="save">确定</button>
		</view>
	</view>
</template>

<script>
	import api from "../../../../../../api.js";
	let app = getApp();
	export default {
		data() {
			return {
				list:[],
				value:'',//选中小分类
				flod:'展开更多',
				flodStatus:0,
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			//加载数据
			getData(){
				let data = {
					token:app.globalData.token
				}
				api.getUserMyServeClass(data).then((res)=>{
					console.log(res);
					let contain_rh_item_list = res.data.data.contain_rh_item_list;
					for (let i = 0; i < contain_rh_item_list.length; i++){
						contain_rh_item_list[i].current = 0;
						contain_rh_item_list[i].flodStatus = 0;
					}
					this.list = contain_rh_item_list;
				})
			},
			// 点击出现下滑菜单
			changeCurrent(item,index){
				if(this.list[index].current == 0){
					this.list[index].current = 1;
				}else{
					this.list[index].current = 0;
				}
			},
			//展开更多
			changeFlod(item,index){
				if(this.list[index].flodStatus == 0){
					this.list[index].flodStatus = 1;
					this.flod = '点击收起';
				}else{
					this.list[index].flodStatus = 0;
					this.flod = '查看更多';
				}
			},
			//点击添加
			getItem(item){
				console.log(item);
				this.value = item.title;
			},
			//确定按钮
			save(){
				// 将参数传回上一页
				const pages = getCurrentPages()
				const prevPage = pages[pages.length - 2] // 上一页
				// 调用上一个页面的setData 方法，将数据存储
				prevPage.serviceName = this.value;
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>
	page{
	  width: 100%;
	  height:100%;
	  background-color: #f9f9f9;
	}
	.content{
	  width:100%;
	  margin-top:20rpx;
	  overflow: hidden;
	  padding-bottom: 120rpx;
	}
	.content_item{
	  width:100%;
	  background-color: #ffffff;
	  padding:0 30rpx;
	  box-sizing: border-box;
	  margin-bottom: 20rpx;
	}
	.header{
	  height:100rpx;
	  line-height: 100rpx;
	  position: relative;
	}
	.header_lf image{
	  float:left;
	  width:26rpx;
	  height:36rpx;
	  margin-top:32rpx;
	}
	.content_item:nth-child(2) image{
	  width:34rpx;
	  height:28rpx;
	}
	.content_item:nth-child(3) image{
	  width:30rpx;
	  height:36rpx;
	}
	.content_item:nth-child(4) image{
	  width:34rpx;
	  height:26rpx;
	  margin-top:36rpx;
	}
	.header_title{
	  font-size: 30rpx;
	  color:#222222;
	  float:left;
	}
	.header_rg{
	  float:right;
	}
	.header_bottom{
	  font-size: 26rpx;
	  color:#999999;
	}
	.top{
	  font-size: 26rpx;
	  color:#999999;
	}
	.content_list{
	  width:100%;
	  overflow: hidden;
	  display: none;
	}
	.show{
	  display: block;
	}
	.content_list_item{
	  width:150rpx;
	  height:78rpx;
	  background:rgba(249,249,249,1);
	  border-radius:6rpx;
	  border:1px solid rgba(232,232,232,1);
	  text-align: center;
	  box-sizing: border-box;
	  font-size: 26rpx;
	  color:#333333;
	  margin:0 30rpx 30rpx 0;
	  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;
	}
	.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%)
	}
	.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;
	}
</style>
