<template>
	<view class="content">
		<view class="status_bar"></view>
		<view class="home-wrap">
			<!-- 搜索 -->
			<view class="search-wrap navigator">
				<view class="homeimg" open-type="navigate" @click="homeback">
					<image class="home-ico" src="../../static/home.png" mode="widthFix" />
				</view>
				<view class="search-input navigator" url="/pages/searchGoods/index" open-type="navigate">
					<icon type="search" size="12" color="#BDC4CE" style="margin-right:10rpx;" />
					<input type="text" placeholder="请输入关键词搜索" @confirm="finish" @input="enterword" class="enterwordk"
					 placeholder-class="enterwordk">

				</view>
				<view class="proselect flexthree" @click="selprovince">
					<text class="proname">{{provincename}}</text>
					<image class="down-ico" src="../../static/xiahuang.png" />
				</view>

			</view>

			<view class="nav-wrap nav-wrapk">

				<view class="navigator" @click="zhaopin(item,index)" :data-id="item.id" v-for="(item,index) in kindlist" :key="index">
					<image :src="item.image" class="logoimgk"></image>
					<text>{{item.name}}</text>
				</view>

			</view>
			<!-- 最新发布 -->
			<view class="new-release-wrap">
				<!-- title -->
				<view class="flexone tiezitop">
					<view class="new-release-title" :class="order==0?'zuiactive':''" @click="orderrange" :data-id="0">默认</view>
					<view class="new-release-title" :class="order==1?'zuiactive':''" @click="orderrange" :data-id="1">热门话题</view>
					<view class="new-release-title" :class="order==2?'zuiactive':''" @click="orderrange" :data-id="2">最高点赞</view>
				</view>
				<view class="nodata" v-if="isshowluntan">暂无数据</view>
				<view class="luntanlisbox" v-else>

					<view class="new-release-content" v-for="(item,index) in luntanlist" :key="index" @click="luntandetail(item)">
						<!-- 头像，名称，等级 -->
						<view class="userinfo-wrap" @click.stop="usercenter(item)">
							<image class="avatarimgk" :src="item.user.avatar"></image>
							<text class="title">{{item.user.nickname}}</text>

							<view class="VIP" v-if="item.forum_type==1">
								<image src="../../static/huiyuan.png"></image>
								{{item.user.level.name1}}
							</view>
						</view>
						<!-- type -->
						<view class="type-wrap">
							<!-- 帮工招聘求职 -->
							{{item.category_name}} <text style="margin-left:10rpx;border:none">{{item.createtime}}</text>
							<text v-for="(item,index) in item.user.label" :key="index">{{item.name_label}}</text>
							<!-- <text>配送员</text>
							<text>销售员</text> -->
						</view>
						<!-- content -->
						<view class="release-text">
							<view class="release-text-title">
								{{item.title}}
							</view>
							<view class="release-text-content">
								<rich-text :nodes="item.content"></rich-text>
							</view>
							<view class="imagebox videoimagebox" v-if="item.video!=null" @click.stop="govideo(item.video)">
								<image :src="item.video_image" mode="aspectFill" />
								<view class="videoimg">
									<image src="../../static/videoplay.png" mode=""></image>
								</view>
							</view>
							<view class="imagebox flexone" v-if="item.images!=null" style="flex-wrap: wrap;">
								<image style="width:200rpx;height:200rpx;margin-right:20rpx;margin-bottom:20rpx" :src="item" v-for="(item,indexk) in item.images"
								 :key="indexk" @click.stop="previewimg(index,indexk)" />
							</view>
						</view>
						<!-- 点赞， 人数 -->
						<view class="thumbs-number">
							<view class="thumbs" style="position:relative;">
								<image src="../../static/comment.png" style="width:40rpx;height:35rpx;"></image>
								<view class="commentnum" style="width:30rpx;height:20rpx;border-radius: 50%;color:#fff;font-size: 18rpx;text-align: center;
								line-height: 20rpx;background: #C29445;position: absolute;
								right:0;top:0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
								 v-if="item.comment!=0">
									{{item.comment}}
								</view>
							</view>
							<view class="thumbs" @click.stop="praisedian(item,index)">
								<image src="../../static/tienozan.png" v-if="item.is_praise==2"></image>
								<image src="../../static/tiezan.png" v-else></image>
								{{item.praise}}
							</view>
							<view class="number">
								<image src="../../static/userpeopel.png"></image>
								{{item.view}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 发布 -->
		<view class="release-news" v-if="publish">
			<view class="release-content">
				<view class="nav-wrap publishnav">
					<view class="navigator" @click="publishitezi(item,index)" :data-id="item.id" v-for="(item,index) in publisharr"
					 :key="index">
						<image :src="item.image" style="border-radius: 50%;"></image>
						<text>{{item.name}}</text>
					</view>

				</view>
				<!-- close -->
				<view class="close" @click="hidepublish">
					<image src="../../static/publishchahao.png" />
				</view>
			</view>
		</view>

		<!-- 底部导航 -->
		<view class="teacherfooter">
			<view class="teacherfootitem" @click="footerseljump" :data-id="1">
				<view class="teacherfootitemtop shou">
					<image :src="footersel==1?'../../static/tieziactive.png':'../../static/tiezi.png'"></image>
				</view>
				<view class="teacherfootname " :class="footersel==1?'activename':''">帖子</view>
			</view>
			<view class="teacherfootitem" @click="footerseljump" :data-id="2">
				<view class="teacherfootitemtop shou">
					<image :src="footersel==2?'../../static/fabu.png':'../../static/fabu.png'"></image>
				</view>
				<view class="teacherfootname" :class="footersel==2?'activename':''">发布</view>
			</view>
			<view class="teacherfootitem" @click="footerseljump" :data-id="3">
				<view class="teacherfootitemtop shou">
					<image :src="footersel==3?'../../static/examineactive.png':'../../static/examine.png'"></image>
				</view>
				<view class="teacherfootname" :class="footersel==3?'activename':''">我的</view>
			</view>
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	import {
		text
	} from "../../utils/base.js"
	export default {

		data() {
			return {
				publish: false,
				footersel: 1,
				province_id: '',
				type: 1,
				page: 1,
				provincelist: [],
				provincename: '',
				index: 0,
				luntanlist: [],
				keyword: '',
				currentTabIndex: 2,
				order: 0,
				isshowluntan: false,
				protype: '',
				kindlist: [],
				publisharr: [],
				openclose: ''

			}
		},
		onLoad() {
			uni.setStorageSync("provincename", "")


		},
		methods: {

			// 是否隐藏
			ishideclose() {
				console.log('88888')
				let that = this;
				var url = 'page/get_switch2';
				var params = {

				}
				app.post(url, params).then((res) => {
					console.log(res.data.data.switch);

					that.openclose = res.data.data.switch;
					console.log('43783488949348', that.openclose)
					that.getkind()

				}).catch((err) => {
					console.log(err)
				})
			},
			// 获取帖子分类
			getkind() {
				let that = this;
				var url = 'forum/get_forum_category';
				var params = {

				}
				console.log('帖子种类参数s', params)
				app.post(url, params).then((res) => {

					console.log(res, '999999999', that.openclose);
					let list = res.data.data;
					let listk = res.data.data;
					let data = listk;
					console.log(data, 887766666666666666666666)
					let arr = []
					data.forEach(function(value, index, array) {
						value.chose = false;
						if (index < 4) {
							value.type = 1
							arr.push(value)
						} else {
							value.type = 2
						}

					})
					that.publisharr = arr;
					that.kindlist = list;

				}).catch((err) => {
					console.log(err)

				})
			},




			hidepublish() {
				this.publish = false
			},
			// 最新和最热
			orderrange(e) {
				this.order = e.currentTarget.dataset.id;
				this.page = 1;
				this.luntanlist = [];
				this.getluntanlist()

			},
			// 选择城市
			selprovince() {
				uni.navigateTo({
					url: '/pages/nearshop/allprovince?seltype=' + 2
				})
			},
			getlocation() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						var point = new plus.maps.Point(res.longitude, res.latitude);
						plus.maps.Map.reverseGeocode(
							point, {},
							function(event) {
								console.log(event)
								var address = event.address; // 转换后的地理位置
								var point = event.coord; // 转换后的坐标信息
								var coordType = event.coordType; // 转换后的坐标系类型
								console.log(address, 'address');
								var reg = /.+?(省|市|自治区|自治州|县|区)/g;
								console.log(address.match(reg));
								var addressname = address.match(reg);
								console.log(addressname);
								if (addressname[0] == '天津市') {
									addressname[0] = addressname[0].split("市")[0]
								} else if (addressname[0] == '北京市') {
									addressname[0] = addressname[0].split("市")[0]
								} else if (addressname[0] == '上海市') {
									addressname[0] = addressname[0].split("市")[0]
								} else if (addressname[0] == '重庆市') {
									addressname[0] = addressname[0].split("市")[0]
								}
								uni.setStorageSync("currentcity", addressname[0])
								if (uni.getStorageSync("provincename") == '') {


									that.provincename = addressname[0];
									uni.setStorageSync("provincename", that.provincename)
								} else {
									that.provincename = uni.getStorageSync("provincename")
									// uni.setStorageSync("provincename","")
								}

								console.log(that.provincename)
								that.getprovinceid()

								// _this.addressList = address.match(reg).toString().split(",");
								// _this.address = _this.addressList[1];
								// console.log(_this.addressList[0]);
								// console.log(_this.addressList[1]);
								// console.log(_this.addressList[2]);

							},
							function(e) {}
						);
					}
				});
			},



			// 根据城市名字获取id
			getprovinceid() {
				let that = this;
				var url = 'question/get_area';
				var params = {
					province_name: that.provincename
				}
				console.log('7766554', params)
				app.post(url, params).then((res) => {

					that.province_id = res.data.data.id;

					// 获取论坛列表
					this.getluntanlist()
				}).catch((err) => {
					console.log(err)

				})
			},



			// 输入关键字
			enterword(e) {
				this.keyword = e.detail.value;
				console.log(this.keyword)
			},
			// 输入完成
			finish() {
				this.page = 1;
				this.luntanlist = [];
				this.getluntanlist();
			},

			// 论坛详情
			luntandetail(item) {
				uni.navigateTo({
					url: '/pages/luntan/luntandetail?id=' + item.id
				})
			},

			// 进入video
			govideo(src) {
				console.log(src)

				uni.navigateTo({
					url: '/pages/luntan/video?src=' + src
				})
			},
			// 获取论坛列表
			getluntanlist() {
				let that = this;
				var url = 'forum/get_forum';
				var params = {
					keyword: that.keyword,
					province_id: that.province_id,
					type: '',
					order: that.order,
					page: that.page,
					pageNum: 10
				}
				console.log('参数', params)
				app.post(url, params).then((res) => {
					console.log('论坛列表', res);
					that.luntanlist = that.luntanlist.concat(res.data.data);
					that.luntanlist.forEach(function(value, index, array) {
						value.content = text(value.content)
					})
					that.luntanlist = that.luntanlist
					if (this.luntanlist.length == 0) {
						that.isshowluntan = true
					} else {
						that.isshowluntan = false
					}
					if (that.page > 1) {
						if (res.data.data.length == 0) {
							uni.showToast({
								title: '没有更多了~',
								icon: "none"
							})
						}
					}
					that.$forceUpdate()

				}).catch((err) => {
					console.log(err)
					if (err.msg == '用户未登录') {
						uni.reLaunch({
							url: '/pages/login/loginindex'
						})
					}

				})
			},
			// 预览图片
			previewimg(index, indexk) {
				let that = this;
				uni.previewImage({
					current: that.luntanlist[index].images[indexk],
					urls: that.luntanlist[index].images,
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			praisedian(item, index) {
				let that = this;
				if (that.luntanlist[index].is_praise == 2) {
					uni.showToast({
						title: '点赞成功',
						icon: 'none'
					})
					that.luntanlist[index].is_praise = 1;
					that.luntanlist[index].praise = that.luntanlist[index].praise + 1
				} else {
					uni.showToast({
						title: '取消点赞成功',
						icon: 'none'
					})
					that.luntanlist[index].is_praise = 2;
					that.luntanlist[index].praise = that.luntanlist[index].praise - 1
				}

				that.luntanlist = that.luntanlist;

				var url = 'forum/praise';
				var params = {
					forum_id: item.id
				}
				console.log('参数', params)
				app.post(url, params).then((res) => {
					console.log(res);
				}).catch((err) => {
					console.log(err)
				})
			},

			// 返回首页
			homeback() {
				console.log(43898934894)
				uni.switchTab({
					url: '/pages/homepage/homepage'
				})
			},

			// 进入论坛主页
			usercenter(item) {
				console.log('999999', item)
				let user = JSON.stringify(item.user)
				uni.navigateTo({
					url: '/pages/luntan/luntanpage?userid=' + item.user_id + '&user=' + user
				})
			},
			// 论坛列表
			zhaopin(item, index) {
				console.log(item)
				let token = uni.getStorageSync("token");
				if (token == '') {
					uni.navigateTo({
						url: '/pages/login/loginindex'
					})
				} else {
					if (item.type == 1) {
						let id = item.id;
						uni.navigateTo({
							url: '../luntan/luntanlist?id=' + id
						})
					} else {
						let id = item.id
						if (id == 8) {
							uni.navigateTo({
								url: '/pages/luntan/examine'
							})
						} else if (item.name == '中面资讯') {
							uni.navigateTo({
								url: '/pages/luntan/zhongmianzixun'
							})
						} else if (item.name == '投诉维权') {
							uni.navigateTo({
								url: '/pages/luntan/tousuweiquan'
							})
						} else if (item.name == '中面资质') {
							uni.navigateTo({
								url: '/pages/luntan/zhongmianzizhi'
							})
						}
					}

				}
			},

			// 发布评论
			publishitezi(item) {
				let token = uni.getStorageSync("token");
				if (token == '') {
					uni.navigateTo({
						url: '/pages/login/loginindex'
					})
				} else {
					let type = item.id;
					uni.navigateTo({
						url: '/pages/luntan/addcontract?type=' + type
					})
				}
			},
			// 底部导航跳转
			footerseljump(e) {
				console.log(e)
				let id = e.currentTarget.dataset.id;
				console.log(id)
				if (id == 1) {
					uni.navigateTo({
						url: '/pages/luntan/luntan'
					})
				} else if (id == 3) {
					// uni.navigateTo({
					// 	url: "/pages/luntan/examine"
					// })
					uni.navigateTo({
						url: '/pages/usercenter/myPublish'
					})
				} else {
					this.publish = true
				}
			}
		},
		onShow() {
			let that = this;
			that.ishideclose();
			that.page = 1;
			that.luntanlist = [];
			uni.$on('provinceid', function(data) {
				console.log('343744', data)
				that.province_id = data.provinceid;
				that.protype = data.protype;
				console.log(that.province_id)

			})


			this.publish = false;
			this.page = 1;
			this.luntanlist = [];
			// 获取当前地理位置
			this.getlocation();
			uni.hideTabBar({


			})

			// this.getluntanlist()
		},
		onReachBottom() {
			let newpage = this.page;
			newpage++;
			this.page = newpage;
			this.getluntanlist()
		}


	}
</script>

<style>
	page {
		background: #F9F9F9;
	}

	.luntanlisbox {
		padding-bottom: 150rpx
	}

	.imagebox {
		width: 686rpx;
		/* height:280rpx; */
		margin-top: 16rpx;
		position: relative;
	}

	.videoimagebox {
		width: 686rpx;
		height: 280rpx;
		margin-top: 16rpx;
		position: relative;
	}

	.imagebox image {
		width: 100%;
		height: 100%;
	}

	.videoimg {
		width: 150rpx;
		height: 150rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.video img {
		width: 100%;
		height: 100%;
	}

	.tiezitop {
		width: 750rpx !important;
		background: #fff;
		border-bottom: 1px solid #E3E2E1;
	}

	.logoimgk {
		border-radius: 50%;
	}

	.release-text-content {
		height: auto;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		word-wrap: break-word;
	}

	.enterwordk {
		color: #BDC4CE;
		font-size: 24rpx;

	}

	.proselect {
		width: 120rpx;
		height: 60rpx;
		border: 2rpx solid rgba(238, 238, 238, 1);
		color: #fff;
		font-size: 24rpx;
		border-radius: 40rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
		margin-left: 16rpx;
		background: #fff;
	}

	.proname {
		width: 90rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-right: 5rpx;
		color: #FF9417
	}

	.down-ico {
		width: 16rpx;
		height: 16rpx;
		font-size: 0;
	}

	.publishnav {
		padding: 0 94rpx 32rpx 0 !important;
		box-sizing: border-box !important;
	}

	.homeimg {
		width: 88rpx;
		height: 88rpx;
		font-size: 0;
	}

	.search-input {
		width: 470rpx !important;
		height: 60rpx;
		background: rgba(249, 249, 249, 1);
		border-radius: 32px;
	}

	/* 搜素 */
	.search-wrap {
		width: 750rpx;
		padding: 14rpx 0;
		box-sizing: border-box;
		background: #C29445;
		z-index: 99;
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
	}

	.nav-wrap {
		width: 750rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 32rpx 0rpx 0 0rpx;
		box-sizing: border-box;
		margin-bottom: 16rpx;
	}

	.nav-wrapk {
		margin-top: calc(var(--status-bar-height) + 100rpx);
	}

	.nav-wrap .navigator {
		text-align: center;
		width: 25%;
		/* margin-right:40rpx; */
		margin-bottom: 32rpx;
	}

	.nav-wrap .navigator image {
		width: 88rpx;
		height: 88rpx;
		margin: 0 auto 0;
	}

	.nav-wrap .navigator text {
		width: 104rpx;
		display: block;
		color: #3D454C;
		font-size: 26rpx;
		text-align: center;
		margin: 0 auto;
	}

	.new-release-wrap .new-release-title {
		height: 84rpx;
		line-height: 84rpx;
		padding-left: 32rpx;
		position: relative;
		background: #fff;
		font-size: 32rpx;
		color: #061220;
		/* border-bottom: 1px solid #E3E2E1; */
	}

	.new-release-wrap .new-release-title:after {
		content: "";
		position: absolute;
		top: 20rpx;
		left: 0;
		height: 44rpx;
		width: 8rpx;
		background: var(--themeColor);
		border-top-right-radius: 6rpx;
		border-bottom-right-radius: 6rpx;
	}

	.release-news {
		position: fixed;
		width: 750rpx;
		height: 100%;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 10;
	}

	.release-news .release-content {
		position: absolute;
		width: 750rpx;
		bottom: 0;
		left: 0;
		background: #fff;
		z-index: 1000;
		padding: 60rpx;
		box-sizing: border-box;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
	}

	.release-news .meun-lists {
		display: flex;
		justify-content: space-between;
	}

	.release-news .meun-lists navigator {
		text-align: center;
	}

	.release-news .meun-lists navigator image {
		width: 88rpx;
		height: 88rpx;
		margin: auto;
	}

	.release-news .meun-lists navigator text {
		width: 104rpx;
		display: block;
		color: #3D454C;
		font-size: 26rpx;
	}

	.release-news .close {
		display: flex;
		justify-content: center;
		margin-top: 38rpx;
	}

	.release-news .close image {
		width: 60rpx;
		height: 60rpx;
	}

	.search-wrap .navigator:nth-child(3) {
		/* font-size: 20rpx; */
	}

	.avatarimgk {
		border-radius: 50%;
	}

	.zuiactive {
		color: #FF9417 !important;
	}

	/* .proname{
		
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	} */
</style>