<template>
	<view class="fui-top__tabs">
		<view>
			<fui-tabs :tabs="tabs" :scroll="true" alignLeft :current="tabIndex" @change="change"></fui-tabs>
		</view>
		<swiper :current="tabIndex" class="fui-swiper__box" :duration="300" @change="tabChange">
			<swiper-item class="fui-swiper__item" v-for="(tab, index) in newsList" :key="index">
				<!-- #ifdef APP-NVUE --> 
				<list class="fui-scroll__list" :enableBackToTop="true" :scroll-y="true" loadmoreoffset="15"
					@loadmore="loadMore(index)">
					<refresh class="fui-refresh" @refresh="onrefresh(index)" @pullingdown="onpullingdown"
						:display="tab.refreshing ? 'show' : 'hide'">
						<div class="fui-refresh__view">
							<image class="fui-refresh__icon" :src="refreshIcon"
								:style="{ width: tab.refreshing || pulling ? 0 : '20px' }"
								:class="{ 'fui-refresh__icon-active': tab.refreshFlag }"></image>
							<loading-indicator class="fui-loading__icon" animating="true" v-if="tab.refreshing">
							</loading-indicator>
							<text class="fui-loading__text">{{ tab.refreshText }}</text>
						</div>
					</refresh>
					<cell v-for="(item, idx) in tab.data" :key="item.id">
						<f-news-item :item="item" @click="detail(item)"></f-news-item>
					</cell>
					<cell>
						<fui-loadmore v-if="tab.isLoading"></fui-loadmore>
						<fui-divider text="已加载全部数据" v-if="!tab.isLoading && tab.pageIndex > 3"></fui-divider>
					</cell>
				</list>
				<!-- #endif -->
				<!-- #ifndef APP-NVUE -->
				<scroll-view class="fui-scroll__list" refresher-enabled :refresher-triggered="tab.refreshing"
					refresher-background="#F1F4FA" enable-back-to-top :refresher-threshold="100" scroll-y
					@scrolltolower="loadMore(index)" @refresherrefresh="onrefresh">
					<view style="min-height:101%">
						<view v-for="(item, idx) in tab.data" :key="idx">
							<f-news-item :item="item" @click="detail(item)"></f-news-item>
						</view>
						<fui-loadmore v-if="tab.isLoading"></fui-loadmore>
						<fui-divider text="已加载全部数据" v-if="!tab.isLoading && tab.pageIndex > 3"></fui-divider>
					</view>
				</scroll-view>
				<!-- #endif -->
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	import fNewsItem from './fNewsItem.nvue'
	import newsData from './index.js'
	// 缓存最多页数
	const MAX_CACHE_PAGEINDEX = 3;
	// 缓存页签数量
	const MAX_CACHE_PAGE = 3;

	export default {
		components: {
			fNewsItem
		},
		data() {
			return {
				isIos: false,
				newsList: [],
				cacheTab: [],
				tabIndex: 0,
				tabs: ['推荐', '热榜', '新时代', '科技', '懂车帝', '体育', '健康', 'NBA', '每日必看'],
				pulling: false,
				refreshIcon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRBAMAAABYoVcFAAAAKlBMVEUAAACXl5eZmZmfn5+YmJiXl5eampqZmZmYmJiYmJiZmZmYmJiZmZmZmZl02B9kAAAADXRSTlMAQKAQ0GAsUN+wz5CA21ow0AAAAM5JREFUSMftzLEJAkEQheFR4WzjGji4wC5E0A7E0OgaEIwF4RqwJEEODKcX1114yQ/uhsLtY6Lh57NZ7Dz1heXd27Kwcb+WlQv3Vy1rWcta1rKW/1Q2R8PWt8FYdhPLi79ZLt33KB/hibJzH1E+PaAqRfqAcuMBVSlyMmy1C6hKka0CoCpBAlUJEmgsQQJVCRKoSpBAU0mSaCpJEk0lSSMaS5JG9FuK/IkeQkmSaEjikSSaRpJoHEmiIvOoyCwqMo+KzKMi8+hoZTtte5vDPrSGI5zJ/Z1kAAAAAElFTkSuQmCC'
			};
		},
		onLoad() {
			setTimeout(() => {
				this.newsList = this.initData();
				uni.getSystemInfo({
					success: res => {
						this.isIos = 'ios' == res.platform.toLocaleLowerCase();
					}
				});
			}, 200);
		},
		methods: {
			initData() {
				let ary = [];
				for (let i = 0, length = this.tabs.length; i < length; i++) {
					let aryItem = {
						loadingText: '正在加载...',
						refreshing: false,
						refreshText: '',
						data: [],
						isLoading: false,
						pageIndex: 1
					};
					if (i === this.tabIndex) {
						aryItem.pageIndex = 2;
						aryItem.data = aryItem.data.concat(newsData);
					}
					ary.push(aryItem);
				}
				return ary;
			},
			getList(index, refresh) {
				let activeTab = this.newsList[index];
				let list = newsData || [];
				if (refresh) {
					activeTab.data = [];
					activeTab.loadingText = '正在加载...';
					activeTab.pageIndex = 2;
					activeTab.data = list || [];
				} else {
					activeTab.data = activeTab.data.concat(list);
					activeTab.pageIndex++;
					activeTab.isLoading = false;
					//根据实际修改判断条件
					if (activeTab.pageIndex > 3) {
						activeTab.loadingText = '没有更多了';
					}
				}
			},
			detail(e) {
				uni.showToast({
					title: '详情~',
					icon: 'none'
				});
			},
			loadMore(e) {
				let index = this.tabIndex
				let activeTab = this.newsList[index];
				if (activeTab.pageIndex < 4 && !activeTab.isLoading) {
					activeTab.isLoading = true;
					setTimeout(() => {
						this.getList(index);
					}, 300);
				}
			},
			change(e) {
				this.switchTab(e.index);
			},
			tabChange(e) {
				console.log(e)
				if (e.detail.source == 'touch' || e.detail.source == 'autoplay') {
					let index = e.target.current || e.detail.current;
					this.switchTab(index);
				}
			},
			switchTab(index) {
				if (this.tabIndex === index) return;
				if (this.newsList[index].data.length === 0) {
					this.getList(index);
				}
				// 缓存 tabId
				if (this.newsList[this.tabIndex].pageIndex > MAX_CACHE_PAGEINDEX) {
					let isExist = this.cacheTab.indexOf(this.tabIndex);
					if (isExist < 0) {
						this.cacheTab.push(this.tabIndex);
					}
				}

				this.tabIndex = index;
				let scrollIndex = index - 1 < 0 ? 0 : index - 1;

				// 释放 tabId
				if (this.cacheTab.length > MAX_CACHE_PAGE) {
					let cacheIndex = this.cacheTab[0];
					this.clearTabData(cacheIndex);
					this.cacheTab.splice(0, 1);
				}
			},
			clearTabData(e) {
				this.newsList[e].data.length = 0;
				this.newsList[e].loadingText = '加载更多...';
				this.newsList[e].refreshing = false;
				this.newsList[e].isLoading = false;
				this.newsList[e].pageIndex = 1;
			},
			onrefresh(e) {
				let index = this.tabIndex;
				var tab = this.newsList[index];
				// #ifdef APP-NVUE
				if (!tab.refreshFlag) {
					return;
				}
				// #endif

				// #ifndef APP-NVUE
				if (tab.refreshing) {
					return;
				}
				// #endif

				tab.refreshing = true;
				tab.refreshText = '正在刷新...';

				setTimeout(() => {
					this.getList(index, true);
					this.pulling = true;
					tab.refreshing = false;
					tab.refreshFlag = false;
					tab.refreshText = '刷新成功';
					// #ifndef H5
					uni.showToast({
						title: '刷新成功',
						icon: 'none'
					});
					// #endif
					setTimeout(() => {
						// TODO fix ios和Android 动画时间相反问题
						this.pulling = false;
					}, 500);
				}, 1000);
			},
			onpullingdown(e) {
				var tab = this.newsList[this.tabIndex];
				if (tab.refreshing || this.pulling) {
					return;
				}
				if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
					tab.refreshFlag = true;
					tab.refreshText = '释放立即刷新';
				} else {
					tab.refreshFlag = false;
					tab.refreshText = '下拉可以刷新';
				}
			}
		}
	};
</script>

<style>
	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
	}

	/* #endif */

	.fui-top__tabs {
		/* #ifndef APP-NVUE */
		display: flex;
		overflow: hidden;
		/* #endif */
		flex: 1;
		flex-direction: column;
		background-color: #F1F4FA;
		height: 100vh;
	}

	.fui-swiper__box {
		flex: 1;
	}

	.fui-swiper__item {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.fui-scroll__list {
		/* flex: 1; */
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		/* #ifndef MP-ALIPAY */
		flex-direction: column;
		/* #endif */
		width: 750rpx;
	}

	/* #ifdef APP-NVUE */
	.fui-refresh {
		width: 750rpx;
		height: 64px;
		justify-content: center;
	}

	.fui-refresh__view {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}

	.fui-refresh__icon {
		width: 20px;
		height: 20px;
		transition-duration: 0.25s;
		transition-property: transform;
		transform: rotate(0deg);
		transform-origin: 10px 10px;
	}

	.fui-refresh__icon-active {
		transform: rotate(180deg);
	}

	.fui-loading__icon {
		width: 20px;
		height: 20px;
		margin-right: 5px;
		color: #999999;
	}

	.fui-loading__text {
		margin-left: 2px;
		font-size: 14px;
		color: #999999;
	}

	/* #endif */
</style>
