<!-- webview only --><!-- slot -->
<template>
    <section class="scroll-view" @scroll="onScroll" @touchstart="onTouchStart" :class="{'scroll-x': scrollX, 'scroll-y': scrollY}">
        <slot></slot>
    </section>
</template>
<script>
const isiOS = /iPad|iPhone|iPod/i.test(navigator.userAgent);

export default {
    name: 'Bili_ScrollView',
    props: {
        scrollX: {
            type: Boolean,
            default: false
        },
        scrollY: {
            type: Boolean,
            default: false
        },
        upperThreshold: {
            type: Number,
            default: 50
        },
        lowerThreshold: {
            type: Number,
            default: 50
        },
        scrollTop: {
            type: Number,
            default: 0
        },
        scrollLeft: {
            type: Number,
            default: 0
        },
        scrollIntoView: {
            type: String,
            default: '',
        }
    },
    data() {
        return {
            x: 0,
            y: 0,
            lastX: 0,
            lastY: 0,
            hasDisablePullDownRefresh: false,
            hasEnablePullDownRefresh: false,
            deltaX: 0,
            deltaY: 0,
            hasEmitScrolltolower: false,
            hasEmitScrolltoupper: false
        };
    },
    mounted() {
        this.$el.scrollLeft = this.scrollLeft;
        this.$el.scrollTop = this.scrollTop;
        if (this.scrollIntoView) {
            try {
                this.$el.querySelector('#' + this.scrollIntoView).scrollIntoView();
            } catch (e) {
            }
        }
    },
    watch: {
        scrollTop(value) {
            this.$el.scrollTop = value;
        },
        scrollLeft(value) {
            this.$el.scrollLeft = value;
        },
        scrollIntoView(value) {
            if (value) {
                try {
                    this.$el.querySelector('#' + value).scrollIntoView();
                } catch (e) {
                }
            }
        }
    },
    methods: {
        onScroll(e) {
            let clientHeight = e.target.clientHeight;
            let clientWidth = e.target.clientWidth;

            let { scrollLeft, scrollTop, scrollHeight, scrollWidth } = e.target;
            const deltaX = scrollLeft - this.lastX;
            const deltaY = scrollTop - this.lastY;

            this.lastX = scrollLeft;
            this.lastY = scrollTop;
            this.deltaX = deltaX;
            this.deltaY = deltaY;

            const detail = {
                scrollLeft,
                scrollTop,
                scrollHeight,
                scrollWidth,
                deltaX,
                deltaY
            };
            this.$emit('scroll', {detail});

            if (deltaY > 0) {
                // 向下滚动
                if (scrollTop + clientHeight + this.lowerThreshold >= scrollHeight && !this.hasEmitScrolltolower) {
                    this.hasEmitScrolltolower = true;
                    this.$emit('scrolltolower');
                }
                if (!this.hasDisablePullDownRefresh && scrollTop > 0) {
                    
                    this.hasDisablePullDownRefresh = true;
                    this.hasEnablePullDownRefresh = false;
                    if (isiOS) {
                        bl.internal.enableBounce({
                            enable: 0
                        });
                    }
                    else {
                        bl.internal.disablePullDownRefresh();
                    }
                }
            }

            if (deltaY < 0) {
                // 向上滚动
                if (scrollTop <= this.upperThreshold && !this.hasEmitScrolltoupper) {
                    this.hasEmitScrolltoupper = true;
                    this.$emit('scrolltoupper');
                }
                if (scrollTop <= 20) {
                    if (!this.hasEnablePullDownRefresh) {
                        this.hasEnablePullDownRefresh = true;
                        this.hasDisablePullDownRefresh = false;
                        if (isiOS) {
                            bl.internal.enableBounce({
                                enable: 1
                            });
                        }
                        else {
                            bl.internal.enablePullDownRefresh();
                        }
                    }
                }
            }

            if (deltaX > 0) {
                // 向右滚动
                if (scrollLeft + clientWidth + this.lowerThreshold >= scrollWidth && !this.hasEmitScrolltolower) {
                    this.hasEmitScrolltolower = true;
                    this.$emit('scrolltolower');
                }
            }

            if (deltaX < 0) {
                // 向左滚动
                if (scrollLeft <= this.upperThreshold && !this.hasEmitScrolltoupper) {
                    this.hasEmitScrolltoupper = true;
                    this.$emit('scrolltoupper');
                }
            }
        },
        onTouchStart() {
            this.deltaX = 0;
            this.deltaY = 0;
            this.hasEmitScrolltolower = false;
            this.hasEmitScrolltoupper = false;
        }
    }
};
</script>
<style scoped>
.scroll-view {
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
}
.scroll-view::-webkit-scrollbar {
    display: none;
}
.scroll-x {
    overflow-x: auto;
}
.scroll-y {
    overflow-y: auto;
}
</style>
