// index.js
import { initMixin } from './init'

function Vue(options){// options是用户的选项
    this._init(options)
}

initMixin(Vue);// 扩展了init方法
initLifecycle(Vue)// 扩展了生命周期方法

export default Vue

// init.js
import { initState } from './state'

export function initMixin(Vue){// 给Vue增加init方法
    Vue.prototype._init = function(options){
        // 初始化操作
        const vm = this;
        vm.$options = options;// 将用户的选项挂载到实例上

    }
}

// state.js

export function initState(vm){
    const opts = vm.$options; // 获取用户的选项

    // if(opts.props){
    //     initProps(vm, opts.props);
    // }

    if(opts.data){
        initData(vm);
    }
}

function proxy(vm,target,key){// 让data数据能够直接从实例上获取
    Object.defineProperty(vm,key,{
        get(){
            return vm[target][key];
        },
        set(newVal){
            vm[target][key] = newVal;
        }
    });
}

function initData(vm){
    let data = vm.$options.data;

    /**
     * 这里源代码是直接使用data.call(vm)
     * 我实现时若data为function执行之后仍旧是function，所以这里将data覆盖，以此得到data的返回值
     */
    typeof data === 'function'? data = data.call(vm) : data;

    vm._data = data;// 无论data是function还是object，都要处理成object绑定到vm实例上
    // 劫持数据，vue2采用 defineProperty
    observe(data);


    // 将vm._data用vm来代理就可以了
    for(let key in data){
        proxy(vm,'_data',key);
    }
}

// oberserve/index.js

import Dep from './dep';

class Observer {
    constructor(data) {
        // Object.deineProperty只能劫持已经存在的属性（vue会为此单独写一些api $set $delete）

        /**
         * 给数据加上一个标识，如果数据上有__ob__属性，则说明已经被劫持过了
         * 但是在对象中增加__ob__后进入walk方法，会对__ob__进行监测，里边又会有walk导致进入死循环
         * 所以设置__ob__为一个隐藏属性，不可被枚举
         */

        data.__ob__ = this;
        Object.defineProperties({
            value: this,
            enumerables: false,// 设置__ob__为一个隐藏属性，循环时不会被获取
        })
        if(Array.isArray(data)){
            // 对数组进行劫持：重写数组中的方法
            data.__proto__ = newArrayProto;// 重写数组原型
            this.observeArray(data);// 如果数组中监测的是对象，可以监控到对象的变化
        }else{
            this.walk(data);// 循环对象，对属性依次劫持
        }
    }

    walk(data) {// 循环对象，对属性依次劫持

        // 重新定义属性
        Object.keys(data).forEach(key => {
            defineReactive(data, key, data[key]);
        });
    }

    /**
     * 监测数组
     * 
     */
    observeArray(data){
        data.forEach(item => {
            observe(item);
        })
    }
}

//深层次嵌套会递归，递归多了性能差，不存在属性监控不到，存在的属性要重写方法vue3-> proxy
function dependArray(value){
    for(let i=0;i<value.length;i++){
        let current = value[i];
        current?.dep.depend();
        if(Array.isArray(current)){
            dependArray(current);
        }
    }
}


export function defineReactive(target, key, value) {// 闭包 属性劫持
    let childob = observe(key);// 如果仍旧是一个对象，则递归劫持 childOb.dep用来收集依赖

    let dep = new Dep();
    Object.defineProperty(target, key, {
        get() {// 取值的时候会执行get
            if(Dep.target){
                dep.depend();// 让这个属性的收集器记住当前的watcher
                if(childob){
                    childob.dep.depend();// 让数组和对象本身也能实现依赖收集
                    if(Array.isArray(value)){
                        dependArray(value);
                    }
                }
            }
            return value;
        },
        set(newValue) {// 赋值的时候会执行set
            if(newValue === value) return;
            observe(newValue);
            value = newValue;
            dep.notify();
        },
    })
}

export function observe(data) {
    // 对这个对象进行劫持

    if (typeof data!== 'object' || data === null) {
        return;// 只对对象进行劫持
    }

    // 如果一个对象被劫持过，则不再劫持
    // 判断一个对象是否被接触过，可以增添一个实例，用实例来判断是否被劫持过
    if (data.__ob__ instanceof Observer) {
        return data.__ob__;
    }

    return new Observer(data);
}

// obeserve/array.js

/**
 * 重写数组中的部分方法
 */

// 获取数组的原型
let oldArrayProto = Array.prototype

let newArrayProto = Object.create(oldArrayProto)

let methods = [ // 找到所有变异方法
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sort',
    'reverse',
]// concat slice 都不会改变原数组，所以不需要重写

methods.forEach(method => {
    newArrayProto[method] = function (...args) {// 重写方法
        // 内部调用原方法
        const result = oldArrayProto[method].call(this,...args)

        //对新增的数据再次劫持
        let inserted;
        let ob = this.__ob__;
        switch (method) {
            case 'push':
            case 'unshift':
                inserted = args;
                break;
            case 'splice':
                inserted = args.slice(2);
                break;
            case'sort':
            case'reverse':
            default:
                break;
        }

        if (inserted) {
            ob.observeArray(inserted)
        }

        return result
    }
})

export default newArrayProto