export default {

    data:function (){
        return {
            animateClass:'',
            animateContentClass:'',

            actualValue: false,

            _animateClass:[],
            _animateContentClass:[],
            drawDiffTime: 5,
            _value_set:false
        }
    },

    watch:{
        /* 每次value 变更 触发修改class */
        'value':function (value,oldValue) {
            if (this._value_set) {
                return this.createDrawAnimateClass();
            }
        },
        /* 每次修改发生变化的类型触发 变更 触发修改class */
        'animate':function () {
            return this.installAnimateClass();
        },
        'animateContent':function () {
            return this.installAnimateClass();
        }
    },

    methods:{

        toggle:function () {
            this.value = !this.value;
        },

        /* 构造渲染class */
        createDrawAnimateClass:function(){


            if (this.animate){

                /*
                * 	如果存在 计时器 清理掉
                * */
                if ('childrenDrawCallback' in this)  clearTimeout(this.childrenDrawCallback);
                if ('watchEndTime' in this) clearTimeout(this.watchEndTime);

                let draw = {};
                let state = this.value ?'-show':'-hide';
                let status = this.value;
                let hasContentStatus = this.animateContent || this.animateExtend;
                draw['animateClass'] = this._animateClass.map((item)=> item+state).join(',');
                if (hasContentStatus) {
                    draw['animateContentClass'] = this._animateContentClass.map((item)=> item+state).join(',');
                }


                this.actualValue = true;

                setTimeout(()=>{
                    if (this.async) {

                        // 根据当前设置默认渲染的 情况
                        let key = hasContentStatus? status?'animateClass':'animateContentClass':'animateClass';

                        this[key] = draw[key];

                        let nextChildren = hasContentStatus ? status ? 'animateContentClass' : 'animateClass' : false;

                        // 如果存在下一个 子级
                        if (nextChildren) {
                            /*
                            * 	统计过渡时间
                            * */
                            let contentDuration = this.contentDuration || this.duration;
                            if (this.async && this.asyncDiff) contentDuration = this.asyncDiff;

                            let duration = status ? this.duration : contentDuration;

                            this.childrenDrawCallback = setTimeout( () => {
                                this[nextChildren] = draw[nextChildren];
                            },duration + this.drawDiffTime);
                        }
                    } else {

                        for (let key in draw) {
                            if (draw.hasOwnProperty(key)) {
                                this[key] = draw[key];
                            }
                        }
                    }
                    /* 装载 */
                    this.animateEndWatch();
                },13);


            }

        },

        /* 装载记录结束瞬间 */
        animateEndWatch:function(){

            if (!this.value) {

                let hasContentStatus = this.animateContent || this.animateExtend;
                let contentDuration = this.contentDuration || this.duration;

                if (this.async && this.asyncDiff) contentDuration = this.asyncDiff;

                let duration = (hasContentStatus ? ( this.duration + contentDuration ) : this.duration) + this.drawDiffTime;

                if (hasContentStatus)  {
                    duration += this.drawDiffTime;
                }


                this.watchEndTime = setTimeout(()=>{
                    if (this.actualValue === true) this.actualValue = false;
                },duration);
            }


        },

        /* 安装class */
        installAnimateClass:function(){
            if (this.animate) {
                this._animateClass = this.createAnimateClass(this.animate);
                if (this.animateContent || this.animateExtend) {
                    this._animateContentClass = this.createAnimateClass(this.animateContent || this.animateExtend && this.animate);
                }
            }
        },
        /* 创建动画名称 class */
        createAnimateClass:function (string) {
            if (string) {
                return (string.split(',') || []).map((item)=> 'animate-'+item);
            } else {
                return [];
            }

        },

        /* 初始化 */
        install:function () {
            this.installAnimateClass();
            if (this.actualValue !== this.value) {
                this.createDrawAnimateClass();
            } else {
                let draw = {};
                let state = this.value ?'-show':'-hide';
                let hasContentStatus = this.animateContent || this.animateExtend;
                draw['animateClass'] = this._animateClass.map((item)=> item+state).join(',');
                if (hasContentStatus) {
                    draw['animateContentClass'] = this._animateContentClass.map((item)=> item+state).join(',');
                }

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

            }
            this._value_set = true;
        }

    },

    mounted(){
        this.install();
    }

}