<script>
import BaseTmp from '../_comm/BaseTmp';

export default {
    extends: BaseTmp,
    props: {
        /**
         * 弹出浮窗需要禁用的页面滚动条元素（支持选择器和元素）
         */
        scrollEl: {
        },
        /**
         * 是否禁用滚动条
         */
        isDisableScroll: {
            type: Boolean,
            default: false
        },
        /**
         * 禁用滚动条时用的class
         */
        disableCla: {
            default: 'nus_popup-overflowHide'
        }
    },
    data() {
        let _that = this;
        return {
            myScrollEl: _that.scrollEl
        };
    },

    methods: {
        /**
         * 防止事件
         */
        _stopEvent() {
            let _that = this;
            if (!_that.isDiableScroll && !_that.scrollEl) {
                return;
            }
            _that.$nextTick(() => {
                let _refs = _that.$refs || {};
                [_refs.hook_bg, _refs.hook_wrap].forEach((item) => {
                    item && item.addEventListener('touchmove', (evt) => {
                        if (item !== _refs.hook_wrap) {
                            evt.preventDefault();
                        }
                        evt.stopPropagation();
                    }, { passive: false });
                });
            });
        },
        /**
         * 初始化需要禁用的滚动条元素
         */
        _initDisable() {
            let _that = this;
            let $tPopup = _that.$tPopup;
            if (!_that.isDisableScroll && !_that.scrollEl) {
                return;
            }
            if (!_that.myScrollEl) {
                let _options = $tPopup && $tPopup.getOptions();
                let _scrollEl = _options && _options.scrollEl;
                _that.myScrollEl = _scrollEl;
            }
            _that._setElScroll = _that._initElScroll(_that.myScrollEl);
        },
        /**
         * 设置滚动条元素
         * @param {Element|string|Boolean} nowval 当前要设置的元素
         */
        _setScroll(nowval) {
            let _that = this;
            if (!_that.isDisableScroll && !_that.scrollEl) {
                return;
            }
            if (nowval) {
                if (!_that._isInitElScroll) {
                    _that._isInitElScroll = true;
                } else {
                    return;
                }
            } else {
                _that._isInitElScroll = false;
            }
            _that._setBodyScroll(nowval);
            _that._setElScroll && _that._setElScroll(nowval);
        },

        /**
         * 设置有滚动条的body
         * @param {Boolean} nowval 是否设置禁用滚动条
         */
        _setBodyScroll (nowval) {
            let _that = this;
            let body = document.body;
            let count = body._popupCount || 0;
            if (!body) {
                return;
            }
            if (nowval) {
                body._popupCount = count + 1;
                if (count < 2) {
                    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
                    if (scrollTop) {
                        body.__scrollTop = scrollTop;
                        body.style.top = -scrollTop + 'px';
                    }
                    body.classList && body.classList.add(_that.disableCla);
                }
            } else {
                count = count - 1;
                if (count > 0) {
                    body._popupCount = count;
                } else {
                    body._popupCount = 0;
                    body.style.top = 0;
                    body.classList && body.classList.remove(_that.disableCla);
                    window.scrollTo(body.__scrollLeft || 0, body.__scrollTop || 0);
                }
            }
        },

        /**
         * 初始化滚动条元素
         * @param {Element|String} els 元素、元素列表、class、id
         * @returns {Function}
         */
        _initElScroll(els) {
            let _that = this;
            if (els && typeof els === 'string') {
                els = document.querySelectorAll(els);
                els = els && Array.from(els);
            }
            if (els && els.length <= 0) {
                els = [els];
            }
            let _body = document.body;
            els = els && els.filter((item) => {
                return item !== _body;
            });
            return (nowval) => {
                if (!els || els.length <= 0) {
                    return;
                }
                for (let i = 0; i < els.length; i++) {
                    const element = els[i];
                    setEl(nowval, element);
                }
            };
            /**
             * 设置el项
             * @param {boolean} nowval 当前需要设置的状态
             * @param {Element} body 元素
             */
            function setEl(nowval, body) {
                let count = body._popupCount || 0;
                if (!body) {
                    return;
                }
                if (nowval) {
                    body._popupCount = count + 1;
                    if (count < 2) {
                        body.classList && body.classList.add(_that.disableCla);
                    }
                } else {
                    count = count - 1;
                    if (count > 0) {
                        body._popupCount = count;
                    } else {
                        body._popupCount = 0;
                        body.classList && body.classList.remove(_that.disableCla);
                    }
                }
            }
        }
    }
};
</script>

<style lang="scss">

.nus_popup-overflowHide{
    position: fixed;
    top: 0; // !important的时候影响js修改
    left: 0;
    width: 100% !important;
    overflow: hidden !important;
}
</style>
