export default {

    data(){
        return {
            start: true,   // 初始化
            state: 0,      //  0 无状态 1 加载中 2 加载成功 3 暂无更多  4 错误
            pagingStatus: true,  // 是否 显示 底部分页器
            page: 1,      // 页码
            _state: 0,		// 状态 副本  设置 状态 以 副本为主 的 检定  正本 作为 视图渲染
            _requestTime: 0,  // 发起请求的 时间
            _unique:undefined,       // 请求的唯一标示
            _time:undefined,         // 发起 请求的 时间 记录器
        }
    },

    methods:{

        /* 下拉刷新 */
        refreshHandle:function(e){
            this.__pull = e;
            return this.reload(2,true);
        },

        /* 滚动到底部 */
        bottom:function(){
            if ((this._state === 1
                ||
                (this._state===3) && !this.start
                ||
                ((this._state===3) && !this.start && this.page !== 1)
                ||
                ((this._state===4) && this.start && this.page === 1)
            )
            ) return undefined;
            return this.reload(this._state===4?5:4);
        },

        /* 重试 */
        retry:function(e){
            return this.reload(Number(e.currentTarget.dataset.type));
        },

        /*
         * 提供刷新的函数
         * 	 1  代表 从头开始重新载入
         * 	 2  代表 从 第一页 开始重新载入 也就是 下拉刷新
         * 	 3  代表 无状态的 刷新 从 头导入
         * 	 4  代表 加载下一页
         * 	 5  代表 刷新当前页
        * */
        reload:function(state,must){

            if (state === 1) {
                this.page = 1;
                this.setState(0);
                if (this.mode === 'skeleton') {
                    this.setSkeletonData();
                } else {
                    this.changeData([],false);
                    if (!this.start) {
                        this.setStatusApi(true);
                    }
                }

            }  else if ( state === 2 || state === 3) {
                this.page = 1;
            } else if (state ===4){
                // this.setPageApi(this.page + 1);
            }

            this._state = 0;

            return this.fetch(must);

        },

        /* 设置page */
        setPageApi:function(page=1){
            this.page = page;
        },

        /* 设置 status */
        setStatusApi:function(status){
            if (this.start !== status) {
                return this.start = status;
            }
        },

        /* 设置状态为成功 并重置分页 */
        setSuccessPageApi:function(page){

            console.log(this);
            this.page = page;

            if (this.start) {
                this.start = false;
            }

        },

        /* 请求 */
        fetch:function(must){
            // 查看当前是否在请求中 和 是否 已经到底了
            if ((this._state === 1 || (this._state===3 && !this.start && this.page !== 1)) && must !== true ) return undefined;

            /* 设置请求时间 */
            this._requestTime = this.getNowTime();
            /* 设置唯一标示 */
            this._unique = this.getUnique();
            /* 暂存唯一标示 */
            let unique = this._unique;
            if (!(this.start && ( (this._state === 3 || this._state === 4) ) && this.page === 1) || (this._state === 3 || this._state === 4)) {
                /* 设置状态为加载中 */
                this.setState(1);
            } else {
                this._state = 1;
            }


            return  this.$emit('fetch',{
                page: this.page,
                pageSize: this.pageSize,
                success:(data)=>{
                    /* 唯一表示保持一致 表示响应 */
                    if (unique === this._unique) {
                        unique = null;
                        return this.success(data);
                    } else {
                        unique = null;
                    }
                },
                fail:(error)=>{
                    /* 唯一表示保持一致 表示响应 */
                    if (unique === this._unique) {
                        unique = null;
                        return this.failHandle(error);
                    } else {
                        unique = null;
                    }
                }
            })

        },

        /* 请求成功的函数 */
        success: function(data=[]){

            let state = 2;

            /* 记录暂无更多 */
            if (data.length < this.pageSize) {
                state = 3;
            }

            if (state=== 2 && !this.pagingStatus) {
                this.pagingStatus = true;
            } else if (state === 3 && this.pagingStatus && this.page===1) {
                this.pagingStatus = false;
            }

            if (this.start && data.length > 0) {
                this.start = false;
            }

            this.changeData(data,false);

            this.setPageApi(this.page + 1);
            return this.setState(state);
        },

        // 获取 changeData
        changeData: function(data,skeleton){
            /* 设置当前data */
            return this.$emit('changeData',{
                data,
                skeleton,
                clear: this.page <= 1,
                position: (this.page - 1) * this.pageSize
            });
        },

        /* 失败的函数 */
        failHandle: function(){
            return this.setState(4);
        },

        /* 设置状态
        * 	渲染规则 注意
        *  		从 其他 状态 ->  加载中 	需要 延长 async
        *  		从 加载中  -> 其他 状态    如果 目前处于 加载中 且时长不超过timeout 需要 延长 async 如果 不处于 加载中 将 直接 渲染
        *
        * */
        setState:function (state,draw={}) {

            /* 设置状态 */
            if (state !== this._state) {
                /* 清除 */
                clearTimeout(this._time);

                let beforeState = this._state;
                this._state = state;

                /* 如果设置加载状态 */
                if (state === 1) {

                    if (beforeState === 4) {
                        this.state = 1;
                    } else {
                        /* 设置为 请求状态 */
                        this._time = setTimeout(()=>{
                            this.state = 1;
                        },this.async);
                    }

                } else {
                    this.state = this._state;
                    /* 设置其他状态 */
                    let diff = this.getNowTime() - this._requestTime;

                    /* 如果请求间隔时长 大于 async 且 请求时长 不超过 timeout */
                    if (diff >= this.async && diff < this.timeout) {

                        this._time = setTimeout(()=>{
                            if (this.__pull) {
                                this.__pull();
                                this.__pull = null;
                            }
                        },this.async);
                    } else {
                        if (this.__pull) {
                            this.__pull();
                            this.__pull = null;
                        }
                    }


                }
            }

        },

        /* 获取 当前时间戳 */
        getNowTime:function () {
            return new Date().getTime();
        },

        /* 获取唯一标示 */
        getUnique: function () {
            return this._requestTime + '<->' + Math.ceil(Math.random() * 1000);
        },

        /* 设置骨架模式的数量 */
        setSkeletonData:function () {
            let data =[];
            let count = this.skeleton<0?this.pageSize:this.skeleton;
            for (let i=0;i< count;i++ ){
                data.push({});
            }
            return this.changeData(data,true);
        }

    },

    mounted(){
        if (this.first) {
            if (this.mode === 'skeleton') {
                this.setSkeletonData();
            }

            /* 执行请求 */
            return this.fetch(true);
        }
    }

}