<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;"/>
					请输入关键词搜索
				</view>
				<picker @change="bindproChange" :value="index" :range="provincelist" range-key="name">
					<!-- <view class="uni-input">{{array[index]}}</view> -->
					<view class="proselect flexthree">
						<text class="proname">{{provincename}}</text>
						<image class="down-ico" src="../../static/xiala.png" />
					</view>
				</picker>
			</view>
			<!-- nav -->
			<view class="nav-wrap">
				<view class="navigator" @click="zhaopin">
					<image src="../../static/helppeople.png"></image>
					<text>帮工招聘求职</text>
				</view>
				<view class="navigator">
					<image src="../../static/mianturn.png"></image>
					<text>面坊求购转让</text>
				</view>
				<view class="navigator">
					<image src="../../static/friend.png"></image>
					<text>征婚交友</text>
				</view>
				<view class="navigator">
					<image src="../../static/zhonglogo.png"></image>
					<text>中面集团</text>
				</view>
			</view>
			<!-- 最新发布 -->
			<view class="new-release-wrap">
				<!-- title -->
				<view class="new-release-title">最新发布</view>
				<!-- content -->
				<view class="new-release-content" v-for="(item,index) in luntanlist" :key="index">
					<!-- 头像，名称，等级 -->
					<view class="userinfo-wrap" @click="usercenter">
						<image src="../../static/userpic.png"></image>
						<text class="title">{{item.nickname}}</text>
						<view class="VIP">
							<image src="../../static/huiyuan.png"></image>
							VIP5
						</view>
					</view>
					<!-- type -->
					<view class="type-wrap">
						帮工招聘求职
						<text>帮工</text>
						<text>配送员</text>
						<text>销售员</text>
					</view>
					<!-- content -->
					<view class="release-text">
						<view class="release-text-title">
							帖子标题帖子标题帖子标题帖子标题帖子帖子
						</view>
						<view class="release-text-content">
							帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容帖子内容...
						</view>
					</view>
					<!-- 点赞， 人数 -->
					<view class="thumbs-number">
						<view class="thumbs">
							<image src="../../static/tienozan.png"></image>
							399
						</view>
						<view class="number">
							<image src="../../static/userpeopel.png"></image>
							399
						</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="zhaopin">
						<image src="../../static/helppeople.png"></image>
						<text>帮工招聘求职</text>
					</view>
					<view class="navigator">
						<image src="../../static/mianturn.png"></image>
						<text>面坊求购转让</text>
					</view>
					<view class="navigator">
						<image src="../../static/friend.png"></image>
						<text>征婚交友</text>
					</view>
					<view class="navigator">
						<image src="../../static/zhonglogo.png"></image>
						<text>中面集团</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";
	export default {
		data() {
			return {
				publish: false,
				footersel: 1,
				province_id: '',
				type: 1,
				page: 1,
				provincelist: [],
				provincename:'',
				index:0,
				luntanlist:[],
				keyword:''
				
			}
		},
		onLoad() {
			// 获取省份列表
			this.getprovincelist();
		},
		methods: {
			hidepublish() {
				this.publish = false
			},
			// 获取省份列表
			getprovincelist() {
				let that = this;
				var url = 'forum/get_province';
				var params = {
					is_forum_hot: ''
				}
				console.log('7766554', params)
				app.post(url, params).then((res) => {
					console.log(res);
					that.provincelist = res.data.data;
					this.provincename=res.data.data[0].name;
					that.province_id=res.data.data[0].id;
					// 获取论坛列表
					this.getluntanlist()
					
				}).catch((err) => {

				})
			},
			bindproChange(e){
				 this.index = e.target.value;
				 this.provincename=this.provincelist[e.target.value].name;
				 this.province_id=this.provincelist[e.target.value].id;
				 // 获取论坛列表
				 this.getluntanlist();
			},
			// 获取论坛列表
			getluntanlist() {
				let that = this;
				var url = 'forum/get_forum';
				var params = {
					keyword:that.keyword,
					province_id: that.province_id,
					type: that.type,
					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);
					console.log('9999',this.luntanlist)


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

				})
			},
			// 返回首页
			homeback() {
				console.log(43898934894)
				uni.navigateTo({
					url: '/pages/homepage/homepage'
				})
			},
			// 论坛列表
			zhaopin() {
				uni.navigateTo({
					url: '../luntan/luntanlist'
				})
			},
			// 底部导航跳转
			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"
					})
				} else {
					this.publish = true
				}
			}
		}

	}
</script>

<style>
	page {
		background: #F9F9F9;
	}
	.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;
	}
	.proname{
		width:90rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-right:5rpx;
	}
	.down-ico{
		width:16rpx;
		height:16rpx;
		font-size: 0;
	}
	.publishnav {
		padding: 0 !important;
	}

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

	.search-input {
		width: 470rpx !important;
	}

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

	.nav-wrap {
		background: #fff;
		display: flex;
		justify-content: space-between;
		padding: 32rpx 64rpx;
		margin-bottom: 16rpx;
		margin-top: calc(var(--status-bar-height) + 100rpx);;
	}

	.nav-wrap .navigator {
		text-align: center;
	}

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

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

	.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; */
	}
	/* .proname{
		
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	} */
</style>