<template>
	<view class="Fanstey-TopicInfo">
		<view class="header" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar bg-white" :style="{'height': CustomBar + 'px','padding-top':StatusBar + 'px'}">
				<view class="action" @tap="back">
					<text class="cuIcon-back"></text>
				</view>
			
			</view>
			<view class="Topic-topContents" style="display: flex;">
				<view class="topic-left" style="width: 40%;height: 100%;">
					<view class="topic-Contents-title">
						# {{topInfo.name || '未知话题'}}
					</view>
					<!-- <view class="topic-Contents-views">
						300w次浏览
					</view> -->
				</view>
				<view class="topic-right" style="width: 57%;height: 100%;padding-left:130px;padding-top: 26px;">
					<view class="topic-right-avatar" style="width: 50px;height: 50px;">
						<image style="width: 100%;height: 100%;border-radius: 14px;" :src="topInfo.pic" mode=""></image>
					</view>
					
				</view>
			</view>
			<view class="Topic-nav">
				全部
			</view>
			<view class="waterfall">
					<uv-waterfall ref="waterfall"
						v-model="list"
						:add-time="10"
						:left-gap="leftGap"
						:right-gap="rightGap"
						:column-gap="columnGap"
						@changeList="changeList">
						<!-- 第一列数据 -->
						<template v-slot:list1>
							<!-- 为了磨平部分平台的BUG，必须套一层view -->
							<view>
								<view v-for="(item, index) in list1"
									:key="item.id"
									class="waterfall-item">
								<!-- 	<view class="waterfall-item__image" :style="[imageStyle(item)]" v-if="item.image.length>0">
										<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
									</view> -->
									<view class="waterfall-item__image" :style="[imageStyle(item)]" >
										<image src="https://img0.baidu.com/it/u=1010312865,580100376&fm=253&fmt=auto&app=120&f=JPEG?w=242&h=262" mode="widthFix" :style="{width:item.width+'px'}"></image>
									</view>
									<view class="waterfall-item__ft">
										<view class="waterfall-item__ft__title">
											<text class="value">{{item.title}}</text>
										</view>
										<view class="waterfall-item__ft__desc uv-line-2">
											<text class="value">{{item.desc}}</text>
										</view>
									</view>
								</view>
							</view>
						</template>
						<!-- 第二列数据 -->
						<template v-slot:list2>
							<!-- 为了磨平部分平台的BUG，必须套一层view -->
							<view>
								<view v-for="(item, index) in list2"
									:key="item.id"
									class="waterfall-item">
									<!-- <view class="waterfall-item__image" :style="[imageStyle(item)]" v-if="item.image.length>0">
										<image :src="item.image" mode="widthFix" :style="{width:item.width+'px'}"></image>
									</view> -->
									<view class="waterfall-item__image" :style="[imageStyle(item)]" >
										<image src="https://img0.baidu.com/it/u=1010312865,580100376&fm=253&fmt=auto&app=120&f=JPEG?w=242&h=262" mode="widthFix" :style="{width:item.width+'px'}"></image>
									</view>
									<view class="waterfall-item__ft">
										<view class="waterfall-item__ft__title">
											<text class="value">{{item.title}}</text>
										</view>
										<view class="waterfall-item__ft__desc uv-line-2">
											<text class="value">{{item.desc}}</text>
										</view>
									</view>
								</view>
							</view>
						</template>
					</uv-waterfall>
				</view>
		</view>
		<!--加载遮罩-->
		<view class="loading" v-if="isLoading==0">
			<view class="loading-main">
				<image src="../../../static/loading.gif"></image>
			</view>
		</view>
		<!--加载遮罩结束-->
	</view>
</template>

<script>
		import { guid } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import {
		localStorage
	} from '../../../js_sdk/mp-storage/mp-storage/index.js'
	// #ifdef APP-PLUS
	import owo from '../../../static/app-plus/owo/OwO.js'
	// #endif
	// #ifdef H5
	import owo from '../../../static/h5/owo/OwO.js'
	// #endif
	// #ifdef MP
	var owo = [];
	// #endif
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				NavBar: this.StatusBar + this.CustomBar,
				AppStyle: this.$store.state.AppStyle,
				scrollTop: 0,
				id: 0,
				parent: 0,
				isLoading:0,
				topInfo:null,
				list:[],
				list1: [],// 瀑布流第一列数据
								list2: [],// 瀑布流第二列数据
								leftGap: 10,
								rightGap: 10,
								columnGap: 10,
				postList:[],
				name: '',
			page: 1,
				
				submitStatus1:false,
				submitStatus2:false,
				operateShow: false
			}
		},
		onPageScroll(res) {
			var that = this;
			that.scrollTop = res.scrollTop;
		},
		computed: {
					imageStyle(item) {
						return item=>{
							const v = uni.upx2px(750) - this.leftGap - this.rightGap - this.columnGap;
							const w = v/2;
							const rate = w / item.w;
							const h = rate* item.h;
							return {
								width: w + 'px',
								height: h + 'px'
							}
						}
					}
				},
		onPullDownRefresh() {
			var that = this;
			that.page = 1;
			
			that.getTopList();
			var timer = setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000)
	
		},
		onReachBottom() {
			//触底后执行的方法，比如无限加载之类的
			var that = this;
			if (that.isLoad == 0) {
				that.loadMore();
				
			}
		},
		onLoad(res) {
			var that = this;
			if (res.id) {
				that.id = res.id;
				console.log(that.id);
			that.getTopicInfo();
			that.getPostList(false);
				
			}
			if(localStorage.getItem('userinfo')){
				var userInfo = JSON.parse(localStorage.getItem('userinfo'));
				that.isvip = userInfo.isvip;
			}
			that.userPurview();
			// #ifdef APP-PLUS || MP
			that.NavBar = this.CustomBar;
			// #endif
			that.page = 1;
			
		},
		onShow() {
			var that = this;
			
			uni.$emit('tOnLazyLoadReachBottom');
	
			if (localStorage.getItem('userinfo')) {
				that.userInfo = JSON.parse(localStorage.getItem('userinfo'));
				that.group = that.userInfo.group;
			} else {
				that.userInfo = null;
			}
			if (localStorage.getItem('token')) {
	
				that.token = localStorage.getItem('token');
			} else {
				that.token = "";
			}
			that.getSet();
			
			// #ifdef APP-PLUS
	
			//plus.navigator.setStatusBarStyle("dark")
			// #endif
	
		},
		mounted() {
			// #ifdef APP-PLUS
			this.initStatusBarStyle();
			// #endif
		},
		methods: {
			changeList(e){
							this[e.name].push(e.value);
						},
			getPostList(isPage) {
				
				var that = this;
				var page = that.page;
				var id = that.id; 
			
				if(isPage){
					page++
				}
				
				that.$Net.request({
						url:that.$API.PluginLoad('Fanstey_Topic'),//括号中填插件名
					data: {
						"action":"getInfoByid",
						
						"fa_uid":id,
						"Fan_page":page,
						"pageSize":10
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
					if(res.data.code==200){
						var postList = [];
						if(res.data.data.length >0){
							
						
						postList = res.data.data;
						console.log(postList);
						if(isPage){
							that.page++;
							that.postList = that.postList.concat(postList);
							that.list = that.postList;
						}else{
								that.postList = postList;
								that.list = that.postList;
						}
						}else{
							if (isPage) {
								that.moreText = "没有更多数据了";
							} else {
								that.postList = [];
								that.list = that.postList;
							}
						}
					}
				
					},
					fail: function(res) {
									   
					
					
					}
				})
				
			},
			getTopicInfo(){
			const that = this;
			var id = that.id; 
			
			that.$Net.request({ 
		url:that.$API.PluginLoad('Fanstey_Topic'),//括号中填插件名
				data: { 
					"action": "getTopp", 
					
					"fa_uid": id
				}, 
				method: "get", 
				dataType: 'json', 
				success: function(res) { 
					console.log(res);
					that.topInfo = res.data.data[0];
					that.isLoading =1;
					console.log(that.topInfo.name)
				}, 
				fail: function(res) { 
						 
						 
						 
				} 
			}) 
			},
			getSet() {
				var that = this;
				uni.request({
					url: that.$API.SPset(),
					method: 'GET',
					dataType: "json",
					success(res) {
						that.radiusBoxStyle = res.data.radiusStyle;
					},
					fail(error) {
					}
				})
			
			},
			// #ifdef APP-PLUS
			initStatusBarStyle() {
				var that = this;
				if (uni.getSystemInfoSync().platform === 'android') {
					plus.navigator.setStatusBarStyle('light'); // Android 平台
				} else {
					plus.navigator.setStatusBarStyle('light'); // iOS 平台
	
				}
	
			},
			onPageScroll(event) {
				this.scrollTop = event.scrollTop;
				if (this.scrollTop > 40) {
					if (uni.getSystemInfoSync().platform === 'android') {
						plus.navigator.setStatusBarStyle('dark'); // Android 平台
					} else {
						plus.navigator.setStatusBarStyle('dark'); // iOS 平台
					}
				} else {
					if (uni.getSystemInfoSync().platform === 'android') {
						plus.navigator.setStatusBarStyle('light'); // Android 平台
					} else {
						plus.navigator.setStatusBarStyle('light'); // iOS 平台
					}
				}
			},
			// #endif
			refresh() {
			      uni.startPullDownRefresh({
			        success: () => {
			        },
			      });
			      setTimeout(() => {
			        uni.stopPullDownRefresh({
			          success: () => {
			          },
			        });
			      }, 2000);
			    },
			totop() {
				// 返回顶部操作
				// #ifdef APP-PLUS
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
				// #endif
				// #ifdef H5
	
				window.scrollTo({
					top: 0,
					behavior: 'smooth', // Optional: add smooth scrolling behavior
				});
				// #endif
	
			},
			// #ifdef APP-PLUS
			//权限检测
			showTC(){
				var that = this;
				var tc1 = false;
				let _permissionID = 'android.permission.WRITE_EXTERNAL_STORAGE';
				let _permissionID2 = 'android.permission.CAMERA';
				plus.android.checkPermission(_permissionID2,
					granted => {
						if (granted.checkResult == -1) {
							console.log('无相机权限');
							uni.showModal({
								title: '权限申请说明',
								content: '我们将申请获取相机权限和访问相册权限，便于您使用拍照上传您的照片/视频及用于更换头像、意见反馈、保存相册、发布动态等场景。',
								cancelText: "取消",
								confirmText: "同意",
								showCancel: true,
								confirmColor: '#000',
								cancelColor: '#666',
								success: (res) => {
									if (res.confirm) {
										console.log('弹窗同意');
										tc1 = true;
										that.requestPermissions();
									}else{
										console.log('弹窗取消');
										that.isTy = false
										tc1 = true;
									}
								}
							})
							//还未授权当前查询的权限，打开权限申请目的自定义弹框
							that.$nextTick(() => {
								setTimeout(() => {
									that.ani = 'uni-' + that.type
								},30)
							})
						}
					},
					error => {
						console.log(error.message);
					}
				);
				plus.android.checkPermission(_permissionID,
					granted => {
						if (granted.checkResult == -1) {
							console.log('无相册权限');
							if(!tc1){
								uni.showModal({
									title: '权限申请说明',
									content: '我们将申请获取相机权限和访问相册权限，便于您使用拍照上传您的照片/视频及用于更换头像、意见反馈、保存相册、发布动态等场景。',
									cancelText: "取消",
									confirmText: "同意",
									showCancel: true,
									confirmColor: '#000',
									cancelColor: '#666',
									success: (res) => {
										if (res.confirm) {
											console.log('弹窗同意');
											return that.requestPermissions();
										}else{
											console.log('弹窗取消');
											that.isTy = false
										}
									}
								})
							}
							
							//还未授权当前查询的权限，打开权限申请目的自定义弹框
							that.$nextTick(() => {
								setTimeout(() => {
									that.ani = 'uni-' + that.type
								},30)
							})
						}
					},
					error => {
						console.log(error.message);
					}
				);
				
			},
			requestPermissions() {
				let _this = this;
			
					let _permissionID = 'android.permission.WRITE_EXTERNAL_STORAGE';
					let _permissionID2 = 'android.permission.CAMERA';
					
					plus.android.checkPermission(_permissionID2,
						granted => {
							if (granted.checkResult == -1) {
								//还未授权当前查询的权限，打开权限申请目的自定义弹框
								
								_this.$nextTick(() => {
									setTimeout(() => {
										_this.ani = 'uni-' + _this.type
									},30)
								})
							}
						},
						error => {
							console.log(error.message);
						}
					);
					plus.android.requestPermissions([_permissionID2],
						(e) => {
							//关闭权限申请目的自定义弹框
							_this.ani = '';
							_this.$nextTick(() => {
								
							})
							console.log(e,'kkkkk')
							if (e.granted.length > 0) {
								//当前查询权限已授权
								console.log('1已同意');
								plus.android.checkPermission(_permissionID,
									granted => {
										if (granted.checkResult == -1) {
											//还未授权当前查询的权限，打开权限申请目的自定义弹框
											
											_this.$nextTick(() => {
												setTimeout(() => {
													_this.ani = 'uni-' + _this.type
												},30)
											})
										}
									},
									error => {
										console.log(error.message);
									}
								);
								plus.android.requestPermissions([_permissionID],
									(e) => {
										//关闭权限申请目的自定义弹框
										_this.ani = '';
										_this.$nextTick(() => {
											
										})
										console.log(e,'kkkkk')
										if (e.granted.length > 0) {
											//当前查询权限已授权
											console.log('2已同意');
											_this.isTy = true
										}
										if (e.deniedAlways.length > 0) {
											//当前查询权限已被永久禁用，此时需要引导用户跳转手机系统设置去开启
											uni.showModal({
												title: '温馨提示',
												content: '您没有给予访问相册权限，不给予权限将无法使用该功能，立即去设置开启？',
												cancelText: "取消",
												confirmText: "去设置",
												showCancel: true,
												confirmColor: '#000',
												cancelColor: '#666',
												success: (res) => {
													if (res.confirm) {
														_this.goSetting();
													}else{
														_this.isTy = false
													}
												}
											})
										}
									})
							}
							if (e.deniedAlways.length > 0) {
								//当前查询权限已被永久禁用，此时需要引导用户跳转手机系统设置去开启
								uni.showModal({
									title: '温馨提示',
									content: '您没有给予使用相机权限，不给予权限将无法使用该功能，立即去设置开启？',
									cancelText: "取消",
									confirmText: "去设置",
									showCancel: true,
									confirmColor: '#000',
									cancelColor: '#666',
									success: (res) => {
										if (res.confirm) {
											_this.goSetting();
										}else{
											_this.isTy = false
										}
									}
								})
							}
						})
				
			},
			//跳转手机系统设置
			goSetting() {
					var Intent = plus.android.importClass("android.content.Intent");
					var Settings = plus.android.importClass("android.provider.Settings");
					var Uri = plus.android.importClass("android.net.Uri");
					var mainActivity = plus.android.runtimeMainActivity();
					var intent = new Intent();
					intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
					var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);
					intent.setData(uri);
					mainActivity.startActivity(intent);
			},
			// #endif
			
			userStatus() {
				var that = this;
				that.$Net.request({
	
					url: that.$API.userStatus(),
					data: {
						"token": that.token
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
						if (res.data.code == 0) {
	
							if (that.userInfo != null) {
								that.isLoginShow = true;
							}
							localStorage.removeItem('userinfo');
							localStorage.removeItem('token');
	
							that.userInfo = null;
						} else {
	
							if (localStorage.getItem('userinfo')) {
	
								var userInfo = JSON.parse(localStorage.getItem('userinfo'));
								if (res.data.data.group) {
									userInfo.group = res.data.data.group;
								}
								localStorage.setItem('userinfo', JSON.stringify(userInfo));
								// if(res.data.data.avatar){
								// 	that.userInfo = res.data.data.avatar;
								// }
	
							}
	
						}
					},
					fail: function(res) {
						uni.showToast({
							title: "网络开小差了哦",
							icon: 'none'
						})
					}
				})
			},
			change(index) {
				var that = this;
				if (index == 2) {
					that.orderKey = 'created';
					that.current = index;
					that.orderKey = that.titlePostList[that.current].order;
					console.log(that.orderKey + index);
					that.page = 1;
					that.getPostList(false);
				} else {
					that.current = index;
					that.orderKey = that.titlePostList[that.current].order;
					console.log(that.orderKey + index);
					that.page = 1;
					that.getPostList(false);
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			formatDate(datetime) {
				var datetime = new Date(parseInt(datetime * 1000));
				// 获取年月日时分秒值  slice(-2)过滤掉大于10日期前面的0
				var year = datetime.getFullYear(),
					month = ("0" + (datetime.getMonth() + 1)).slice(-2),
					date = ("0" + datetime.getDate()).slice(-2),
					hour = ("0" + datetime.getHours()).slice(-2),
					minute = ("0" + datetime.getMinutes()).slice(-2);
				//second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "-" + month + "-" + date + " " + hour + ":" + minute;
				// 返回
				return result;
			},
			loadMore() {
				var that = this;
				that.moreText = "正在加载中...";
				that.isLoad = 1;
				that.getPostList(true);
	
			},
			goLogin() {
				uni.navigateTo({
					url: '/pages/user/login'
				});
			},
			getSectionInfo() {
				var that = this;
				var token = "";
				if (localStorage.getItem('userinfo')) {
					var userInfo = JSON.parse(localStorage.getItem('userinfo'));
					token = userInfo.token;
				}
				that.$Net.request({
	
					url: that.$API.sectionInfo(),
					data: {
						"id": that.id,
						"token": token
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
						if (res.data.code == 1) {
							that.name = res.data.data.name;
							that.pic = res.data.data.pic;
							that.bg = res.data.data.bg;
							that.parent = res.data.data.parent;
							that.slug = res.data.data.slug;
							that.text = res.data.data.text;
							that.restrict = res.data.data.restrictKey;
							that.moderators = res.data.data.moderators;
							that.postNum = res.data.data.postNum;
							that.clockNum = res.data.data.clockNum;
							that.isFollow = res.data.data.isFollow;
							that.isClock = res.data.data.isClock;
						}
	
					},
					fail: function(res) {
						uni.showToast({
							title: "网络开小差了哦",
							icon: 'none'
						})
					}
				})
			},
			sectionFollow(type) {
				var that = this;
				uni.showLoading({
					title: "加载中"
				});
				var token = "";
				if (localStorage.getItem('userinfo')) {
					var userInfo = JSON.parse(localStorage.getItem('userinfo'));
					token = userInfo.token;
				}
				var data = {
					"sectionId": that.id,
					"token": token,
					"type": type
				}
				that.$Net.request({
					url: that.$API.sectionFollow(),
					data: data,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if (res.data.code == 1) {
							that.getSectionInfo();
						}
	
					},
					fail: function(res) {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
						uni.showToast({
							title: "网络开小差了哦",
							icon: 'none'
						})
					}
				})
			},
			sectionClock() {
				var that = this;
				uni.showLoading({
					title: "加载中"
				});
				var token = "";
				if (localStorage.getItem('userinfo')) {
					var userInfo = JSON.parse(localStorage.getItem('userinfo'));
					token = userInfo.token;
				}
				var data = {
					"sectionId": that.id,
					"token": token
				}
				that.$Net.request({
					url: that.$API.sectionClock(),
					data: data,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if (res.data.code == 1) {
							that.getSectionInfo();
						}
	
					},
					fail: function(res) {
						setTimeout(function() {
							uni.hideLoading();
						}, 1000);
						uni.showToast({
							title: "网络开小差了哦",
							icon: 'none'
						})
					}
				})
			},
			addPost() {
				var that = this;
	
				if (!localStorage.getItem('token') || localStorage.getItem('token') == "") {
					uni.showToast({
						title: "请先登录哦",
						icon: 'none'
					})
					return false;
				}
				if(that.isTy==false&&that.isHuaWei==1){
					that.showTC()
				}
				uni.navigateTo({
					url: '/pages/edit/addPost?section=' + that.name + "&sectionid=" + that.id
				});
				// uni.navigateTo({
				// 	url: '/pages/forum/addPost?section='+that.name+"&sectionid="+that.id
				// });
			},
			moderator(id) {
				var that = this;
				if (!localStorage.getItem('token') || localStorage.getItem('token') == "") {
					uni.showToast({
						title: "请先登录哦",
						icon: 'none'
					})
					return false;
				}
				uni.navigateTo({
					url: '/pages/manage/moderator?id=' + id
				});
			},
			setModerator(id, name) {
				var that = this;
				if (!localStorage.getItem('token') || localStorage.getItem('token') == "") {
					uni.showToast({
						title: "请先登录哦",
						icon: 'none'
					})
					return false;
				}
				uni.navigateTo({
					url: '/pages/manage/setModerator?id=' + id + '&resOf=true&name=' + name
				});
			},
			getTopList() {
				var that = this;
				var token = "";
				if (localStorage.getItem('userinfo')) {
					var userInfo = JSON.parse(localStorage.getItem('userinfo'));
					token = userInfo.token;
				}
				var data = {
					"section": that.id,
					"status": "1",
					"isTop": '1'
				}
				that.$Net.request({
					url: that.$API.postList(),
					data: {
						"searchParams": JSON.stringify(that.$API.removeObjectEmptyKey(data)),
						"limit": 5,
						"page": 1,
						"token": token
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: "post",
					dataType: 'json',
					success: function(res) {
						if (res.data.code == 1) {
							var list = res.data.data;
							that.topList = list;
						}
	
					},
					fail: function(res) {
	
					}
				})
			},
			toEdit(parent, id, name) {
				var that = this;
				uni.navigateTo({
					url: '/pages/manage/sectionEdit?parent=' + parent + '&sort=section&type=edit' + '&id=' + id +
						'&name=' + name
				});
			},
		
			userPurview() {
				var that = this;
				var uid = 0;
				if (localStorage.getItem('userinfo')) {
					var userInfo = JSON.parse(localStorage.getItem('userinfo'));
					uid = userInfo.uid;
				}
				var data = {
					"uid": uid,
				}
				that.$Net.request({
					url: that.$API.userPurview(),
					data: data,
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
	
	
						if (res.data.code == 1) {
							var list = res.data.data;
							if (list.length > 0) {
								for (var i in list) {
									if (list[i].sectionId == that.id) {
										that.myPurview = list[i].purview;
									}
								}
	
							}
							if (localStorage.getItem('userinfo')) {
								var myInfo = JSON.parse(localStorage.getItem('userinfo'));
								if (myInfo.group == 'administrator' || myInfo.group == 'editor') {
									that.myPurview = 5;
								}
	
							}
	
	
						}
					},
					fail: function(res) {
	
					}
				})
	
			},
			toSearch() {
				var that = this;
	
				uni.redirectTo({
					url: '/pages/contents/search'
				});
			},
			goInfo(id) {
				var that = this;
				uni.navigateTo({
					url: '/pages/forum/info?id=' + id
				});
			},
			goModerators(id){
				var that = this;
				uni.navigateTo({
					url: '/pages/forum/moderators?id='+id
				});
			}
	
		}
	}
</script>

<style>
	.Topic-topContents{
		width: 100%;
		height: 195rpx;
		border-bottom: 1px solid #dbdbdb;
	/* 	background-color: black; */
	}
	.topic-Contents-title{
		line-height:28px;
		margin-top: 27px;
		padding-left: 20px;
		font-size: 22px;
	
		font-weight: bold;
	}
	.topic-Contents-views{
		padding-left: 20px;
		margin-top: 9px;
		font-size: 14px;
		color: #939393;
	}
	.Topic-nav{
		padding-left: 15px;
		width: 100%;
		font-weight: bold;
		color: black;
		font-size: 16px;
		height: 60px;
		line-height: 80px;
	}
</style>
<style scoped lang="scss">
	$show-lines: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
	.waterfall-item {
		overflow: hidden;
		margin-top: 10px;
		border-radius: 6px;
	}
	.waterfall-item__ft {
		padding: 20rpx;
		background: #fff;
		&__title {
			margin-bottom: 10rpx;
			line-height: 48rpx;
			font-weight: 700;
			.value {
				font-size: 32rpx;
				color: #303133;
			}
		}
		&__desc .value {
			font-size: 28rpx;
			color: #606266;
		}
		&__btn {
			padding: 10px 0;
		}
	}
</style>