<!-- webview only --><!-- slot -->
<template>
    <section class="scroll-view" @scroll="onScroll" :class="{'scroll-x': scrollX, 'scroll-y': scrollY}">
        <slot></slot>
    </section>
</template>
<script>
export default {
    name: '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,
        };
    },
    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;

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

            if (deltaY > 0) {
                // 向下滚动
                if (scrollTop + clientHeight + this.lowerThreshold >= scrollHeight) {
                    this.$emit('scrolltolower');
                }
            }

            if (deltaY < 0) {
                // 向上滚动
                if (scrollTop <= this.upperThreshold) {
                    this.$emit('scrolltoupper');
                }
            }

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

            if (deltaX < 0) {
                // 向左滚动
                if (scrollLeft <= this.upperThreshold) {
                    this.$emit('scrolltoupper');
                }
            }
        }
    }
};
</script>
<style scoped>
.scroll-view {
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
}
.scroll-x {
    overflow-x: auto;
}
.scroll-y {
    overflow-y: auto;
}
</style>
