<script>
/* eslint-disable */
import { callFn } from 'nimble-lib';
import { STATUS_TYPE, EVENT_TYPE } from './constants';
import setStyle from './_comm/setStyle.js';
import BaseTmp from '../_comm/BaseTmp';
export default {
    extends: BaseTmp,
    props: {
        /**
         * 是否需要遮罩
         */
        mask: {
            type: Boolean,
            default: false
        },
        /**
         * 模式(0: 普通模式，1:层叠模式)
         */
        type: {},
        /**
         * button列表数据
         */
        list: {
            type: Array
        },
        /**
         * 收缩比率
         */
        rate: {
            type: Number,
            default: 0.3
        },
        /**
         * 滚动超过边缘的时候会有一小段回弹动画
         */
        bounce: {
            type: Boolean,
            default: true
        },
        /**
         * 设置回弹动画的动画时长
         */
        bounceTime: {
            type: Number,
            default: 300
        },
        /**
         * 滑动动画时长(单位ms)
         */
        duration: {
            type: Number,
            default: 500
        },
        /**
         * 右边模块是否更新了
         */
        isUpdate: {
            type: Boolean,
            default: false
        },
        /**
         * 右边模块最大的宽度
         */
        maxWidth: {
            type: Number | String,
            default: '100%'
        },
        /**
         * 右边模块最小的宽度
         */
        minWidth: {
            type: Number | String
        },
        /**
         * 是否打开右边的内容 (－2: 非动画关闭，-1:以动画形式关闭, -3: 以动画形式打开，-4: 非动画形式打开)
         */
        state: {},
        /**
         * swipero的唯一标识
         */
        index: {},
        /**
         * 是否固定左边／右边内容 0: 代表不阻止滑动 -1: 阻止左边滑动 1: 阻止右边滑动
         */
        fixed: {
            type: Number,
            default: 0
        },
        /**
         * 过滤按钮文案的方法
         */
        filterText: {
            type: Function
        }
    },
    data () {
        return {
            myUpdate: this.isUpdate,
            myState: this.state
        };
    },
    computed: {
        /**
         * 获取最小可以展示宽度
         * @returns {Number} 返回最小可以展示宽度
         */
        myMinWidth () {
            return this._filterUpLowW(this.minWidth, this.maxWidth).minWidth;
        },
        /**
         * 获取最大可以展示宽度
         * @returns {Number} 返回最大可以展示宽度
         */
        myMaxWidth () {
            return this._filterUpLowW(this.minWidth, this.maxWidth).maxWidth;
        }
    },
    watch: {
        /**
         * 监听myUpdate这个字段
         * @param {Boolean} nowVal 新的值
         */
        myUpdate (nowVal) {
            this.$emit(EVENT_TYPE.UPDATE_EVENT, nowVal);
        },
        /**
         * 监听是否打开右边的内容
         * @param {Boolean} nowVal 新的值
         */
        myState (nowVal) {
            const _that = this;
            _that.$emit(EVENT_TYPE.UPDATE_STATE, nowVal);
            if (_that.initiated) { // 如果在滑动过程中应该不让右边滑动
                return;
            }
            nowVal = nowVal + '';
            if (typeof _that.index !== 'undefined' &&
                nowVal !== '-1' && nowVal !== '-2' &&
                nowVal !== '-3' && nowVal !== '-4') {
                if (_that.index == nowVal) {
                    _that._showR(_that.duration);
                } else if (_that.myState !== null) {
                    _that._hideR(_that.duration);
                }
            } else if ((nowVal === '-3' || nowVal === '-4') &&
                _that.status !== STATUS_TYPE.VISIBLE) {
                _that._showR(nowVal === '-3' ? _that.duration : 0);
            } else if (_that.status !== STATUS_TYPE.HIDDEN &&
                (nowVal === '-1' || nowVal === '-2')) {
                _that._hideR(nowVal === '-1' ? _that.duration : 0);
            }
        },
        /**
         * 监听是否打开右边的内容
         * @param {Boolean} nowVal 新的值
         */
        state (nowVal) {
            this.myState = nowVal;
        }
    },
    methods: {
        /**
         * 过滤最大和最小宽度
         * @param {String|Number} minWidth 最小宽度
         * @param {String|Number} maxWidth 最大宽度
         * @returns {Object} 返回最小和最大宽度
         */
        _filterUpLowW (minWidth, maxWidth) {
            minWidth = _formatWidth(minWidth);
            maxWidth = _formatWidth(maxWidth);
            if (minWidth === null && maxWidth === null &&
                minWidth > maxWidth) {
                minWidth = null;
            }
            return {
                minWidth, maxWidth
            };
            /**
             * 格式化宽度
             * @param {Number|String} width 需要格式化的宽度
             * @returns {Number|Null} 返回格式化后的宽度
             */
            function _formatWidth (width) {
                width = (width || '') + '';
                if (!width) {
                    return null;
                }
                width = width.replace(/([0-9]+\.?[0-9]*)(%?)/g, ($s0, $s1, $s2) => {
                    if ($s2 === '%') {
                        $s1 = $s1 / 100;
                    }
                    return $s1;
                });
                return parseFloat(width);
            }
        },
        /**
         * 隐藏右边的item项
         * @param {Number} time 动画时长
         * @param {String} easing 动画规则
         */
        _hideR (time, easing) {
            const _that = this;
            setTimeout(() => {
                _that._setTransiton(time, easing);
                _that._setWidthPos(null, (new Array(_that.maxItemWidth.length)).fill(0), 0);
                // console.log('hideR--->', _that.index);
                // if (!_that.isInTransition) {
                //     }
                _that.status = STATUS_TYPE.HIDDEN;
            }, 20);
        },
        /**
         * 显示右边的item项
         * @param {Number} time 动画时长
         * @param {String} easing 动画规则
         */
        _showR (time, easing) {
            const _that = this;
            _that.status = STATUS_TYPE.VISIBLE;
            setTimeout(() => {
                _that._setTransiton(time, easing);
                _that._setWidthPos(null, _that.maxItemWidth, -_that.maxDisWidth);
            }, 20);
        },

        /**
         * 获取右边内容快的元素
         * @returns {Array} 返回右边内容快的元素
         */
        _getListItemsDom () {
            const _that = this;
            let _listItem = _that.$slots['hook_right'];
            if (_listItem) {
                _listItem = _listItem[0].children || [_listItem[0].elm];
            }
            if (!_listItem) {
                _listItem = _that.$refs['hook_listItem'];
            }
            return _listItem || [];
        },
        /**
         * 注册监听器
         */
        _initWatcher () {
            const _that = this;
            if (_isSlotsCont()) {
                // 监听模块的宽度变化
                _that.$watch('itemWidth', function (nowVal) {
                    _that._setListItemStyle((item, i) => {
                        let _width = nowVal && nowVal[i];
                        if (typeof _width === 'number') {
                            _width = _width + 'px';
                        }
                        setStyle(item && item.elm, 'width', _width);
                    });
                });
                // 监听动画状态
                _that.$watch('isInTransition', function () {
                    _that._setListItemStyle((item) => {
                        let _styles = _that._getTransitionStyle();
                        for (let key in _styles) {
                            setStyle(item && item.elm, key, _styles[key]);
                        }
                    });
                });
                // 监听右边模块是否变化了
                _that.$watch('isUpdate', function (nowVal) {
                    if (nowVal) {
                        _that._resetCom();
                        _that.myUpdate = false;
                    }
                });
            }
            /**
             * 是否通过slot传进内容快
             * @returns {Boolean} 返回右边模块是否是用户自定义的
             */
            function _isSlotsCont () {
                let _listItem = _that.$slots['hook_right'];
                return _listItem && (_listItem[0].children || _listItem[0].elm);
            }
        },
        /**
         * 设置列表项的样式
         * @param {Function} cb 回调方法
         */
        _setListItemStyle (cb) {
            const _that = this;
            let _listItems = _that.listItems;
            if (!_listItems) {
                _listItems = _that._getListItemsDom();
            }
            _that.listItems = _listItems;
            if (_listItems && _listItems.length > 0) {
                for (let i = 0; i < _listItems.length; i++) {
                    callFn(cb, [_listItems[i], i], _that);
                }
            }
        },
        /**
         * 设置动画属性
         * @param {Number} time 动画时长
         * @param {String} easing 动画规则
         */
        _setTransiton (time, easing) {
            const _that = this;
            time = time || 0;
            _that.isInTransition = time > 0;
            easing = easing || 'ease';
            _that.tranTime = time;
            _that.tranFunc = easing;
        }
    }
};
</script>
