<template>
	<view class="content">
		<!-- 顶部选项卡 -->
		<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
			<view 
				v-for="(item,index) in tabBars" :key="item.id"
				class="nav-item"
				:class="{current: index === tabCurrentIndex}"
				:id="'tab'+index"
				@click="changeTab(index)"
			>{{item.itemName}}</view>
		</scroll-view>
		
		<!-- 下拉刷新组件 -->
		<mix-pulldown-refresh ref="mixPulldownRefresh" class="panel-content" :top="90" @refresh="onPulldownReresh" @setEnableScroll="setEnableScroll">
			<!-- 内容部分 -->
			<swiper 
				id="swiper"
				class="swiper-box" 
				:duration="300" 
				:current="tabCurrentIndex" 
				@change="changeTab"
			>
				<swiper-item v-for="tabItem in tabBars" :key="tabItem.id">
					<scroll-view 
						class="panel-scroll-box" 
						:scroll-y="enableScroll" 
						@scrolltolower="loadMore"
						>
						<!-- 
							* 新闻列表 
							* 和nvue的区别只是需要把uni标签转为weex标签而已
							* class 和 style的绑定限制了一些语法，其他并没有不同
						-->
						<view v-for="(item, index) in tabItem.newsList" :key="index" class="news-item" @click.stop="navToDetails(index)">
							<text :class="['title', 'title'+item.contentLayout]">{{item.articleTitle}}</text>
							<view class="video-wrapper" v-if="item.contentLayout == 4" style="margin-top:20upx">
								<video 
									class="video"
									:src="imgUrl+item.articleContent" 
									controls
									objectFit="fill"
									:autoplay="false"
								></video>
							</view>
							<view v-if="item.articleCovers.length > 0" :class="['img-list', 'img-list'+item.contentLayout, item.articleCovers.length == 1 && item.contentLayout==2 ? 'img-list-single': '']">
								<view 
									v-for="(imgItem, imgIndex) in item.articleCovers" :key="imgIndex"
									:class="['img-wrapper', 'img-wrapper'+item.contentLayout, item.articleCovers.length == 1 && item.contentLayout==2 ? 'img-wrapper-single': '']"
								>
									<image class="img" v-if="item.contentLayout == 3" mode="aspectFit" :src="imgUrl+imgItem"></image>
									<image class="img" v-if="item.contentLayout == 2" mode="scaleToFill" :src="imgUrl+imgItem"></image>
								</view>
							</view>
							<view v-if="item.articleCovers.length == 0 && item.contentLayout != 4" class="img-empty"></view>
							<view :class="['bot', 'bot'+item.contentLayout]">
								<text :class="['author', 'author'+item.contentLayout]">{{item.hospitalName}}</text>
								<text class="time">{{item.publishTime ? item.publishTime.split(" ")[0]:''}}</text>
							</view>
						</view>
						
						<!-- 上滑加载更多组件 -->
						<mix-load-more :status="tabItem.loadMoreStatus"></mix-load-more>
					</scroll-view>
				</swiper-item>
			</swiper>
		</mix-pulldown-refresh>
		
	</view>
</template>

<script>
	import json from '@/json'
	import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';
	let windowWidth = 0, scrollTimer = false, tabBar;
	export default {
		components: {
			mixPulldownRefresh,
			mixLoadMore,
		},
		data() {
			return {
				imgUrl:"http://139.9.163.126/gastric/",
				tabCurrentIndex: 0, //当前选项卡索引
				scrollLeft: 0, //顶部选项卡左滑距离
				enableScroll: true,
				tabBars: [],
				newsList:[]
			}
		},
		computed: {
		},
		onShow() {
			
		},
		onLoad() {
			this.getArticleType()
			// 获取屏幕宽度
			windowWidth = uni.getSystemInfoSync().windowWidth;
		},
		onReady(){
			/**
			 * 启动页广告 使用文档（滑稽）
			 * 1. 引入组件并注册 
			 * 		import mixAdvert from '@/components/mix-advert/vue/mix-advert';
			 *      components: {mixAdvert},
					 <!-- #ifndef MP -->
						<mix-advert 
							ref="mixAdvert" 
							:timedown="8" 
							imageUrl="/static/advert.jpg"
							:url="advertNavUrl"
						></mix-advert>
					<!-- #endif -->
			 * 	2. 调用组件的initAdvert()方法进行初始化
			 * 
			 *  初始化的时机应该是在splash关闭时，否则会造成在app端广告显示了数秒后首屏才渲染出来
			 */
			// #ifndef MP
			// this.$refs.mixAdvert.initAdvert();
			// #endif
		},
		methods: {
			getArticleType(){
				const data = ["articleType"]
				this.$http.post(`/gastric-cancer-data/enumerate/codes`,data).then(res => {
					if(res.data.code == 1){
						let tabList = res.data.object[0].items
						tabList.forEach(item=>{
							item.newsList = [];
							item.pageNum = 0
							item.loadMoreStatus = 0;  //加载更多 0加载前，1加载中，2没有更多了
							item.refreshing = 0;
						})
						this.tabBars = tabList;
						
						if(this.tabBars.length>0){
							this.loadNewsList('add');
						}
					}
				})
			},
			
			//新闻列表
			loadNewsList(type){
				let tabItem = this.tabBars[this.tabCurrentIndex];
				
				//type add 加载更多 refresh下拉刷新
				if(type === 'add'){
					if(tabItem.loadMoreStatus === 2){
						return;
					}
					tabItem.loadMoreStatus = 1;
					tabItem.pageNum += 1
				}
				// #ifdef APP-PLUS
				else if(type === 'refresh'){
					tabItem.refreshing = true;
				}
				// #endif
				
				if(type === 'refresh'){
					tabItem.pageNum = 1
					tabItem.newsList = []; //刷新前清空数组
				}
				// let  hospitalId = this.$store.getters.userInfo.hospitalId
				const data = {"pageNum":tabItem.pageNum,"pageSize":10,'type':tabItem.itemCode,'published': 1}
				this.$http.post(`/gastric-cancer-data/article/page`,data).then(res => {
					if(res.data.code == 1){
						let list = res.data.object.list
						if(list.length>0){
							list.forEach(item=>{
								tabItem.newsList.push(item)
							})
						}else{
							tabItem.loadMoreStatus = 2
							// 已无更多数据
						}
						
						if(res.data.object.totalCount <=10){
							tabItem.loadMoreStatus = 2
						}
					}
				})
				
				//下拉刷新 关闭刷新动画
				if(type === 'refresh'){
					this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
					// #ifdef APP-PLUS
					tabItem.refreshing = false;
					// #endif
					tabItem.loadMoreStatus = 0;
				}
				//上滑加载 处理状态
				if(type === 'add'){
					tabItem.loadMoreStatus = tabItem.newsList.length > 40 ? 2: 0;
				}
			},
			//新闻详情
			navToDetails(index){
				let id = this.tabBars[this.tabCurrentIndex].newsList[index].id
				// let url = item.videoSrc ? 'videoDetails' : 'details'; 
				uni.navigateTo({
					url: `/educationViews/details/index?id=${id}`
				})
			},
			
			//下拉刷新
			onPulldownReresh(){
				this.loadNewsList('refresh');
			},
			//上滑加载
			loadMore(){
				this.loadNewsList('add');
			},
			//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
			setEnableScroll(enable){
				if(this.enableScroll !== enable){
					this.enableScroll = enable;
				}
			},

			//tab切换
			async changeTab(e){
				if(scrollTimer){
					//多次切换只执行最后一次
					clearTimeout(scrollTimer);
					scrollTimer = false;
				}
				let index = e;
				//e=number为点击切换，e=object为swiper滑动切换
				if(typeof e === 'object'){
					index = e.detail.current
				}
				if(typeof tabBar !== 'object'){
					tabBar = await this.getElSize("nav-bar")
				}
				//计算宽度相关
				let tabBarScrollLeft = tabBar.scrollLeft;
				let width = 0; 
				let nowWidth = 0;
				//获取可滑动总宽度
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if(i === index){
						nowWidth = result.width;
					}
				}
				if(typeof e === 'number'){
					//点击切换时先切换再滚动tabbar，避免同时切换视觉错位
					this.tabCurrentIndex = index; 
				}
				//延迟300ms,等待swiper动画结束再修改tabbar
				scrollTimer = setTimeout(()=>{
					if (width - nowWidth/2 > windowWidth / 2) {
						//如果当前项越过中心点，将其放在屏幕中心
						this.scrollLeft = width - nowWidth/2 - windowWidth / 2;
					}else{
						this.scrollLeft = 0;
					}
					if(typeof e === 'object'){
						this.tabCurrentIndex = index; 
					}
					this.tabCurrentIndex = index; 
					
					
					//第一次切换tab，动画结束后需要加载数据
					let tabItem = this.tabBars[this.tabCurrentIndex];
					if(this.tabCurrentIndex !== 0 && tabItem.loaded !== true){
						this.loadNewsList('add');
						tabItem.loaded = true;
					}
				}, 300)
				
			},
			//获得元素的size
			getElSize(id) { 
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},
		}
	}
</script>

<style lang='scss' scoped>
	page, .content{
		background-color: #f8f8f8;
		height: 100%;
		overflow: hidden;
	}
	
	.content{
		height: 100%;
	}

	/* 顶部tabbar */
	.nav-bar{
		position: relative;
		z-index: 10;
		height: 90upx;
		white-space: nowrap;
		box-shadow: 0 2upx 8upx rgba(0,0,0,.06);
		background-color: #fff;
		.nav-item{
			display: inline-block;
			width: 150upx;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
			font-size: 30upx;
			color: #303133;
			position: relative;
			&:after{
				content: '';
				width: 0;
				height: 0;
				border-bottom: 4upx solid #007aff;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}
		.current{
			color: #007aff;
			&:after{
				width: 50%;
			}
		}
	}

	.swiper-box{
		height: 100%;
	}

	.panel-scroll-box{
		height: 100%;
		
		.panel-item{
			background: #fff;
			padding: 30px 0;
			border-bottom: 2px solid #000;
		}
	}
	
	/**
	 * 新闻列表 直接拿的nvue样式修改，,
	 * 一共需要修改不到10行代码, 另外px需要直接修改为upx，只有单位不一样，计算都是一样的
	 * 吐槽：难道不能在编译的时候把nuve中的upx转为px? 这样就不用修改单位了
	 */
	.video-wrapper{
		width: 100%;
		height: 440upx;
		.video{
			width: 100%;
		}
	}
	
	view{
		display:flex;
		flex-direction: column;
	}
	.img{
		width: 100%;
		height: 100%;
	}
	.news-item{
		position:relative;
	}
	/* 修改结束 */
	
	/* 新闻列表  emmm 仅供参考 */
	.news-item{
		width: 750upx;
		padding: 24upx 30upx;
		padding-bottom: 0;
		background-color: #fff;
	}
	.title{
		font-size: 32upx;
		color: black;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		white-space:pre-wrap;
		word-break:break-all;
		line-height: 46upx;
	}
	.bot{
		flex-direction: row;
		border-bottom: 1upx solid rgba(0,0,0,0.25);
		padding-bottom: 24upx;
	}
	.author{
		font-size: 24upx;
		color: #aaa;
		max-width: 580upx;
		min-width: 580upx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.author2{
		max-width: 360upx;
		min-width: 360upx;
	}
	.time{
		font-size: 24upx;
		color: #aaa;
		min-width: 270upx;
	}
	.img-list{
		flex-shrink: 0;
		flex-direction: row;
		background-color: #fff;
		width: 200upx;
		height: 140upx;
	}
	.img-wrapper{
		flex: 1;
		flex-direction: row;
		height: 140upx;
		position: relative;
		overflow: hidden;
	}
	.img{
		flex: 1;
	}
	.img-empty{
		height: 20upx;
	}
	
	.img-list1{
		position:absolute;
		left: 30upx;
		top: 24upx;
	}
	/* .title1{
		padding-left: 240upx; 
	}
	.bot1{
		padding-left: 240upx; 
		margin-top: 20upx;
	} */
	/* 图在左 */
	.img-list2{
		position:absolute;
		left: 30upx;
		top: 24upx;
	}
	.title2{
		padding-left: 220upx; 
		height:92upx;
	}
	.bot2{
		padding-left: 220upx;
		margin-top: 20upx;
	}
	
	/* 图 */
	.img-list3{
		width: 700upx;
		margin: 16upx 0upx;
	}
	.img-wrapper3{
		margin-right: 12upx;
	}
	/* 底部大图 */
/* 	.img-list-single{
		width: 690upx;
		height: 300upx;
		margin: 16upx 0upx;
	}
	.img-wrapper-single{
		height: 300upx;
		margin-right: 0upx;
	}
	 */
	.video-tip{
		/* position: absolute;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.3); */
	}
	.video-tip-icon{
		width: 60upx;
		height:60upx; 
	}
</style>