<template>
	<view class="container999" >
		<refresh ref="refresh" @isRefresh="isRefresh"></refresh>
		<swiper
			style="width: 100vw;height: 100vh;will-change: transform;"
			vertical
			@touchend="refreshEnd"
			@touchstart="refreshStart"
			:duration="swiperDur"
			:circular="circular"
			@change="swiperChange"
			@animationfinish="anFinish"
			:current="currentIndex"
		>
			<swiper-item @touchmove="refreshMove" v-if="swiperList.length > 0" :item-id="item.id" style="will-change: transform;" v-for="(item, index) in swiperLength" :key="index">
				<!-- {{swiperList[index].id == -1 ? '占位骨架屏':swiperList[index].id}} -->
				<zwyVideo v-if="swiperList[index].id != -1 && swiperList[index].id != -2 && swiperList[index] && (fastIndex <= 1 && fastIndex >= -1)" :videoInfo="swiperList[index]" :nowId="swiperList[currentIndex].id"></zwyVideo>
				<view v-if="swiperList[index].id != -3 && (fastIndex > 1 || fastIndex < -1)">快速滑动骨架屏</view>
			</swiper-item>
			<swiper-item v-if="swiperList.length == 0">刷新骨架屏</swiper-item>
		</swiper>
	</view>
</template>

<script>
import refresh from '../../components/refresh.vue';
const util = require('../../utils/util.js');
import zwyVideo from '../../components/zwyVideo.vue';
import {
	videoList
} from '@/api/sms';
export default {
	components: { zwyVideo,refresh },
	data() {
		return {
			fastIndex:0, //快速滑动保存变量
			startY: 0,//触摸
			circular: false,  //列表循环
			swiperDur: 300, //切换时间
			swiperList: [], //展示的列表
			currentIndex: 0, //当前swiper下标
			lastIndex: 0, //上个swiper下标
			list: [], //全部数组
			listIndex: 0, //当前项数组位置
			swiperLength: 3, //设置swiper长度
			pageNum: 0, //设置当前页数
			enterPageNum: 0, //设置进入页面时候的页数(需同步设置pageNum)
			enterIndex: 0, //设置进入页面时候的位置
			onePage: 10 //设置一页数量
		};
	},
	onLoad() {
		// 设置跳转进入参数
		this.enterPageNum = 0; //跳转进入时候的页数
		this.enterIndex = 0; //设置跳转进入index位置
		this.pageNum = this.enterPageNum; //设置当前页数为第三页

		if (this.enterPageNum == 0 && this.enterIndex == 0) {
			this.getList('refresh');
		} else {
			let tempNum = this.enterPageNum * this.onePage;
			let tempList = [];
			for (let i = 0; i < tempNum; i++) {
				tempList.push({
					id: i
				});
			}
			this.list = tempList; //初始化填充列表

			this.getList('listInit');
		}
	},
	methods: {
		// 刷新touch监听
		refreshStart(e) {
			if (this.listIndex == 0 && !this.circular) this.$refs.refresh.refreshStart(e);
		},
		refreshMove(e){
			if (this.listIndex == 0 && !this.circular) this.$refs.refresh.refreshMove(e);
		},
		refreshEnd(e) {
			if (this.listIndex == 0 && !this.circular) this.$refs.refresh.refreshEnd(e);
		},
		isRefresh(){
			this.getList('refresh');
		},
		swiperChange(e) {
			console.log('swiperChange',e)
			if (e.target.source == 'touch') {
				let nowIndex = e.detail.current;
				if (nowIndex > this.currentIndex) {
					if (nowIndex == this.swiperLength - 1 && this.currentIndex == 0) {
						this.fastIndex--;
					} else {
						this.fastIndex++;
					}
				} else if (nowIndex < this.currentIndex) {
					if (nowIndex == 0 && this.currentIndex == this.swiperLength - 1) {
						this.fastIndex++;
					} else {
						this.fastIndex--;
					}
				}
				this.currentIndex = nowIndex;
				if ((this.swiperList[nowIndex].id == -1 || this.swiperList[nowIndex].id == -2) && (this.fastIndex <= 1 && this.fastIndex >= - 1)) {
					setTimeout(() => {
						this.currentIndex = this.lastIndex;
						console.log(this.swiperList[nowIndex].id, '-1到顶了,-2到底了');
					}, 20);
					return;
				}
			}
		},
		anFinish(e) {
			if(this.fastIndex > 1 || this.fastIndex < -1){
				this.fastChange();
				return;
			}
			if (this.listIndex == 0) this.circular = false;
			else this.circular = true;
			let nowIndex = e.detail.current;
			console.log('anFinish',e)
			console.log('nowIndex',nowIndex)

			if (nowIndex > this.lastIndex) {
				if (nowIndex == this.swiperLength - 1 && this.lastIndex == 0) {
					this.topSub(nowIndex);
				} else {
					this.bottomAdd(nowIndex);
				}
			} else if (nowIndex < this.lastIndex) {
				if (nowIndex == 0 && this.lastIndex == this.swiperLength - 1) {
					this.bottomAdd(nowIndex);
				} else {
					this.topSub(nowIndex);
				}
			}
			this.lastIndex = nowIndex;
			console.log('fastIndex',this.fastIndex);
			this.currentIndex = nowIndex; //index矫正
			this.fastIndex = 0;
		},
		fastChange(){
			console.log('fastChange',this.fastIndex)
			this.listIndex = this.fastIndex + this.listIndex;
			console.log('fastChange',this.listIndex)
			this.swiperList = [];
			if (this.listIndex + this.swiperLength > this.list.length){
				console.log('快速下滑加载')
				this.getList('fastBottom');
			}else if((this.listIndex < this.enterPageNum * this.onePage) && this.enterPageNum > 0){
				console.log('快速上滑加载且当前索引小于 跳转进入的页码 * 一页视频数')
				this.getList('fastTop');
			}else{
				console.log('未超出边界')
				this.resetSwiperList();
			}
			this.fastIndex = 0;
		},
		resetSwiperList(){
			this.swiperDur = 0;
			if(this.listIndex < 0) this.listIndex = 0;
			let tempList = this.list.slice(this.listIndex, this.swiperLength + this.listIndex - 1);
			if(this.listIndex == 0){
				tempList.push({ id: -1 });
			}else{
				tempList.push(this.list[this.listIndex - 1]);
			}
			this.swiperList = tempList;
			setTimeout(()=>{
				this.currentIndex = 0;
				this.lastIndex = 0;
			},100)
			setTimeout(()=>{
				this.swiperDur = 300;
			},300)
		},
		listInit(res) {
			let tempList = res.slice(this.enterIndex, this.swiperLength + this.enterIndex - 1);
			if (this.enterIndex - 1 >= 0 && res[this.enterIndex - 1]) tempList.push(res[this.enterIndex - 1]);
			console.log('tempList', tempList);
			this.listIndex = this.enterIndex + this.enterPageNum * this.onePage;
			this.swiperList = tempList;
			if (this.enterIndex + this.swiperLength > this.onePage) this.getListNoThrottle('bottom');
			if (this.enterIndex - this.swiperLength < 0) this.getListNoThrottle('top');
		},
	async	getListNoThrottle(temp){
			//temp取值 refresh--刷新 top--上加载 bottom--下加载 listInit--页面跳转进入初始化
			if (temp == 'refresh') {
				this.pageNum = 0;
				this.list = [];
				this.listIndex = 0;
				this.currentIndex = 0;
				this.lastIndex = 0;
				this.swiperDur = 0;
				this.swiperList = [];
			}
			let tempPageNum = this.pageNum;
			if (temp == 'top' || temp=='fastTop') tempPageNum = this.enterPageNum - 1;
			if (tempPageNum < 0) return;
			if (this.listIndex == 0) this.circular = false;

await this.$http.get(`${videoList}`,{pageNum: tempPageNum}).then(r => {
              let res=r.rows;

				if (temp == 'top' || temp == 'fastTop') this.enterPageNum--;
				else this.pageNum++;
				if (tempPageNum == 0 && temp == 'refresh') {
					let tempList = res.slice(0, this.swiperLength - 1);
                    tempList.push({
						id: -1
					});
					this.swiperList = tempList;
					this.$refs.refresh.endAfter() //刷新结束调用
				}


				if (temp == 'top' || temp=='fastTop' ) {
					// 上拉加载 替换数组
					this.list.splice(this.enterPageNum * this.onePage, this.onePage, ...res);
				} else {
					// 普通加载
					this.list = this.list.concat(res);
				}


				if(temp == 'fastBottom'){
					if (this.listIndex + this.swiperLength > this.list.length){
						console.log('快速下滑加载')
						this.getListNoThrottle('fastBottom');
					}else{
						console.log('未超出边界')
						this.resetSwiperList();
					}
					return;
				}
				if(temp == 'fastTop'){
					if ((this.listIndex < this.enterPageNum * this.onePage) && this.enterPageNum > 0){
						console.log('快速下滑加载')
						this.getListNoThrottle('fastTop');
					}else{
						console.log('未超出边界')
						this.resetSwiperList();
					}
					return;
				}

				// 首次进入 temp=listInit 且长度不足重新获取列表时异常--补充swiperList
				if (this.swiperList.length < this.swiperLength) {
					if (temp == 'bottom') {
						this.swiperList.splice(this.swiperList.length - 1, 0, ...res.slice(0, this.swiperLength - this.swiperList.length));
					}
					if (temp == 'top') this.swiperList.push(res[this.onePage - 1]);
				}
				if (temp == 'listInit') this.listInit(res);
				this.swiperDur = 300;
	});
		},
		getList: util.throttle(function(temp) {
			this.getListNoThrottle(temp);
		}, 600),


		 getRes(pageNum) {

			return new Promise((resolve, reject) => {
				let videoUrlObj = {
					0: 'http://video-haodanku-com.cdn.fudaiapp.com/10e7eae47e4838892a2a1d727b69a109.mp4?attname=16036798785476.mp4',
					1: 'http://183.240.22.110/upic/2019/04/14/14/BMjAxOTA0MTQxNDI5MzBfMTI2MTE0NzEzNF8xMjE5ODAxOTU4N18yXzM=_b_B77567b6ac999fd8a7df8b614611caf60.mp4',
					2: 'http://183.240.22.86/upic/2020/05/26/11/BMjAyMDA1MjYxMTI0MDlfNTQzMzU2MTQ2XzI5MjkyODc0MTI0XzFfMw==_b_B3c45621e8bb098f7a30267a7efa185b7.mp4',
					3: 'http://video-haodanku-com.cdn.fudaiapp.com/e16c1aab9999a8c2d2e8d95c9e6d77f0.mp4?attname=16036798787274.mp4',
					4: 'http://video-haodanku-com.cdn.fudaiapp.com/02f7dfa9e2bd1f8271c5f6b6a0f63896.mp4?attname=16036798782979.mp4',
					5: 'http://video-haodanku-com.cdn.fudaiapp.com/9fbb0c961ddfed01a8ac47035dabc089.mp4?attname=16036798789137.mp4'
				};
				let tempList = [];
				let maxI = pageNum < 60 ? 10 : 0;
				for (let i = 0; i < maxI; i++) {
					let tempHeight = Math.ceil(Math.random() * 300);
					if (tempHeight < 150) tempHeight = 150;
					let videoUrl = videoUrlObj[Math.floor(Math.random() * 6)];
					tempList.push({
						posterImg: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/poster.png',
						videoUrl: videoUrl,
						height: tempHeight,
						imgUrl: '../../static/logo.png',
						id: pageNum * this.onePage + i
					});
				}


				setTimeout(() => {
					resolve(tempList);
				}, 600);
			});
		},
		topSub(swiperIndex) {
			console.log('上滑--');
			this.listIndex = this.listIndex - 1 < 0 ? 0 : this.listIndex - 1;
			let tempIndex = swiperIndex - 1 < 0 ? swiperIndex - 1 + this.swiperLength : swiperIndex - 1;
			this.swiperList[tempIndex] = this.list[this.listIndex - 1] ? this.list[this.listIndex - 1] : { id: -1 };
			if (this.listIndex <= (this.enterPageNum + 1) * this.onePage) this.getList('top');
		},
		bottomAdd(swiperIndex) {
			console.log('下滑++');
			this.listIndex = this.listIndex + 1 > this.list.length - 1 ? this.list.length - 1 : this.listIndex + 1;

			let tempIndex = swiperIndex + 1 > this.swiperLength - 1 ? swiperIndex + 1 - this.swiperLength : swiperIndex + 1;
			this.swiperList[tempIndex] = this.list[this.listIndex + 1] ? this.list[this.listIndex + 1] : { id: -2 };
			if (this.list.length - this.onePage <= this.listIndex) this.getList('bottom');
		}
	}
};
</script>

<style></style>
