let bindIngXMixins = {}

// #ifdef APP-NVUE
const BindingX = uni.requireNativePlugin('bindingx');
const dom = uni.requireNativePlugin('dom');
const animation = uni.requireNativePlugin('animation');

bindIngXMixins = {
    data() {
        return {}
    },

    watch: {
        show(newVal) {
            if (this.autoClose) return
            if (this.stop) return
            this.stop = true
            if (newVal) {
                this.open(newVal)
            } else {
                this.close()
            }
        },
        leftOptions() {
            this.getSelectorQuery()
            this.init()
        },
        rightOptions(newVal) {
            this.init()
        }
    },
    created() {
        this.swipeaction = this.getSwipeAction()
        if (this.swipeaction.children !== undefined) {
            this.swipeaction.children.push(this)
        }
    },
    mounted() {
        this.box = this.getEl(this.$refs['selector-box--hock'])
        this.selector = this.getEl(this.$refs['selector-content--hock']);
        this.leftButton = this.getEl(this.$refs['selector-left-button--hock']);
        this.rightButton = this.getEl(this.$refs['selector-right-button--hock']);
        this.init()
    },
    // beforeDestroy() {
    // 	this.swipeaction.children.forEach((item, index) => {
    // 		if (item === this) {
    // 			this.swipeaction.children.splice(index, 1)
    // 		}
    // 	})
    // },
    methods: {
        init() {
            this.$nextTick(() => {
                this.x = 0
                this.button = {
                    show: false
                }
                setTimeout(() => {
                    this.getSelectorQuery()
                }, 200)
            })
        },
        onClick(index, item, position) {
            this.$emit('click', {
                content: item,
                index,
                position
            })
        },
        touchstart(e) {
            // fix by mehaotian 禁止滑动
            if (this.disabled) return
            // 每次只触发一次，避免多次监听造成闪烁
            if (this.stop) return
            this.stop = true
            if (this.autoClose) {
                this.swipeaction.closeOther(this)
            }

            const leftWidth = this.button.left.width
            const rightWidth = this.button.right.width
            let expression = this.range(this.x, -rightWidth, leftWidth)
            let leftExpression = this.range(this.x - leftWidth, -leftWidth, 0)
            let rightExpression = this.range(this.x + rightWidth, 0, rightWidth)

            this.eventpan = BindingX.bind({
                anchor: this.box,
                eventType: 'pan',
                props: [{
                    element: this.selector,
                    property: 'transform.translateX',
                    expression
                }, {
                    element: this.leftButton,
                    property: 'transform.translateX',
                    expression: leftExpression
                }, {
                    element: this.rightButton,
                    property: 'transform.translateX',
                    expression: rightExpression
                },]
            }, (e) => {
                // nope
                if (e.state === 'end') {
                    this.x = e.deltaX + this.x;
                    this.isclick = true
                    this.bindTiming(e.deltaX)
                }
            });
        },
        touchend(e) {
            if (this.isopen !== 'none' && !this.isclick) {
                this.open('none')
            }
        },
        bindTiming(x) {
            const left = this.x
            const leftWidth = this.button.left.width
            const rightWidth = this.button.right.width
            const threshold = this.threshold
            if (!this.isopen || this.isopen === 'none') {
                if (left > threshold) {
                    this.open('left')
                } else if (left < -threshold) {
                    this.open('right')
                } else {
                    this.open('none')
                }
            } else {
                if ((x > -leftWidth && x < 0) || x > rightWidth) {
                    if ((x > -threshold && x < 0) || (x - rightWidth > threshold)) {
                        this.open('left')
                    } else {
                        this.open('none')
                    }
                } else {
                    if ((x < threshold && x > 0) || (x + leftWidth < -threshold)) {
                        this.open('right')
                    } else {
                        this.open('none')
                    }
                }
            }
        },

        /**
         * 移动范围
         * @param {Object} num
         * @param {Object} mix
         * @param {Object} max
         */
        range(num, mix, max) {
            return `min(max(x+${num}, ${mix}), ${max})`
        },

        /**
         * 开启swipe
         */
        open(type) {
            this.animation(type)
        },

        /**
         * 关闭swipe
         */
        close() {
            this.animation('none')
        },

        /**
         * 开启关闭动画
         * @param {Object} type
         */
        animation(type) {
            const time = 300
            const leftWidth = this.button.left.width
            const rightWidth = this.button.right.width
            if (this.eventpan && this.eventpan.token) {
                BindingX.unbind({
                    token: this.eventpan.token,
                    eventType: 'pan'
                })
            }

            switch (type) {
                case 'left':
                    Promise.all([
                        this.move(this.selector, leftWidth),
                        this.move(this.leftButton, 0),
                        this.move(this.rightButton, rightWidth * 2)
                    ]).then(() => {
                        this.setEmit(leftWidth, type)
                    })
                    break
                case 'right':
                    Promise.all([
                        this.move(this.selector, -rightWidth),
                        this.move(this.leftButton, -leftWidth * 2),
                        this.move(this.rightButton, 0)
                    ]).then(() => {
                        this.setEmit(-rightWidth, type)
                    })
                    break
                default:
                    Promise.all([
                        this.move(this.selector, 0),
                        this.move(this.leftButton, -leftWidth),
                        this.move(this.rightButton, rightWidth)
                    ]).then(() => {
                        this.setEmit(0, type)
                    })

            }
        },
        setEmit(x, type) {
            const leftWidth = this.button.left.width
            const rightWidth = this.button.right.width
            this.isopen = this.isopen || 'none'
            this.stop = false
            this.isclick = false
            // 只有状态不一致才会返回结果
            if (this.isopen !== type && this.x !== x) {
                if (type === 'left' && leftWidth > 0) {
                    this.$emit('change', 'left')
                }
                if (type === 'right' && rightWidth > 0) {
                    this.$emit('change', 'right')
                }
                if (type === 'none') {
                    this.$emit('change', 'none')
                }
            }
            this.x = x
            this.isopen = type
        },
        move(ref, value) {
            return new Promise((resolve, reject) => {
                animation.transition(ref, {
                    styles: {
                        transform: `translateX(${value})`,
                    },
                    duration: 150, //ms
                    timingFunction: 'linear',
                    needLayout: false,
                    delay: 0 //ms
                }, function (res) {
                    resolve(res)
                })
            })

        },

        /**
         * 获取ref
         * @param {Object} el
         */
        getEl(el) {
            return el.ref
        },
        /**
         * 获取节点信息
         */
        getSelectorQuery() {
            Promise.all([
                this.getDom('left'),
                this.getDom('right'),
            ]).then((data) => {
                let show = 'none'
                if (this.autoClose) {
                    show = 'none'
                } else {
                    show = this.show
                }

                if (show === 'none') {
                    // this.close()
                } else {
                    this.open(show)
                }

            })

        },
        getDom(str) {
            return new Promise((resolve, reject) => {
                dom.getComponentRect(this.$refs[`selector-${str}-button--hock`], (data) => {
                    if (data) {
                        this.button[str] = data.size
                        resolve(data)
                    } else {
                        reject()
                    }
                })
            })
        }
    }
}

// #endif

export default bindIngXMixins