<script>
import DomTmp from './DomTmp';
import { eventType, MOUSE_EVENT, STATE_TYPE, EVENT_TYPE } from './constants';
import getKeycode from './utils/getKeycode';
import { initEventListener } from 'nimble-lib';
export default {
    extends: DomTmp,
    props: {
        /**
         * 列表数据
         */
        list: {
            type: Array
        },
        /**
         * 有更多数据的显示文案
         */
        moreText: {
            type: String,
            default: 'load more'
        },
        /**
         * 没有更多数据的显示文案
         */
        noMoreText: {
            type: String,
            default: 'No more data'
        },
        /**
         * 是否支持上拉加载
         */
        pullUpLoad: {
            type: Boolean | Object,
            default () {
                return {
                    threshold: 90
                };
            }
        },
        /**
         * 上拉加载状态
         */
        state: {
            type: String,
            default: STATE_TYPE.READY
        },
        /**
         * 偏移组数
         */
        offset: {
            type: Number,
            default: 6
        },
        /**
         * 过滤文案
         */
        filterItem: {
            type: Function
        }
    },
    data () {
        const _that = this;
        return {
            myState: _that.state || STATE_TYPE.READY, // 上拉加载状态
            myList: []
            // y: 0, // 列表的位置
            // duration: 0 // 回弹动画
        };
    },
    // computed: {
    //     /**
    //      * 包裹元素的样式
    //      * @returns {String} 返回包裹元素的样式
    //      */
    //     wrapStyle () {
    //         const _that = this;
    //         return [{
    //             [styleName.transform]: `translateY(${_that.y}px`,
    //             [styleName.transitionTimingFunction]: `ease`,
    //             [styleName.transitionDuration]: `${_that.duration}ms`
    //         }];
    //     }
    // },
    watch: {
        /**
         * 监听state的值的变化
         * @param {String} nowVal state变化后的值
         */
        state (nowVal) {
            const _that = this;
            _that.myState = nowVal;
            // _that._resetPosition();
        },
        /**
         * 监听myState的值的变化
         * @param {String} nowVal myState变化后的值
         */
        myState (nowVal) {
            const _that = this;
            _that.$emit(EVENT_TYPE.UPDATE_STATE, nowVal);
        }
    },
    methods: {
        /**
         * 判断是否需要注册鼠标的start/move／end事件
         * @returns {Boolean}
         */
        isNotEventHandler () {
            const _that = this;
            let res = false;
            const _offsetHeight = (_that.wrapDom.offsetHeight || '') + '';
            const _scrollHeight = (_that.scrollOffsetH || '') + '';
            if (!_offsetHeight || _offsetHeight === '0' ||
                !_scrollHeight || _scrollHeight === '0') {
                res = true;
            } else if (_that.wrapDom &&
                _offsetHeight && _offsetHeight !== '0' &&
                _scrollHeight && _scrollHeight !== '0') {
                res = _that.wrapDom.offsetHeight > _that.scrollOffsetH;
            }
            return res;
        },
        /**
         * 是否可以开启上拉加载
         * @returns {Boolean} 是否可以上拉加载
         */
        _isPullUpLoad () {
            const _that = this;
            let _res = true;
            if (_that.myState == STATE_TYPE.LOADING ||
                _that.myState == STATE_TYPE.NO_MORE ||
                !_that.pullUpLoad) {
                _res = false;
            }
            return _res;
        },
        /**
         * 注册监听事件
         * @param {Boolean} flag 注册、解除事件监听
         */
        _initEventListener (flag) {
            const _that = this;
            flag = flag ? 'add' : 'remove';
            initEventListener(_that.wrapDom, ['mousedown', 'touchstart'], _that._onStart, flag);
            initEventListener(_that.wrapDom, ['mousemove', 'touchmove'], _that._onMove, flag);
            initEventListener(_that.wrapDom, ['mouseup', 'touchend'], _that._onEnd, flag);
        },
        /**
         * 重置位置
         * @param {Number} duration 动画时间
         */
        // _resetPosition (duration) {
        //     const _that = this;
        //     if (_that.myState != STATE_TYPE.LOADING) { // 当当前状态不是loading状态时进行重置位置
        //         _that.y = 0;
        //         _that.duration = duration || 0;
        //     }
        // },
        /**
         * 准备开始滑动
         * @param {Event} evt 事件对象
         */
        _onStart (evt) {
            const _that = this;
            const _evtType = eventType[evt.type];
            if (_evtType === MOUSE_EVENT) {
                const _button = getKeycode(evt);
                if (_button !== '0') {
                    return;
                }
            }
            if (_that.initiated && _that.initiated !== _evtType) {
                return;
            }
            _that.initiated = _evtType;
            // _that.duration = 0;
            _that.y = 0;
            // evt.stopPropagation();
            let _point = evt.touches ? evt.touches[0] : evt;
            _that.pointY = _point.pageY;
        },
        /**
         * 滑动
         * @param {Event} evt 事件对象
         */
        _onMove (evt) {
            const _that = this;
            const _evtType = eventType[evt.type];
            if (_that.initiated !== _evtType) {
                return;
            }
            // evt.stopPropagation();
            let _point = evt.touches ? evt.touches[0] : evt;
            let _deltaY = _point.pageY - _that.pointY;
            _that.pointY = _point.pageY;
            const _newY = _that.y + _deltaY;
            const _absY = Math.abs(_newY);
            if (_newY <= 0) {
                if (_absY > 20 && _that._isPullUpLoad()) {
                    _that.initiated = false;
                    _that.myState = STATE_TYPE.LOADING;
                } else {
                    _that.y = _newY;
                }
            }
        },
        /**
         * 滑动结束
         * @param {Event} evt 事件对象
         */
        _onEnd (evt) {
            const _that = this;
            const _evtType = eventType[evt.type];
            if (_that.initiated !== _evtType) {
                return;
            }
            // evt.stopPropagation();
            _that.initiated = false;
            // _that._resetPosition(500);
        },
        /**
         * 点击事件回调
         * @param {Event} evt 事件对象
         * @param {Object} item 数据项
         */
        _click (evt, item) {
            evt = {
                Event: evt,
                data: item
            };
            this._onClick(evt);
            this._onClickItem(evt);
        },
        /**
         * 点击事件回调
         * @param {Event} evt 事件对象
         * @param {Object} item 数据项
         */
        _tap (evt, item) {
            evt = {
                Event: evt,
                data: item
            };
            this._onTap(evt);
            this._onClickItem(evt);
        }
    }
};
</script>
