<template>
	<TabLayout ref='tabLayout' text="我的活动" :tabTitleData="page.tabTitle" @tabClickItem='clickTab' @downRefresh="down" :isShareIn="page.isShareIn">
		<view class="margin-top250"></view>
		<view v-for="(item,index) in page.listActivity " :key="index">
			<view class="activity-area" @click="clickItem(index)">
				<view class="summary">
					<view class="name-category">
						<text class="name">{{item.name}}</text>
						<text class="category">{{item.sportCategoryName}}</text>
					</view>
					<text class="enroll">报名截止：{{item.enrollEndTime}}</text>
				</view>
				
				<view class="image-area">
					<image class="image" mode="aspectFill" :src="item.firstCoverImage"></image>
					<view class="tips">
						<image class="icon" src="../../static/renqi.png"></image>
						<text class="popularity">{{item.popularity}}</text>
						<text :class="{'enroll-state enroll-no':item.enrollState ==1||item.enrollState ==3,'enroll-state enroll-yes':item.enrollState==2}" >{{item.enrollStateName}}</text>
					</view>
				</view>
				<view v-for="(info,pos) in item.listActivityItemsArea " :key="pos">
					<view class="item-area">
						<view class="item-name-mold-money">
							<text class="item-name">{{info.name}}</text>
							<text class="mold-money">{{info.enrollMoldName}}/{{info.enrollMoney==0?"免费":info.enrollMoney}}</text>
						</view>
						<view class="enroll-amount-date">
							<text class="amount">报名数：{{info.enrollNumbers==0?"暂无":info.enrollNumbersLimit+'人'}}{{info.enrollNumbersLimit==0?"不限":info.enrollNumbersLimit+'人'}}</text>
							<text class="date">{{info.startTime}}</text>
						</view>
						<view v-if="item.listActivityItemsArea.length>pos+1" class="line-wide"></view>
					</view>
				</view>
			</view>
		</view>
	</TabLayout>
		
<!-- 	<TabLayout ref='tabLayout' text="我的赛事" :tabTitleData="page.tabTitle" @tabClickItem='clickTab' @downRefresh="down" :isShareIn="page.isShareIn">
		<swiper style="min-height: 100vh;" :current="page.currentTab" @change="swiperTab">
			<swiper-item v-for="(listItem,listIndex) in data.tabList" :key="listIndex" style="box-sizing: border-box;">
				
				<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lower1">
					<view :style="{'width': '100%','padding-top': page.paddingTop}">
						<loading v-if="page.showLoading[listIndex]" :key='listIndex'></loading>
						<view v-for="(item,index) in listItem">
							<view v-if="index!=0"
								style="width: 100%; height: 10rpx;background-color: #ccc; margin-top: 10rpx;">
							</view>
							<view>
								<view style="display: flex; flex-direction: row; margin-left: 30rpx;margin-top: 30rpx;">
									<text
										style="color: #101010; font-size: 32rpx;font-weight: 530;  white-space: nowrap;overflow: hidden;text-overflow: ellipsis;flex: 1;">{{item.name}}</text>
									<text
										style="display: flex;align-items: center; margin-right: 30rpx; color: #fff; font-size: 20rpx; background-color: #F2BF5C; padding: 0rpx 15rpx;border-radius: 5rpx;">{{item.sportCategoryName}}</text>
								</view>
							</view>
							<view
								style="display: flex;flex-direction: row;margin-top: 15rpx;align-items: center;margin-left: 30rpx;margin-right: 30rpx;">
								<text style="font-size: 26rpx;color: #666666;">报名截止：</text>
								<text style="color: #666666;font-size: 26rpx;">{{item.enrollEndTime}}</text>
							</view>
							<view style="background-color: #F1F1F1; height: 5rpx; width: 100%; margin-top: 20rpx;">
							</view>
							<view v-for="(info,pos) in item.listMyActivityItemsArea " :key="pos">
								<view
									style="display: flex;flex-direction: column;margin-left: 30rpx;margin-right: 30rpx;">
									<view style="display: flex;flex-direction: row; align-items: center; margin-top: 10rpx;
										padding-top: 10rpx;padding-bottom: 10rpx;">
										<text style="color: #101010; font-size: 28rpx; ">{{info.name}}</text>
										<text
											style="color: #919191 ; font-size: 24rpx;margin-left: 25rpx;">{{info.enrollMoldName}}</text>
										<text
											style="color: #919191 ; font-size: 24rpx;margin-left: 15rpx;">{{info.enrollNumbers==0?"暂无":info.enrollNumbersLimit+'人'}}</text>
										<image v-if="info.isJoin!=0"
											style="width: 20rpx;height: 20rpx;margin-left: 15rpx;"
											src="../../static/custom-icon/click.png" mode="aspectFill"></image>
										<text
											style="color: #919191 ; font-size: 24rpx;flex: 1;text-align: right;">{{info.startTime}}</text>
									</view>
									<view v-if="item.listMyActivityItemsArea.length>pos+1"
										style="width: 100%; height: 2rpx;background-color: #efefef; margin-top: 10rpx;">
									</view>
								</view>
							</view>

						</view>

						<loading v-if="page.showBottomLoading[listIndex]" :key="'bottom'+listIndex"></loading>

						<noData v-if="page.showNoData[listIndex]" :key="'nodata'+listIndex"></noData>

					</view>

				</scroll-view>
			</swiper-item>

		</swiper>


	</TabLayout> -->

</template>

<script>
	const util = require('../../util/util.js');
	export default {
		data() {
			return {
				page: {
					listActivity:[],
					tabTitle: ['全部', '我创建的', '我加入的'],
					tabType: [0, 1, 2],
					currentTab: 0,
					pages: [1, 1, 1, 1], //第几个swiper的第几页
					nowLoadingPages: [false, false, false, false], //是否正在加载
					paddingTop: '0px',
					showLoading: [false, false, false, false],
					showBottomLoading: [false, false, false, false],
					showNoData: [false, false, false, false],
					isShareIn: false,
					show: false
				},
				data: {
					tabList: [
						[],
						[],
						[],
						[]
					]
				}
			};
		},
		onLoad(options) {
			if (getApp().globalData.isLogin) {
				this.page.show = false
			} else {
				this.page.show = true
			}
			let _this = this
			this.$nextTick()
				.then(function() {
					_this.page.paddingTop = _this.$refs.tabLayout.getViewPagerTop()
				})

			let index = options.index
			if (this.IsEmpty(index)) {
				index = 0;
			}

			// 加载第一页数据
			this.down(index)
			this.page.currentTab = index

			this.page.isShareIn = ("true" == options.isShareIn ? true : false)
		},
		onShow() {
			// 加载第一页数据
			//this.down(this.page.currentTab)
		},
		methods: {
			refresh(page) {
				let _this = this
				this.HTTP({
					url: "aos/v1/aosUser/getMyActivityAreaPagerList",
					data: {
						current: 1,
						size: 10,
						params: {
							"sysUserSid": getApp().globalData.sysUserSid,
							"type": 1,
						}
					},
					paramsType: "JSON",
					method: "POST",
					loading: true
				}).then((res) => {
					// 成功关闭刷新状态
					_this.$refs.mescrollRef.refreshFinished(res.data.records.length)
					if (page.num == 1) {
						// 第一页 先清空集合数据
						_this.page.listActivity = []
					}
					// 追加数据
					_this.page.listActivity = _this.page.listActivity.concat(res.data.records)
			
				}).catch(function(err) {
					_this.$refs.mescrollRef.refreshError()
				});
				
				console.log("中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国")
			},
			clickItem(index) {
				let activitySid = this.page.listActivity[index].sid
				console.log(activitySid)
				uni.navigateTo({
					url: '../find/ActivityDetail?activitySid=' + activitySid
				});
			
			},
			gamesClick(gameSid, type, messageSid, page) {

				if (page == 3) {
					uni.navigateTo({
						url: './WarActivity?linkSid=' + gameSid + '&messageSid=' + messageSid
					})
				} else {

					if (type == 2) {
						uni.navigateTo({
							url: './PkGameDetailsActivity?gameSid=' + gameSid
						})
					} else {
						uni.navigateTo({
							url: './HappyGameDetailsActivity?gameSid=' + gameSid
						})
					}

				}
			},
			// swiper 滑动
			swiperTab: function(e) {
				// 模拟tab点击
				this.$refs.tabLayout.changeTab(e);
			},
			getGameType(isGroups) {
				if (isGroups) {
					return "赛事类型：团体赛";
				} else {
					return "赛事类型：单打赛";
				}
			},
			getState(startTime, endTime) {

				let l = this.CurrentMillions()

				let state = ''

				if (startTime > l) {
					state = "比赛状态：比赛未开始";
				} else if (startTime < l && endTime > l) {
					state = "比赛状态：比赛进行中";
				} else if (endTime < l) {
					state = "比赛状态：比赛结束";
				}

				return state;
			},
			getTime(time) {
				return '比赛时间：' + this.TimeFormat(time, "yyyy-MM-dd HH:mm");
			},
			clickTab(index) {
				this.page.currentTab = index
				// 每次切换时都重新加载页面
				this.down(index)
			},
			down(index) {
				// 下拉刷新请求 并更改数据
				let _this = this
				this.data.tabList[index] = []
				//二维数组，开启强制渲染
				_this.$forceUpdate()
				// 初始化当前的页数
				this.page.pages[index] = 1
				// 当前页数的加载状态
				this.page.nowLoadingPages[index] = true
				// 只要切换页面就显示
				this.page.showLoading[index] = true
				this.page.showNoData[index] = false

				this.HTTP({
					url: "aos/v1/aosUser/getMyActivityAreaPagerList",
					data: {
						current: this.page.pages[index],
						size: 10,
						params: {
							"sysUserSid": getApp().globalData.sysUserSid,
							"type": _this.page.tabType[index],
						}
					},
					paramsType: "JSON",
					method: "POST",
				}).then((res) => {
					// 当前页数的加载状态
					_this.page.nowLoadingPages[index] = false
					// 填充数据
					_this.data.tabList[index] = res.data.records
					_this.page.listActivity = res.data.records
					_this.$refs.tabLayout.downRefresh()
					//二维数组，开启强制渲染
					_this.$forceUpdate()
					// 关闭loading
					_this.page.showLoading[index] = false
					_this.page.showNoData[index] = res.data.records.length == 0
				}, (err) => {
					// 当前页数的加载状态
					_this.page.nowLoadingPages[index] = false
					_this.$refs.tabLayout.downRefresh()
					//二维数组，开启强制渲染
					_this.$forceUpdate()
					// 关闭loading
					_this.page.showLoading[index] = false
					_this.page.showNoData[index] = false

				})
			},
			request(index, pagerStart) {

				let _this = this

				this.HTTP({
					url: "aos/v1/activityManagement/getMyActivityAreaPagerList",
					data: {
						current: pagerStart,
						size: 10,
						params: {
							"sysUserSid": getApp().globalData.memberSid,
							"type": _this.page.tabType[index],
						}

					},
					paramsType: "JSON",
					method: "POST",
				}).then((res) => {

					// 重置加载状态
					_this.page.nowLoadingPages[index] = false
					_this.$refs.tabLayout.downRefresh()
					_this.page.showBottomLoading[this.page.currentTab] = false

					if (res.data.records.length == 0) {
						_this.Toast('没有更多数据了')
						//二维数组，开启强制渲染
						_this.$forceUpdate()
						return
					}

					_this.data.tabList[index] = _this.data.tabList[index].concat(res.data.records)
					//二维数组，开启强制渲染
					_this.$forceUpdate()

				}, (err) => {
					// 重置加载状态
					_this.page.nowLoadingPages[index] = false
					_this.$refs.tabLayout.downRefresh()
					//二维数组，开启强制渲染
					_this.$forceUpdate()
				})
			},
			// 加载更多 util.throttle为防抖函数
			lower1: util.throttle(function(e) {

				if (this.page.nowLoadingPages[this.page.currentTab]) {
					// 正在加载 拦截请求
					return
				}

				this.page.showBottomLoading[this.page.currentTab] = true
				//二维数组，开启强制渲染
				this.$forceUpdate()

				// 更改请求的页数
				this.page.pages[this.page.currentTab]++
				// 正在加载
				this.page.nowLoadingPages[this.page.currentTab] = true

				// 请求数据
				this.request(this.page.currentTab, this.page.pages[this.page.currentTab])

			}, 300)

		}
	}
</script>

<style lang="scss">
	@import url("../../static/columns.css");
	.margin-top250{
		margin-top:250rpx;
	}
</style>
