<template>
	<!-- 首页 -->
	<view class="container" style="padding-top: 90px;background-color: #FFFFFF;">
		<view class="" style="width: 100vw;">
			<view class="status_bar"></view>
			<navigationBar custom="true">
				<view :style="{width: '100vw',height: '50px', color: 'white'}" style="background-image: linear-gradient(to right, #58BEE0, #84CCCA);position: fixed;z-index: 999;top:40px;">
					<view :style="{padding: '10px', paddingLeft: '20px'}" style="display: flex;align-items: center;">
						<view class="backHome" @click="backHome"></view>
						<view style="font-size: 16px;font-weight: bold;line-height: 30px;margin-left: 10px;">话题分类</view>
					</view>
				</view>
			</navigationBar>
		</view>
		<view class="menu_title">
			<view class="dis-flex">
				<image class="menu_img"  :src="menuLists[currentMenu].img" mode=""></image>
				<view class="tab-item">#{{ menuLists[currentMenu].title }}#</view>
				<view style="flex:1;">
					<view class="menu_btn" @click="showRightMenu">选择话题</view>
				</view>
			</view>
		</view>
		<!-- <loadlogo v-if="!loadlogo" /> -->
		<view class="page-index" :style="'background-color: ' + datas.page.background" :class="!!bottomMenu ? 'bottomPadding' : ''">
			<view class="">
				<view style="">
					
					<view class="list-con" v-show="tabIndex==1">
						<pic-text-list :isClass="true" :communityList="communityList" @changenoMore1="changenoMore1" :scrollLock="scrollLock" @changeScrollLock="changeScrollLock"></pic-text-list>
						<!-- <block v-for="(item, index) in communityList" :key="index">
							<view @click="toDetails(item.id)" style="border-bottom: 1px solid #efefef;">
								<pic-text :info="item" :index="index" :stopVideo="stopVideo" :currentPlay="currentPlay" @changePlay="changePlay()"></pic-text>
							</view>
						</block> -->
						<load-more :isMore="communityList.length==0"></load-more>
						<!-- <none-mores v-if="communityList.length==0"></none-mores> -->
					</view>
				</view>
			</view>
			<!-- <view class="full"></view> -->
		</view>
		<PopManager :show="showRight" :type="'top'" @clickmask="showRight = false" class="right_menu">
			<cover-view v-if="showRight" class="menu_box">
				<cover-view class="menu_close" @click="hideRightMenu">
					<cover-image :src="imageRootNew+'mb-plus.png'" class="closeImg"></cover-image>
				</cover-view>
				<cover-view class="" style="height: calc(100vh - 130px);overflow-y: scroll;">
					<cover-view v-for="(item,index) in menuLists" :key="index" :class="{active:currentMenu==index}"
						@click="changeMenu(index)" class="menu_item">
						{{item.title}}
					</cover-view>
				</cover-view>
			</cover-view>
		</PopManager>
	</view>
</template>
<script>
let innerAudioContext = uni.createInnerAudioContext();
import App from '@/common/js/app.js';
import Loadlogo from '@/components/template/loadlogo.vue';
import wxApi from '@/common/js/wxApi.js';
import PopManager from '@/components/template/PopManager.vue';
// import picText from "@/components/template/pic_text/pic_text.vue"
import picTextList from "@/components/template/pic_text/pic_text_list.vue"
import loadMore from '@/components/template/loadmore.vue'
import noneMores from '@/components/template/nonemores.vue'

export default {
	data() {
		return {
			loadlogo: false,
			loadAgain: false,
			datas: {
				basic: [],
				adv: '',
				page: {}
			},
			pageInfo: {},
			bottomMenu: null,
			bgAudioMannager:'',
			muiick:'',
			seeting:null,
			pagenum:0,
			isred:0,
			height:40,
			isRedId:null,
			isRedShare:null,
			shareShow:false,
			hintShow:false,
			tabIndex: 1,
			communityList: [],
			tab1Page: 1,
			page_index: 10,
			noMore1: false,
			// stopVideo: 0,
			scrollLock: false,
			// scrollTimer: null,
			// currentPlay: -2,//当前正在播放的视频在列表中的索引,-2表示没有正在播放
			showRight: false,//右侧话题边栏
			menuLists: [],
			currentMenu: 0,
			currentMenuId: null
		};
	},
	components: {
		Loadlogo,
		PopManager,
		// picText,
		picTextList,
		loadMore,
		noneMores
	},
	onReady(){
		// console.log('onReady比onLoad慢')
	},
	onLoad(e) {
		// console.log('onLoad')
		let _this = this;
		uni.getSystemInfo({
			success:function(data){
				// 将其赋值给this
				_this.height=data.statusBarHeight;
			}
		})
		this.currentMenu = e.index;
		this.currentMenuId = e.id;
		this.getMenu();
	},
	onShow() {
		this.getList();
	},
	onHide() {
		let _this = this,
			play_Audio = false,
			pageAudio = _this.pageInfo.music;
		if (!play_Audio) {
			innerAudioContext.pause();
			innerAudioContext.onPause(() => {
				console.log('暂停播放');
			});
		}
		// _this.isTabbars = false;
		_this.play_Audio = play_Audio;
	},
	created() {},
	mounted() {
		this.$nextTick(function() {
			this.getcurCityTime();
		});
	},
	watch:{
	},
	methods: {
		backHome(){
			uni.navigateBack({
				delta:1
			})
		},
		getcurCityTime() {
			let _this = this,
				agencyData = uni.getStorageSync('agencyData'),
				timestamp = new Date().getTime(),
				cityTime = uni.getStorageSync('cityTimestamp'),
				nowTime = !!cityTime ? timestamp - cityTime : '';
			if (!!nowTime) {
				let nowTime_m = parseInt((nowTime / 1000 / 60) % 60);
				if (nowTime_m > 120) {
					// #ifdef H5
					wxApi.wxRegister(() => {
						jWeixin.getLocation({
							type: 'gcj02',
							success: function(res) {
								App.getAreaId(
									res,
									'',
									'',
									options => {
										console.log('拿到了');
										if (agencyData.areaid !== options.data.areaid) {
											uni.showModal({
												title: `定位到您在${options.data.areaname}`,
												content: `是否切换至该城市进行探索`,
												confirmText: '切换',
												success: function(calback) {
													if (calback.confirm) {
														uni.setStorageSync('agencyData', options.data);
														_this.$nextTick(function() {
															_this.$refs.diypages.currentaidCity = options.data.areaname;
															uni.setStorageSync('curLoction', res);
														});
													}
												}
											});
										}
									},
									true
								);
							}
						});
					});
					// #endif
					// #ifdef MP-WEIXIN
					App.getLocation().then(res => {
						App.getAreaId(
							res,
							'',
							'',
							options => {
								if (agencyData.areaid !== options.data.areaid) {
									uni.showModal({
										title: `定位到您在${options.data.areaname}`,
										content: `是否切换至该城市进行探索`,
										confirmText: '切换',
										success: function(calback) {
											if (calback.confirm) {
												uni.setStorageSync('agencyData', options.data);
												_this.$nextTick(function() {
													_this.$refs.diypages.currentaidCity = options.data.areaname;
													uni.setStorageSync('curLoction', res);
												});
											}
										}
									});
								}
							},
							true
						);
					});
					// #endif
				}
			}
		},
		toArticle(id){
			App.navigationTo({
				url:`pages/mainPages/headline/headlineDetail?headline_id=${id}`
			})
		},
		// 获取学生社区图文列表
		getList(page = 1, isPage = false){
			let _this = this;
			let data = {
				id: 0,//0对应掌上生活的全部类目
				two_id: this.currentMenuId,
				page,
				page_index: _this.page_index,
				homeflag: 1,
				keyword: '',
			};
			App._post_form('&p=pocket&do=infoList', data, res => {
				let list = [];
				if (!isPage) {
					if (res.data.list.length > 0) {
						list = res.data.list;
						_this.setData({
							communityList: list
						})
					} else {
						_this.noMore1 = true;
						uni.showToast({
							title: '暂无数据',
							icon: 'none'
						})
					}
				}else{//第二页走这里
					if (res.data.list.length > 0){
						list = [..._this.communityList, ...res.data.list];
						_this.setData({
							communityList: list
						})
					}else{
						_this.noMore1 = true;
					}
				}
				
			});
		},
		changenoMore1(e){
			this.noMore1 = e;
		},
		changeScrollLock(e){
			this.scrollLock = e;
		},
		showRightMenu(){
			this.showRight = true;
		},
		hideRightMenu(){
			this.showRight = false;
		},
		changeMenu(i){
			this.currentMenu = i;
			this.currentMenuId = this.menuLists[this.currentMenu].id;
			this.showRight = false;
			this.communityList = [];
			this.getList();
		},
		getMenu(){
			let data = {
				is_two: 1,
				is_set: 0
			};
			App._post_form('&p=pocket&do=classList', data, res => {
				this.menuLists = res.data.list;
			});
		}
	},
	destroyed() {
	},
	onPullDownRefresh() {
		//停止下拉刷新
		uni.stopPullDownRefresh();
	},
	onPageScroll(e){
		//页面滚动，视频暂停
		this.scrollLock = true;
	},
	onReachBottom(e) {
		// uni.$emit('isBottomMore');
		// uni.$emit('tabisBottomMore');
		// console.log(this.tabIndex, this.noMore1, this.noMore2)
		if(this.tabIndex==1){
			if(!this.noMore1){
				this.tab1Page++;
				this.getList(this.tab1Page, true);
			}else{
				uni.showToast({
					title: '没有更多了',
					icon: 'none'
				})
			}
		}
	},
	onShareAppMessage(res){
		let _this = this;
		if (res.from === 'button') {// 来自页面内分享按钮
			let listId = res.target.id;
			let title = res.target.dataset.title;
			App._post_form('&p=pocket&do=shareNum', { id: listId }, res => {
				for(let index=0;index<_this.communityList.length;index++){
					if(_this.communityList[index].id == listId){
						_this.communityList[index].share++;
					}
				}
				setTimeout(()=>{
					uni.showToast({
						icon: 'none',
						title: '分享成功',
						duration: 2000
					});
				}, 2000)
			});
			return {
				title: '粤职才',
				path: '/pagesA/pictureTextDetails/pictureTextDetails?id='+listId
			}
		}else{
			return {
				title: '话题分类',
				path: '/pagesA/communityClassification/communityClassification'
			}
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	background-color: #ffd93f;
	 -webkit-overflow-scrolling: touch;
}

.page-index {
	width: 100vw;
	overflow: hidden;
	background-color: #fff;
	position: relative;
}

.bottomPadding {
	padding-bottom: 100upx;
}

.full {
	width: 750upx;
	height: 110upx;
	background: #f8f8f8;
}

// 
.status_bar {
	height: var(--status-bar-height);
	width: 100%;
	background-color: #fff;
	position: fixed;
	padding-bottom: 15px;
	z-index: 99;
	top: 0px;
	background-image: linear-gradient(to right, #58BEE0, #84CCCA);
}
.backHome{
	width: 14rpx;
	height: 14rpx;
	border: 2px solid #fff;
	border-right-color: transparent;
	border-top-color: transparent;
	transform: scaleX(1.2) rotate(45deg);
}
.dis-flex{
	display: flex;
	align-items: center;
}

.list-con{
	padding: 0px 10px;
	.list-item{
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #efefef;
		padding: 10px 4px;
	}
	.list-title{
		display:-webkit-box;//将盒子转换为弹性盒子
		-webkit-box-orient:vertical;//文本显示方式，默认水平
		-webkit-line-clamp:2;//设置显示多少行
		overflow:hidden;
		font-size: 14px;
		color: #333;
		margin-bottom: 7px;
	}
	.list-img{
		width: 80px;
		height: 60px;
		border-radius: 8px;
		margin-left: 20px;
		background-color: #d1d1d1;
	}
}
.menu_title{
	margin-bottom: 20px;
	background-image: linear-gradient(to right, #58BEE0, #84CCCA);
	&>view{
		position: relative;
		top: 12px;
		z-index: 1;
		.tab-item{
			color: #fff;
			font-size: 14px;
			padding: 10rpx 30rpx;
		}
		.menu_img{
			width: 140rpx;height: 140rpx;border-radius: 10px;
			margin-left: 15px;
		}
		.menu_btn{
			width: 180rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 1);
			color: rgba(81, 156, 251, 1);
			font-size: 14px;
			text-align: center;
			margin: 0px 15px 0px auto;
		}
	}
}

.right_menu{
	.menu_box{
		padding-top: 90px;
		width: 50vw;height: 100vh;
		position: fixed;top: 0px;
		left: 50%;z-index: 9999;
		background-color: #fff;
	}
	.menu_close{
		margin: 0rpx 0rpx 0rpx 30rpx;
		.closeImg{
			width: 40rpx;
			height: 40rpx;
			transform: rotate(45deg);
		}
	}
	.menu_item{
		width: 300rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 5px;
		color: #444;
		background-color: rgba(227, 245, 245, 1);
		text-align: center;
		font-size: 14px;
		margin: 40rpx auto;
		
		&.active{
			color: #fff;
			background-color: rgba(103, 209, 252, 1);
		}
	}
}
/deep/ .loadMore-box{
	background-color: #fff !important;
	padding-top: 20rpx;
}

/deep/ .more-status{
	display: none !important;
}
</style>
