<style lang="scss" scoped>
	.Jiaheactivity .box-top{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		.box-t-item{
			width: 140rpx;
			height: 60rpx;
			border-radius: 4px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: #999999;
			margin-right: 10px;
			background: #EDF0F3;
		}
		.currentStyle{
			color: #FFF;
			background-color: #40766E;
		}
		.box-top-r{
			width:200rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: #40766E;
			background: #EDF0F3;
			border-radius: 4px;
			padding: 0 5px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
	.Jiaheactivity .details{
		width: 100%;
		padding: 0 15px;
		.details-time{
			width: 100%;
			font-size: 12px;
			color: #111111;
			margin-top: 15px;
		}
		.details-box{
			width: 100%;
			margin-top: 15px;
			box-shadow: 0px 3px 6px 0px rgba(139, 115, 64, 0.16);
			border-radius: 6px;
			overflow: hidden;
			position: relative;
			min-height: 196rpx;
		}
		.details-box-top-z{
			width: 100%;
			height: 3px;
		}
		.details-box-top-f{
			width: 100%;
			height: 3px;
			background: #e2e2e2;
		}
		.details-box-t-positions{
			height: 40rpx;
			font-size: 20rpx;
			color: #FFF;
			background: #B7A264;
			display: flex;
			align-items: center;
			padding: 0 26rpx;
			border-top-right-radius: 6px;
			border-bottom-left-radius: 6px;
			position: absolute;
			right: 0;
			top: 0;
		}
		.details-b-center{
			width: 100%;
			display: flex;
			margin-top: 40rpx;
		}
		.details-b-center-l{
			width: 120rpx;
			height: 120rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
		}
		.details-b-center-r{
			width: 1px;
			flex:1;
			padding: 0 15px;
		}
		.details-b-title{
			width: 100%;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
			font-size: 28rpx;
			color: #111111;
			font-weight: bold;
			font-family: PingFang SC;
		}
		.details-b-time{
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}
		.details-b-bottom{
			width: 100%;
			height: 45px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 15px;
		}
		.scroll-box{
			height: calc(100vh - 50px);
			width: calc(100vw);
			overflow: hidden;
			padding-bottom:50px ;
		}
	}
</style>
<template>
	<view class="Jiaheactivity" >
		<view class="box-top">
			<view style="display: flex;">
				<view class="box-t-item" :class="{currentStyle:current == 1}" @click="listType(1)">即将开始</view>
				<view class="box-t-item" :class="{currentStyle:current == 2}" @click="listType(2)">正在参加</view>
			</view>
			<view class="box-top-r" @click="show=true" v-if="current == 1">
				<text class="box-top-r-text">{{ActivityName}}</text>
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/salesxiala.png" style="width: 17px;height: 17px;margin-left: 7px;"></image>
			</view>
		</view>
		<view v-show="current==1">
			<u-empty v-if="g.length == 0" text="暂无内容" mode="list"></u-empty>
			<view v-if=" g.length>0"  
			class="scroll-box"
			:style="{'padding-bottom':tabbarH+'px'}"
			>
						<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" style="height: 100%;">
							
							<view class="details"  v-for="(item,index) in g" :key='index'>
								<view class="details-time">
									{{item.Dateitem}}
								</view>
								<view class="details-box" v-for="(x,y) in item.list" :key='y' @click="gourl(x)">
									<view v-if="x.IsJoinActivity == 0">
										<view class="details-box-top-z" v-if="(x.TotalMan-x.JoinNum)>0" :style="{background:mainColor}"></view>
										<view class="details-box-t-positions"  v-if="(x.TotalMan-x.JoinNum)>0" :style="{background:mainColor}">
											<text>{{(x.TotalMan-x.JoinNum)>=6?'可预约':(x.TotalMan-x.JoinNum)<6?'剩余'+(x.TotalMan-x.JoinNum)+'个空位':''}}</text>
										</view>
										<view class="details-box-top-f"  v-if="(x.TotalMan-x.JoinNum)<1" ></view>
										<view class="details-box-t-positions"  v-if="(x.TotalMan-x.JoinNum)<1" style="background:#e2e2e2;color: #999999;">
											爆满
										</view>
									</view>
									<view v-if="x.IsJoinActivity == 1">
										<view class="details-box-top-f" style="background: #40766E;"   ></view>
										<view class="details-box-t-positions"   :style="{background:'#40766E'}">
											已报名
										</view>
									</view>
									
									<!-- 内容 -->
									<view class="details-b-center">
										<view class="details-b-center-l">
											<view style="font-size: 50rpx;color: #1B1D1E;font-weight: 800;font-family: PingFang SC;">
												{{x.DayStr}}
											</view>
											<view style="font-size: 28rpx;color: #999999;font-weight: 500;font-family: PingFang SC;">
												{{x.WeekStr}}
											</view>
										</view>
										<view style="width: 1px;background: #E2E2E2;height: 60px;"></view>
										<view class="details-b-center-r">
											<view class="details-b-title">
												{{x.ActivityName}}
											</view>
											<view class="details-b-time">
												报名时间:{{x.BMStart}}-{{x.BMEnd}}
											</view>
										</view>
									</view>
									<view style="width: 100%;height: 1px;background: #E2E2E2;margin-top: 10px;"></view>
									<view class="details-b-bottom">
										<view class="details-b-time" style="margin-top: 0;">
											活动时间:{{x.HDStart}}-{{x.HDEnd}}
										</view>
										<view   :style="{color:pricecolor,'font-size':'32rpx'}">
											<text v-if="x.IsFree==1">免费</text>
											
											<view v-if="x.IsFree==2 && x.Price>0"  style="display: flex;align-items: flex-end;" >
												<text style="font-size: 22rpx;">￥</text>
												<text>{{x.Price}}</text>
											</view>
											<view v-if="x.IsFree==2 && x.Price==0"  style="display: flex;align-items: flex-end;" >
												<text>{{x.PointNum}}</text>
												<text style="font-size: 22rpx;">点</text>
											</view>
										</view>
									</view>
								</view>
									
							</view>
							
							<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20" bg-color="#FFF" />
						</scroll-view>
			
					</view>
		</view>
		

		
		<view v-show="current==2" style="height: calc(100vh - 50px);">
			<signUp ref='children'></signUp>
		</view>
	
		
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth='gbAuth'></auth>
		<u-popup v-model="show" mode="bottom" border-radius="20">
			<view class="pubox" >
				<view class="pubox-top">
					<view></view>
					<text >选择活动类型</text>
					<u-icon name="cross" color="#555" size="40" @click='show=false'></u-icon>
				</view>
				<!-- <view style="display: flex;flex-direction: column;align-items: center;margin-top: 10px;">
					<view style="font-size: 20px;color: #111111;font-weight: 400;	">选择你感兴趣的贴吧</view>
				</view> -->
				
				<scroll-view scroll-y="true" style="max-height: calc(100vh * 0.7 - 65px);padding-bottom: 20px;min-height:calc(100vh * 0.4 - 65px) ;">
					<view class="ht-box">
						<view v-for="(x,y) in forumList" :key="y" class="foritem" @click="select(x)" :style="{color:x.Id == msg.ActivityType?'#FFF':'#666666',background:x.Id == msg.ActivityType?mainColor:'#F9F9F9'}">
							{{x.TypeName}}
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<tabbar></tabbar>
	</view>
</template>

<script>
	import auth from "@/components/auth/index.vue";
	import signUp from './components/signUpList.vue';
	import tabbar from "@/components/tabbar/index";
	export default {
		components: {
			auth,
			signUp,
			tabbar
		},
		data() {
			return {
				show:false,
				current:1,
				pageTitle: "活动列表",
				showAuth: false,
				u: {},
				mainColor: "",
				pricecolor:'',
				msg: {
					pageIndex: 1,
					pageSize: 10,
					ActivityType: 0,
				},
				ActivityName:'',
				page_count: 1,
				g: [],
				loading: false,
				status: "loadmore",
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				forumList:[],
				tabbarH:0,
			};
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.pricecolor = this.$uiConfig.pricecolor;
			this.tabbarH = this.$uiConfig.is_bang ? 78 : 50;
		},
		mounted() {
			
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			let basedata = wx.getStorageSync("basedata")
		
			
		},
		onLoad: function(option) {
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
				this.u = {
					nickName: "未登录",
					avatarUrl: ""
				};
				this.showAuth = true;
			} else {
				this.GetActivityTypeList()
			}
			

		},
		methods: {
			GetActivityTypeList(){
				this.request2({
						url: '/api/AppletEducation/GetActivityTypeList',
						data: {}
					},
					res => {
						this.forumList = res.data
						let obj={
							Id:0,
							TypeName:'不限'
						}
						this.forumList.unshift(obj)
						this.msg.ActivityType =0;
						this.ActivityName ='不限';
					}
				);
				this.init()
			},
			init() {

				this.request2({
						url: '/api/AppletEducation/GetActivityPage',
						data: this.msg
					},
					res => {
						this.loading = false;
						if (res.resultCode == 1) {
							let data = this.groupArr(res.data.pageData,'MonthStr');
							let data2 = data
							if(this.g.length>0){
								data2.forEach(x=>{
									if(x.Day == this.g[this.g.length-1].Day){//判断当前第一条数据和已有的是否同一天 放在一起
										console.log('进入一次')
										this.g[this.g.length-1].list=this.g[this.g.length-1].list.concat(x.list);
										data.splice(0,1)
									}
								})
							}
							this.g = this.g.concat(data);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.status = "nomore";
							}
							
						}
					}
				);
			},
			groupArr(list,field){
				var fieldList = [],att=[];
					list.map((e)=>{
						fieldList.push(e[field])
					})
					
					//数组去重
					fieldList = fieldList.filter((e,i,self)=>{
						return self.indexOf(e)==i
					})
					for(var j=0;j<fieldList.length;j++){
						//过滤出匹配到的数据
						var arr = list.filter((e)=>{
							return e.MonthStr==fieldList[j];
						})
						att.push({
							Dateitem:arr[0].YearStr+'年'+arr[0].MonthStr+'月',
							list:arr
						})
					}
					return att;
			},
			getorder(){//报名成功处理
				this.current = 2;//让他直接跳入我报名
				if (Object.keys(this.$refs).length > 0 && this.$refs.children) { //判断
					this.$refs.children.getfzuj()
				}
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.init();
				} else {
					this.status = "nomore";
				}
			},
		
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				this.GetActivityTypeList()
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth=false
			},
			listType(type){
				this.current = type;
				if(type==1){//TODO 暂时不知道接口
					
				}else{
					this.u = uni.getStorageSync("mall_UserInfo");
					if (!this.u) {
						this.u = {
							nickName: "未登录",
							avatarUrl: ""
						};
						this.showAuth = true;
					} else {
						if (Object.keys(this.$refs).length > 0 && this.$refs.children) { //判断
							this.$refs.children.getfzuj()
						}
					}
				}
			},
			select(x){
				   this.msg.ActivityType =x.Id;
				   this.ActivityName =x.TypeName;
				   this.show = false;
				   this.msg.pageIndex=1;
				   this.g=[];
				   this.init()
			},
			gourl(x){
				uni.navigateTo({
					url:'/pages/school/JIaheactivitydetails?Id='+x.Id
				})
			}
		


		},
	};
</script>
<style>
	.Jiaheactivity {
		width: 100%;
		height: 100vh;
		background: #FFF;
		font-family: aa;
	}
	.Jiaheactivity .pubox{
		width: 100%;
		
		padding:0 15px;
	}
	.Jiaheactivity .pubox-top{
		width: 100%;
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		color: #111;
	}
	::-webkit-scrollbar{
	 
	   display:none;
	 
	}
	.Jiaheactivity .foritem{
		height: 30px;
		font-size: 12px;
		padding: 0 12px;
		display: flex;
		align-items: center;
		border-radius: 15px;
		margin-right: 25px;
		margin-bottom: 15px;
	}
	.ht-box{
			padding:0 15px;
			display: flex;
			flex-wrap: wrap;
			margin-top: 10px;
		}
</style>
