<template>
    <view class="custom-class van-sticky" :style="containerStyle">
        <view :style="wrapStyle">
            <slot></slot>
        </view>
    </view>
</template>
<script>
    import Util from "../../utils/utils"
    import page_scroll_1 from "../mixins/page-scroll";
    import basic_1 from '../mixins/basic.js'
    import computed from "./computed";
    var ROOT_ELEMENT = '.van-sticky';
    export default {
        props: {
            zIndex: {
                type: Number,
                default: 99
            },
            offsetTop: {
                type: Number,
                default: 0
            },
            disabled: {
                type: Boolean,
                default: false
            },
            container: {
                type: null,
                default: null
            }
        },
        mixins: [
            page_scroll_1.pageScrollMixin(function(event) {
                this.onScroll(event);
            }),
            basic_1.basic()
        ],
        watch: {
            offsetTop: function(newData) {
                this.onScroll(window)
                this.wrapStyle = computed.wrapStyle({
                    fixed: this.fixed,
                    offsetTop: newData,
                    transform: this.transform,
                    zIndex: this.zIndex
                })
            },
            disabled: function(newData) {
                this.onScroll(window)
            },
            container: function(newData) {
                this.onScroll(window)
            },
            zIndex: function(newData) {
                this.wrapStyle = computed.wrapStyle({
                    fixed: this.fixed,
                    offsetTop: this.offsetTop,
                    transform: this.transform,
                    zIndex: newData
                })
                this.containerStyle = computed.containerStyle({
                    fixed: this.fixed,
                    height: this.height,
                    zIndex: newData
                })
            }
        },
        data() {
            return {
                classes: '',
                height: 0,
                fixed: false,
                transform: 0,
                wrapStyle: null,
                containerStyle: null,
            }
        },
        mounted: function() {
            this.onScroll(window);
            this.wrapStyle = computed.wrapStyle({
                fixed: this.fixed,
                offsetTop: this.offsetTop,
                transform: this.transform,
                zIndex: this.zIndex
            })
            this.containerStyle = computed.containerStyle({
                fixed: this.fixed,
                height: this.height,
                zIndex: this.zIndex
            })
            this.classes = Util.bem('sticky-wrap', {
                fixed: this.fixed
            })
        },
        methods: {
            onScroll: function(_a) {
                var _this = this;
                var scrollTop = (_a === void 0 ? {} : _a).scrollTop;
                var _b = this,
                    container = _b.container,
                    offsetTop = _b.offsetTop,
                    disabled = _b.disabled;
                if (disabled) {
                    this.setDataAfterDiff({
                        fixed: false,
                        transform: 0
                    });
                    return;
                }
                this.scrollTop = scrollTop || this.scrollTop;
                if (typeof container === 'function') {
                    Promise.all([this.getRect(ROOT_ELEMENT), this.getContainerRect()]).then(function(_a) {
                        var root = _a[0],
                            container = _a[1];
                        if (offsetTop + root.height > container.height + container.top) {
                            _this.setDataAfterDiff({
                                fixed: false,
                                transform: container.height - root.height
                            });
                        } else if (offsetTop >= root.top) {
                            _this.setDataAfterDiff({
                                fixed: true,
                                height: root.height,
                                transform: 0
                            });
                        } else {
                            _this.setDataAfterDiff({
                                fixed: false,
                                transform: 0
                            });
                        }
                    });
                    return;
                }
                this.getRect(ROOT_ELEMENT).then(function(root) {
                    if (offsetTop >= root.top) {
                        _this.setDataAfterDiff({
                            fixed: true,
                            height: root.height
                        });
                        _this.transform = 0;
                    } else {
                        _this.setDataAfterDiff({
                            fixed: false
                        });
                    }
                });
            },
            setDataAfterDiff: function(data) {
                var _this = this;
                this.$nextTick(function() {
                    var diff = Object.keys(data).reduce(function(prev, key) {
                        if (data[key] !== _this[key]) {
                            prev[key] = data[key];
                        }
                        return prev;
                    }, {});
                    _this.setData(diff);
                    _this.$emit('scroll', {
                        scrollTop: _this.scrollTop,
                        isFixed: data.fixed || _this.fixed
                    });
                });
            },
            getContainerRect: function() {
                var nodesRef = this.container();
                return new Promise(function(resolve) {
                    return nodesRef.boundingClientRect(resolve).exec();
                });
            }
        }
    }
</script>
<style>
    @import '../common/index.css';

    .van-sticky {
        position: relative
    }

    .van-sticky-wrap--fixed {
        position: fixed;
        right: 0;
        left: 0
    }
</style>