import config from "../../../config/config";
import router from "../../../router";

export default {

    data(){
        return {
            state: 0,   // 0 无状态 1 加载中  2 加载完成 3 加载失败
            vFooterHeight: config.phoneFooterHeight,
            useModal:undefined,

            headerIcon:{
                back:{
                    black: require('../images/back.png'),
                    white: require('../images/back-white.png')
                }
            },

            _state: 0,		// 状态 副本  设置 状态 以 副本为主 的 检定  正本 作为 视图渲染
            _requestTime: 0,  // 发起请求的 时间
            _unique:undefined,       // 请求的唯一标示
            _time:undefined,  // 发起 请求的 时间 记录器
        }
    },

    methods:{

        openModal:function(obj = {},type){
            if (type === undefined || !this.useModal[type])  type = this.modal[0];
            return this._modal[type] && this._modal[type].openModal(obj);
        },

        goBack:function(){
            return router.navigateBack({
                fail:function () {
                    return router.switchTab('index');
                }
            });
        },

        /* 重新载入 */
        reload:function(state=1){
            return this.fetch(true,state);
        },

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

            /* 设置请求时间 */
            this._requestTime = this.getNowTime();
            /* 设置唯一标示 */
            this._unique = this.getUnique();
            /* 暂存唯一标示 */
            let unique = this._unique;

            if (state === 1) {
                /* 设置状态为加载中 */
                this.setState(1);
            }

            return  this.$emit('fetch',{
                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.fail(error);
                    } else {
                        unique = null;
                    }
                }
            })

        },

        /* 设置成功 */
        success:function(){
            return this.setState(2);
        },

        /* 失败的函数 */
        fail: function(fail){
            console.log(fail);
            return this.setState(3);
        },

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

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

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

                /* 如果设置加载状态 */
                if (state === 1) {
                    draw.state = 1;
                    if (beforeState === 3) {
                        return this.setUseData(draw);
                    } else {
                        /* 设置为 请求状态 */
                        this._time = setTimeout(()=>{
                            return this.setUseData(draw);
                        },this.asyncTime);
                    }
                } else {
                    draw.state = this._state;
                    /* 设置其他状态 */
                    let diff = this.getNowTime() - this._requestTime;
                    /* 如果请求间隔时长 大于 async 且 请求时长 不超过 timeout */
                    if (diff >= this.asyncTime && diff < this.timeout) {

                        this._time = setTimeout(()=>{
                            return this.setUseData(draw);
                        },this.asyncTime);
                    } else {
                        return this.setUseData(draw);
                    }


                }
            }

        },

        setUseData(draw){
            for (let key in draw) {
                if (draw.hasOwnProperty(key)) {
                    this[key] = draw[key];
                }
            }
        },

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

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

        /* 设置modal */
        installModal(){

            if (this.modal && this.modal.length > 0) {

                this.useModal = {};
                this.modal.map((item)=> {
                    this.$set(this.useModal,item,true);
                });

                // 页面渲染完成后执行构造
                return setTimeout(()=>{

                    this._modal = {};
                    this.modal.map((item)=>{
                        this._modal[item] = uni.selectComponent('#'+item,true);
                    });
                },16);

            }

        }

    },

    // pageLifetimes:{
    //     show(){
    //         // 子组件
    //         config.component = this;
    //     }
    // },

    mounted(){
        this.installModal();
        if (this.async) {
            return this.fetch();
        }
    },
}