<template>
	<view class="postbar" :style="{ height: contentHeight }">
		<u-tabs :list="list" :is-scroll="true" :current="current" @change="change" :active-color="mainColor"></u-tabs>
		<u-empty v-if="g.length == 0" text="暂无内容" mode="list"></u-empty>

		<view v-if="g.length > 0" style="
        height: calc(100vh - 50px);
        width: calc(100vw);
        overflow: hidden;
		padding-bottom: 50px;
      ">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
				style="height: 100%;">
				<view class="details">
					<view class="item" v-for="(x, i) in g" :key="i">
						<!-- 小图模式 -->
						<view class="item-minbox" v-if="showtype==1" @click="gopostdetails(x)">
							<view class="minbox-l">
								<text class="minbox-l-t">{{x.ActivityTitle}}</text>
								<view style="display: flex;align-items: center;margin-top: 20px;">
									<view style="width: 30px;height: 30px;border-radius: 15px;position: relative;">
										<image :src="x.Photo" style="width: 100%;height: 100%;border-radius: 15px;">
										</image>
										<image class="gstyle" v-if="x.Sex==1"
											src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan-b.png">
										</image>
										<image class="gstyle" v-if="x.Sex==2"
											src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv-b.png">
										</image>
									</view>
									<view
										style="margin-left: 5px;display: flex;flex-direction: column;height: 30px;justify-content: space-between;">
										<text
											style="width: calc(100vw - 75px - 310rpx);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 12px;color: #111111;">
											{{x.UserName}}
										</text>
										<view style="display: flex;align-items: center;font-size: 10px;color: #858687;">
											<text>报名{{x.EnrollNum}}人</text>
											<text style="margin-left: 5px;">{{x.ReplyNum}}留言</text>
										</view>
									</view>
								</view>
							</view>
							<view class="minbox-r">
								<image :src="x.ImageList[0]" mode="aspectFill"
									style="width: 100%;height: 100%;border-radius: 15px;"></image>
							</view>
						</view>
						<!-- 大图模式 -->
						<view v-if="showtype==2" class="maxbox" @click="gopostdetails(x)">
							<image :src="x.ImageList[0]" mode="aspectFill"
								style="width: 100%;height: 410rpx;border-radius: 15px;"></image>
							<view
								style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 32rpx;color: #111111;padding-top: 10px;">
								{{x.ActivityTitle}}
							</view>
							<view class="max-b">
								<!-- <text v-if="x.Label!=null && x.Label!=''" :style="{color:mainColor}">【{{x.Label}}】</text> -->
								<view class="tagBox">
									<u-tag :text="x.Label" mode="dark" :bg-color="mainColor"
										v-if="x.Label!=null && x.Label!=''" />
								</view>

								<view class="infoBox">
									<!-- 头像 -->
									<view style="width: 35px;height: 35px;border-radius: 15px;position: relative;"
										@click.native.stop="goUserinfo(x)">
										<image :src="x.Photo" style="width: 100%;height: 100%;border-radius: 15px;">
										</image>
										<image class="gstyle" v-if="x.Sex==1"
											src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan-b.png">
										</image>
										<image class="gstyle" v-if="x.Sex==2"
											src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv-b.png">
										</image>
									</view>
									<view style="width: 170rpx; margin-left: 20rpx;">
										<view
											style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 24rpx;color: #111111;font-weight: 800;">
											{{x.UserName}}
										</view>
										<text v-if="x.IsOpenEnroll==1"
											style="font-size: 22rpx;font-weight: 500;color: #858687;">报名人数：{{x.EnrollNum}}</text>
									</view>
								</view>

								<!-- <view style="margin-left: 10px;display: flex;flex-direction: column;height: 35px;justify-content: space-between;">
						<text style="width: calc(100vw - 75px);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;color: #111111;">
						{{x.UserName}}
						</text>
						<view style="display: flex;align-items: center;justify-content: space-between;font-size: 11px;color: #858687;">
							<view style="display: flex;align-items: center;">
								<text v-if="x.IsOpenEnroll==1" style="margin-right: 5px;">报名{{x.EnrollNum}}人</text>
								<text >{{x.ReplyNum}}留言</text>
							</view>
							<text v-if="x.IsOpenEnroll==1">{{x.Deadline}}截止</text>
							<text v-if="x.IsOpenEnroll==2">创建时间:{{x.CreateDate}}</text>
						</view>
					</view> -->
							</view>
						</view>
					</view>

				</view>

				<u-loadmore :status="status" :load-text="loadText" :font-size="24" :margin-top="20" :margin-bottom="20"
					bg-color="#FFF" />
				<view style="width: 100%;height: 50px;"></view>
			</scroll-view>

		</view>
		<view class="release" @click.stop="gopublishing()">
			<!-- <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pp-fabu.png" style="width: 100%;height: 100%;"></image> -->
			<!-- 发布动态按钮 -->
			<view class="fbanniu">
				<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/fabupyq.png"
					style="height: 26rpx;" mode="aspectFit"></image>
				<text style="font-size: 10px;color: #FFF;">发布</text>
			</view>
		</view>
		<!-- 加载中 -->
		<view class="loading" v-if="loading">
			<u-loading mode="flower" size="48">></u-loading>
			<Text style="color: #fff; margin-top: 10rpx;">加载中...</Text>
		</view>
		<!-- 取消提示 -->
		<u-toast ref="uToast" />
		<tabbar></tabbar>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth='gbAuth'></auth>
	</view>
</template>

<script>
	import auth from "@/components/auth/index.vue";
	import tabbar from "@/components/tabbar/index";
	export default {
		components: {
			auth,
			tabbar
		},
		data() {
			return {
				pageTitle: "贴吧",
				showAuth: false,
				u: {},
				list: [],
				mainColor: "",
				contentHeight: 0,
				current: 0,
				msg: {
					pageIndex: 1,
					pageSize: 10,
					ForumId: 0,
					ActivityTitle: '',
				},
				page_count: 1,
				g: [],
				loading: false,
				status: "loadmore",
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				forumList: [],
				showtype: 2, //好像这里没配置了 直接显示的大图模式
			};
		},
		created() {
			this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
			this.mainColor = this.$uiConfig.mainColor;
		},
		mounted() {
			let currentPages = getCurrentPages();
			let u = "/" + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync("basedata") ?
				wx.getStorageSync("basedata").bar_title : [];
			pages.forEach((x) => {
				if (x.value == u) {
					this.pageTitle = x.new_name ? x.new_name : x.name;
				}
			});
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
		},
		onLoad: function(option) {
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
				this.u = {
					nickName: "未登录",
					avatarUrl: ""
				};
				// this.showAuth = true;
			} else {

			}
			this.GetForumList()

		},
		methods: {
			change(index) {
				this.msg.ForumId = this.forumList[index].Id;
				this.current = index;
				this.msg.pageIndex = 1;
				this.g = [];
				this.loading = true;
				this.init();
			},
			Children(Id) { //发布成功了返回刷新列表
				this.msg.ForumId = Id
				this.forumList.forEach((x, y) => {
					if (x.Id == Id) {
						this.current = y
					}
				})
				this.msg.pageIndex = 1;
				this.g = [];
				this.loading = true;
				this.init();
			},
			GetForumList() {
				this.request2({
						url: '/api/AppletMiai/GetForumList',
						data: {}
					},
					res => {
						if (res.resultCode == 1) {
							this.forumList = res.data
							this.list = []
							res.data.forEach(x => {
								let obj = {
									name: x.Name
								}
								this.list.push(obj)
							})
							this.msg.ForumId = this.forumList[0].Id;
							this.init();
						}
					}
				);
			},
			init() {

				this.request2({
						url: '/api/AppletMiai/GetActivityPageList',
						data: this.msg
					},
					res => {
						this.loading = false;
						if (res.resultCode == 1) {
							this.g = this.g.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.status = "nomore";
							}
						}
					}
				);
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.msg.pageIndex++;
					this.status = "loading";
					this.init();
				} else {

					this.status = "nomore";
				}
			},
			gopublishing() { //发帖
				this.u = uni.getStorageSync("mall_UserInfo");
				if (!this.u) {
					this.u = {
						nickName: "未登录",
						avatarUrl: ""
					};
					this.showAuth = true;
				} else {
					uni.navigateTo({
						url: '/pages/blindDate/postPublishing?ForumId=' + this.msg.ForumId
					})
				}

			},
			reloadUserinfo() {
				this.u = uni.getStorageSync("mall_UserInfo");
				// this.showAuth=false;
				this.GetForumList();
			},
			//关闭登录窗口
			gbAuth() {
				this.showAuth = false;
			},
			gopostdetails(x) { //招募贴的
				uni.navigateTo({
					url: '/pages/blindDate/postDetails?Id=' + x.Id
				})
			},
			goUserinfo(x) { //用户信息
				uni.navigateTo({
					url: '/pages/blindDate/persondetails?UserId=' + x.UserId
				});
				innerAudioContext.stop();
			}


		},
	};
</script>
<style>
	.postbar {
		width: 100%;
		height: 100%;
		background: #FFF;
		position: relative;
		font-family: aa;
	}

	.postbar .loading {
		width: 180rpx;
		height: 180rpx;
		background: #000000;
		opacity: 0.7;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 50%;
		top: 30%;
		margin-left: -100rpx;
		z-index: 999;
	}

	.postbar .details {
		padding: 0 15px;
		display: flex;
		flex-direction: column;

	}

	.postbar .release {
		width: 120rpx;
		height: 120rpx;

		position: fixed;
		right: 15px;
		bottom: 120px;

	}

	.item-minbox {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 94px;
		margin: 15px 0;

	}

	.item-minbox .minbox-l {
		width: calc(100vw - 40px - 310rpx);
		height: 94px;
		display: flex;
		flex-direction: column;


	}

	.item-minbox .minbox-l-t {
		font-size: 15px;
		color: #111111;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.postbar .gstyle {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 13px;
		height: 13px;
	}

	.postbar .minbox-r {
		width: 310rpx;
		height: 94px;
		border-radius: 15px;
	}

	.postbar .maxbox {
		width: 100%;
		margin-top: 20px;
	}

	.postbar .max-b {
		width: 100%;
		height: 35px;
		/* display: flex;
		justify-content: space-between;
		align-items: center; */
		position: relative;
		margin-top: 10px;
	}

	/* 活动标签 */
	.tagBox {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0;
	}

	/* 活动信息 */
	.infoBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0;
	}

	.fbanniu {
		width: 42px;
		height: 42px;
		border-radius: 21px;
		position: fixed;
		right: 20rpx;
		bottom: 170rpx;
		background: #40766E;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 99;
	}
</style>
