const BindingX = uni.requireNativePlugin('bindingx');
const animation = weex.requireModule('animation');
const modal = weex.requireModule('modal');
export default {
	data(){
		return{
			typeX:false, //是否开启左右滑动
			playCount:2,//剩余多少视频加载视频列表
			startDistance:5, //开启左右滑动时有效,判断左右上下拖动的启动距离
			minTime:300, //判断为快速滑动的时间,该时间内无视回弹
			backDistance:200, //上下滑动的回弹距离
			oldTime:0,
			oldTouces:{},
			touchType:null,
			gesToken:0,
			height:'667px',
			index:0,
			oldIndex:0,
			width:'',
			sysheight:0,
			distance:0,
			distanceX:0,
			scroll:false,
		}
	},
	created(){
		//#ifdef APP-PLUS
			plus.screen.lockOrientation("portrait-primary")
		//#endif
		this.sysheight = uni.getSystemInfoSync().windowHeight
		this.height = `${this.sysheight}px` 
		let width = uni.getSystemInfoSync().windowWidth 
		this.width = `${width}px` 
	},
	methods:{
		getEl: function(el) {
		    if (typeof el === 'string' || typeof el === 'number') return el;
			if (WXEnvironment) {
			    return el.ref;
			} else {
			    return el instanceof HTMLElement ? el : el.$el;
			}
		},
		// ListTouch触摸开始
		ListTouchStart(e) {
			
			this.oldTime = new Date()
			this.oldTouces = e.changedTouches[0]
		},
		ListTouchEnd(e) {
			console.log('end')
		},
		//判定方向
		ListTouchMove(e){
			
			//结束启动判断
			if(this.touchType == 'stop') return
			let { oldTouces,oldValue,touchType } = this
			let newTouces = e.changedTouches[0]
			
			if(!this.touchType){
				let startDistance = this.typeX?this.startDistance: 0 
				
				//滑动启动条件
				this.touchType = Math.abs( newTouces.pageY - oldTouces.pageY ) > startDistance ? 'moveY' : null
				if(this.touchType=='moveY'&&newTouces.pageY> oldTouces.pageY){
					this.touchType = 'moveYB'
				}else if(this.touchType=='moveY'&&newTouces.pageY<oldTouces.pageY){
					this.touchType = 'moveYT'
				}
				//是否开启左右滑动
				if(!this.touchType&&this.typeX){
					this.touchType = newTouces.pageX - oldTouces.pageX > startDistance ? 'moveXR' : this.touchType
					this.touchType = newTouces.pageX - oldTouces.pageX < -startDistance ? 'moveXL' : this.touchType
				}
				
			}else{
				
				
				// 如果在执行动画，就不触发
				if(this.scroll) return 
				// 解绑动画
				if(this.gesToken != 0) {
					BindingX.unbind({
						eventType:'pan',
						token:this.gesToken
					})
					this.gesToken = 0
					// return
				}
				
				let move
				if(this.touchType == 'moveYB'||this.touchType == 'moveYT'){
					move = 0
				}else if(this.touchType == 'moveXL'){
					move = -1
				}else if(this.touchType == 'moveXR'){
					move = 1
				}
				
				
				
				//关闭启动判断
				this.touchType = 'stop'
				
				let touch_origin = `y+${this.distance}<=0 && ${move}==0 && ${this.distanceX}==0 && 
					y+${this.distance}-${this.sysheight}>=${-this.sysheight*this.videoList.length}? 
					y+${this.distance} : ${this.distance}`
				// 找到元素 
				let swiperRef = this.getEl(this.$refs.swiper)
				let leftRef = this.getEl(this.$refs.left)
				let rightRef = this.getEl(this.$refs.right)
				
				let anchor
				if(this.distanceX==0){
					let touchRef = this.getEl(this.$refs.touch)
					anchor = touchRef
				}else if(this.distanceX<=0){
					anchor = rightRef
				}else{
					anchor = leftRef
				}
				
				let gesTokenObj = BindingX.bind({
					anchor:anchor,
					eventType:'pan',
					props: [
						{element:swiperRef, property:'transform.translateY',expression: touch_origin},
						{element:swiperRef, property:'transform.translateX',expression: `${move}!=0 && ${move}*x>0 ?x+${this.distanceX} : ${this.distanceX}`},
						{element:leftRef, property:'transform.translateX',expression: `${move}!=0&& ${move*this.distanceX}<=0&&x+${this.distanceX}<393?x+${this.distanceX} : ${this.distanceX}`},
						{element:rightRef, property:'transform.translateX',expression: `${move}!=0&& ${move*this.distanceX}<=0&&x+${this.distanceX}>-393?x+${this.distanceX} : ${this.distanceX}`}
					]
				}, (e) => {
					if(e.state === 'end') {
						this.touchType = null
						
						//上下
						if(move==0&& this.distanceX==0&& Math.abs(e.deltaY)>this.startDistance){
							let newTime = new Date()
							let quickMove = newTime.getTime() - this.oldTime.getTime() <= this.minTime ? true:false
							
							// 记录当前坐标
							const distance = this.distance + e.deltaY
							
							if(distance>0 || this.distance + e.deltaY-this.sysheight<-this.sysheight*this.videoList.length) return
							
							this.bindTiming(distance,e.deltaY,quickMove)
						}
					
						if(move!=0&& move*this.distanceX<=0&& e.deltaX*this.distanceX<=0&& Math.abs(e.deltaX)>this.startDistance){
							const distance = this.distanceX + e.deltaX
							
							this.bindTimingX(distance,e.deltaX)
						}
					}
				})
				// 记录下取消的token 多次 ontouchstart 时要带着 token 把上次的解绑
				this.gesToken = gesTokenObj.token
			}
			
		},
		bindTiming(distance,Y,quickMove){
			BindingX.unbindAll()
			// 开始执行动画
			this.scroll = true
			let swiperRef = this.getEl(this.$refs.swiper)
			let sysheight = this.sysheight
			
			let changed_Y, final_Y, translate_Y_origin
			
			// 生成表达式逻辑
			if( Math.abs(Y)<=this.backDistance&&!quickMove) {
				// 往上下拖动20以内时
				final_Y = this.distance	// 回到原点
				changed_Y = final_Y - distance    // 计算出需要位置的值
				translate_Y_origin = `easeOutExpo(t,${distance},${changed_Y},300)` // 运动曲线为easeOutElastic
			} else{
				// 往上下拖动超过一半时
				final_Y = this.distance + (Y>0?1:-1) *this.sysheight
				changed_Y= final_Y - distance// 计算出需要位置的值
				translate_Y_origin = `easeOutExpo(t,${distance},${changed_Y},600)` // 运动曲线为easeOutExpo
			}
			let result = BindingX.bind({
				eventType:'timing',       // 结束的时候是没有任何监听的 用 timing 来做定时的动画
				exitExpression:"t>600",  // 当时间超过 300ms 结束动画
				props: [
					{element:swiperRef, property:'transform.translateY',expression:translate_Y_origin},
					]
				},async (e) => {
					if(e.state === 'end' || e.state === 'exit') {
						this.distance = final_Y
						this.scroll = false
						if( Math.abs(Y)>this.backDistance||quickMove) {
							this.index = -this.distance/this.sysheight
							for (let item of this.videoList) {
								item.flag = false
							}
							console.log(this.index)
							this.videoList[this.index].flag = true
							//加载视频
							if(this.videoList.length - this.index - 1 <= this.playCount){
								// await this.pushVideoList()
							}
						}else if(Math.abs(Y)<=this.backDistance&&!quickMove){
							this.videoList[this.index].flag = true
						}
					}
			})
		},
		bindTimingX(distance,X){
			// 开始执行动画
			this.scroll = true
			let swiperRef = this.getEl(this.$refs.swiper)
			let leftRef = this.getEl(this.$refs.left)
			let rightRef = this.getEl(this.$refs.right)
			let width = parseInt(this.width) 
			
			let changed_X, final_X, origin
			
			// 生成表达式逻辑
			if( Math.abs(X)<=10) {
				final_X = this.distanceX	// 回到原点
				changed_X = final_X - distance    // 计算出需要位置的值
				origin = `easeOutExpo(t,${distance},${changed_X},300)` // 运动曲线为easeOutElastic
			} else{
				final_X = this.distanceX + (X>0?1:-1) *width
				changed_X= final_X - distance// 计算出需要位置的值
				origin = `easeOutExpo(t,${distance},${changed_X},300)` // 运动曲线为easeOutExpo
			}
			let result = BindingX.bind({
				eventType:'timing',       // 结束的时候是没有任何监听的 用 timing 来做定时的动画
				exitExpression:"t>300",  // 当时间超过 300ms 结束动画
				props: [
					{element:swiperRef, property:'transform.translateX',expression:origin},
					{element:swiperRef, property:'transform.translateY',expression:`easeOutExpo(t,${this.distance},0,200)`},
					{element:leftRef, property:'transform.translateX',expression:origin},
					{element:rightRef, property:'transform.translateX',expression:origin}
					]
				},async (e) => {
					if(e.state === 'end' || e.state === 'exit') {
						this.distanceX = final_X
						this.scroll = false
						if( Math.abs(X)<=10&&this.distanceX==0){
							
						}else if( Math.abs(X)>10&&this.distanceX!=0) {
							for (let item of this.videoList) {
								item.flag = false
							}
						}else if(Math.abs(X)>10&&this.distanceX==0){
							this.videoPlay(this.index)
						}
						
					}
			})
		},
		bindCurrentX(current,time=300) {
			if(this.distanceX!=0) return
			this.scroll = true
			let swiperRef = this.getEl(this.$refs.swiper)
			let changed_Y, final_Y, origin
			
			final_Y = this.distance + (this.index-current) *this.sysheight
			changed_Y= final_Y - this.distance // 计算出需要位置的值
			time = time * Math.abs(this.index-current)
			origin = `easeOutExpo(t,${this.distance},${changed_Y},${time})` // 运动曲线为easeOutExpo
		
			
			
			let result = BindingX.bind({
				eventType:'timing', // 结束的时候是没有任何监听的 用 timing 来做定时的动画
				exitExpression:`t>${time}`, // 当时间超过 300ms 结束动画
				props: [
					{element:swiperRef, property:'transform.translateY',expression:origin},
				]
				},async (e) => {
					if(e.state === 'end' || e.state === 'exit') {
						this.distance = final_Y
						this.scroll = false
						
						
						this.index = -this.distance/this.sysheight
						for (let item of this.videoList) {
							item.flag = false
						}
						this.videoList[this.index].flag = true
						
						//加载视频
						if(this.videoList.length - this.index - 1 <= this.playCount){
							// await this.pushVideoList()
						}
						
						
					}
				
			})
		},
		pauseVideo(val){
			console.log(this.oldIndex)
			 this.videoList[this.oldIndex].initialTime = val
		},
		clickVideo(){
			this.oldIndex = this.index
			this.videoList[this.index].flag = !this.videoList[this.index].flag
		},
		videoPlay(index){
			if(this.distanceX!=0) return
			let promise = new Promise((resolve,reject)=>{
				resolve()
			})
			promise.then(res=>{
				this.videoList[index].flag = !this.videoList[index].flag
			})
		},
	},
	watch:{
		index(newVal,oldVal){
			this.oldIndex = oldVal
		}
	}
}