const BindingX = uni.requireNativePlugin('bindingx');
  const dom = uni.requireNativePlugin('dom');
  const animation = uni.requireNativePlugin('animation');
  
  export default {
  	data() {
  		return {
  			right: 0,
  			button: [],
  			preventGesture: false
  		}
  	},
  
  	watch: {
  		show(newVal) {
  			if (!this.position || JSON.stringify(this.position) === '{}') return;
  			if (this.autoClose) return
  			if (this.isInAnimation) return
  			if (newVal) {
  				this.open()
  			} else {
  				this.close()
  			}
  		},
  	},
  	created() {
  		if (this.swipeaction.children !== undefined) {
  			this.swipeaction.children.push(this)
  		}
  	},
  	mounted() {
  		this.boxSelector = this.getEl(this.$refs['selector-box-hock']);
  		this.selector = this.getEl(this.$refs['selector-content-hock']);
  		this.buttonSelector = this.getEl(this.$refs['selector-button-hock']);
  		this.position = {}
  		this.x = 0
  		setTimeout(() => {
  			this.getSelectorQuery()
  		}, 200)
  	},
  	beforeDestroy() {
  		if (this.timing) {
  			BindingX.unbind({
  				token: this.timing.token,
  				eventType: 'timing'
  			})
  		}
  		if (this.eventpan) {
  			BindingX.unbind({
  				token: this.eventpan.token,
  				eventType: 'pan'
  			})
  		} 
  		this.swipeaction.children.forEach((item, index) => {
  			if (item === this) {
  				this.swipeaction.children.splice(index, 1)
  			}
  		})
  	},
  	methods: {
  		onClick(index, item) {
  			this.$emit('click', {
  				content: item,
  				index
  			})
  		},
  		touchstart(e) {
  			if (this.isInAnimation) return
  			if (this.stop) return
  			this.stop = true
  			if (this.autoClose) {
  				this.swipeaction.closeOther(this)
  			}
  			let endWidth = this.right
  			let boxStep = `(x+${this.x})`
  			let pageX = `${boxStep}> ${-endWidth} && ${boxStep} < 0?${boxStep}:(x+${this.x} < 0? ${-endWidth}:0)`
  
  			let props = [{
  				element: this.selector,
  				property: 'transform.translateX',
  				expression: pageX
  			}]
  
  			let left = 0
  			for (let i = 0; i < this.options.length; i++) {
  				let buttonSelectors = this.getEl(this.$refs['button-hock'][i]);
  				if (this.button.length === 0 || !this.button[i] || !this.button[i].width) return
  				let moveMix = endWidth - left
  				left += this.button[i].width
  				let step = `(${this.x}+x)/${endWidth}`
  				let moveX = `(${step}) * ${moveMix}`
  				let pageButtonX = `${moveX}&& (x+${this.x} > ${-endWidth})?${moveX}:${-moveMix}`
  				props.push({
  					element: buttonSelectors,
  					property: 'transform.translateX',
  					expression: pageButtonX
  				})
  			}
  
  			this.eventpan = this._bind(this.boxSelector, props, 'pan', (e) => {
  				if (e.state === 'end') {
  					this.x = e.deltaX + this.x;
  					if (this.x < -endWidth) {
  						this.x = -endWidth
  					}
  					if (this.x > 0) {
  						this.x = 0
  					}
  					this.stop = false
  					this.bindTiming();
  				}
  			})
  		},
  		touchend(e) {
  			this.$nextTick(() => {
  				if (this.isopen && !this.isDrag && !this.isInAnimation) {
  					this.close()
  				}
  			})
  		},
  		bindTiming() {
  			if (this.isopen) {
  				this.move(this.x, -this.right)
  			} else {
  				this.move(this.x, -40)
  			}
  		},
  		move(left, value) {
  			if (left >= value) {
  				this.close()
  			} else {
  				this.open()
  			}
  		},
  		/**
  		 * 开启swipe
  		 */
  		open() {
  			this.animation(true)
  		},
  		/**
  		 * 关闭swipe
  		 */
  		close() {
  			this.animation(false)
  		},
  		/**
  		 * 开启关闭动画
  		 * @param {Object} type
  		 */
  		animation(type) {
  			this.isDrag = true
  			let endWidth = this.right
  			let time = 200
  			this.isInAnimation = true;
  
  			let exit = `t>${time}`;
  			let translate_x_expression = `easeOutExpo(t,${this.x},${type?(-endWidth-this.x):(-this.x)},${time})`
  			let props = [{
  				element: this.selector,
  				property: 'transform.translateX',
  				expression: translate_x_expression
  			}]
  
  			let left = 0
  			for (let i = 0; i < this.options.length; i++) {
  				let buttonSelectors = this.getEl(this.$refs['button-hock'][i]);
  				if (this.button.length === 0 || !this.button[i] || !this.button[i].width) return
  				let moveMix = endWidth - left
  				left += this.button[i].width
  				let step = `${this.x}/${endWidth}`
  				let moveX = `(${step}) * ${moveMix}`
  				let pageButtonX = `easeOutExpo(t,${moveX},${type ? -moveMix + '-' + moveX: 0 + '-' + moveX},${time})`
  				props.push({
  					element: buttonSelectors,
  					property: 'transform.translateX',
  					expression: pageButtonX
  				})
  			}
  
  			this.timing = BindingX.bind({
  				eventType: 'timing',
  				exitExpression: exit,
  				props: props
  			}, (e) => {
  				if (e.state === 'end' || e.state === 'exit') {
  					this.x = type ? -endWidth : 0
  					this.isInAnimation = false;
  
  					this.isopen = this.isopen || false
  					if (this.isopen !== type) {
  						this.$emit('change', type)
  					}
  					this.isopen = type
  					this.isDrag = false
  				}
  			});
  		},
  		/**
  		 * 绑定  BindingX
  		 * @param {Object} anchor
  		 * @param {Object} props
  		 * @param {Object} fn
  		 */
  		_bind(anchor, props, eventType, fn) {
  			return BindingX.bind({
  				anchor,
  				eventType,
  				props
  			}, (e) => {
  				typeof(fn) === 'function' && fn(e)
  			});
  		},
  		/**
  		 * 获取ref
  		 * @param {Object} el
  		 */
  		getEl(el) {
  			return el.ref
  		},
  		/**
  		 * 获取节点信息
  		 */
  		getSelectorQuery() {
  			dom.getComponentRect(this.$refs['selector-content-hock'], (data) => {
  				if (this.position.content) return
  				this.position.content = data.size
  			})
  			for (let i = 0; i < this.options.length; i++) {
  				dom.getComponentRect(this.$refs['button-hock'][i], (data) => {
  					if (!this.button) {
  						this.button = []
  					}
  					if (this.options.length === this.button.length) return
  					this.button.push(data.size)
  					this.right += data.size.width
  					if (this.autoClose) return
  					if (this.show) {
  						this.open()
  					}
  				})
  			}
  		}
  	}
  }