import XLSX from 'xlsx';

const reader = new FileReader();
reader.onload = function (event) {
  // 获取 workbook
  const wb = XLSX.read(event.target.result, { type: 'binary' });
  // 获取 workbook 第一个 worksheet 中的数据
  const ws = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
  // ...
}
// 读取原始 file 或者 blob，并将该文件转化为原始二进制数据
reader.readAsBinaryString(file);

import XLSX from "xlsx";

// 创建 worksheet
const ws = XLSX.utils.json_to_sheet(data);

// 新建空workbook，然后加入worksheet
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "sheet1");

// 生成 xlsx 文件
XLSX.writeFile(wb, "sheetjs.xlsx");

// Dep用于订阅者的存储和收集，将在下面实现
import Dep from 'Dep'
// Observer类用于给data属性添加set&get方法
export default class Observer{
  constructor(value){
    this.value = value
    this.walk(value)
  }
  walk(value){
    Object.keys(value).forEach(key => this.convert(key, value[key]))
  }
  convert(key, val){
    defineReactive(this.value, key, val)
  }
}
export function defineReactive(obj, key, val){
  // 用于存放某个属性的所有订阅者
  var dep = new Dep()
  // 给当前属性的值添加监听
  var chlidOb = observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: ()=> {
      console.log('get value')
      // 如果Dep类存在target属性，将其添加到dep实例的subs数组中
      // target指向一个Watcher实例，每个Watcher都是一个订阅者
      // Watcher实例在实例化过程中，会读取data中的某个属性，从而触发当前get方法
      if(Dep.target){
        dep.addSub(Dep.target)
      }
      return val
    },
    set: (newVal) => {
      console.log('new value setted')
      if(val === newVal) return
      val = newVal
      // 对新值进行监听
      chlidOb = observe(newVal)
      // 通知所有订阅者，数值被改变了
      dep.notify()
    }
  })
}
export function observe(value){
  // 当值不存在，或者不是复杂数据类型时，不再需要继续深入监听
  if(!value || typeof value !== 'object'){
    return
  }
  return new Observer(value)
}

export default class Dep{
  constructor(){
    this.subs = []
  }
  addSub(sub){
    // 在收集订阅者的时候，需要对subs中的订阅者进行去重，这边不详细解析
    this.subs.push(sub)
  }
  notify(){
    // 通知所有的订阅者(Watcher)，触发订阅者的相应逻辑处理
    this.subs.forEach((sub) => sub.update())
  }
}

import Dep from 'Dep'
export default class Watcher{
  constructor(vm, expOrFn, cb){
    this.vm = vm // 被订阅的数据一定来自于当前Vue实例
    this.cb = cb // 当数据更新时想要做的事情
    this.expOrFn = expOrFn // 被订阅的数据
    this.val = this.get() // 维护更新之前的数据
  }
  // 对外暴露的接口，用于在订阅的数据被更新时，由订阅者管理员(Dep)调用
  update(){
    this.run()
  }
  run(){
    const val = this.get()
    if(val !== this.val){
      this.val = val;
      this.cb.call(this.vm)
    }
  }
  get(){
    // 当前订阅者(Watcher)读取被订阅数据的最新更新后的值时，通知订阅者管理员收集当前订阅者
    Dep.target = this
    const val = this.vm._data[this.expOrFn]
    // 置空，用于下一个Watcher使用
    Dep.target = null
    return val;
  }
}

import Observer, {observe} from 'Observer'
import Watcher from 'Watcher'
export default class Vue{
  constructor(options = {}){
    // 简化了$options的处理
    this.$options = options
    // 简化了对data的处理
    let data = this._data = this.$options.data
    // 将所有data最外层属性代理到Vue实例上
    Object.keys(data).forEach(key => this._proxy(key))
    // 监听数据
    observe(data)
  }
  // 对外暴露调用订阅者的接口，内部主要在指令中使用订阅者
  $watch(expOrFn, cb){
    new Watcher(this, expOrFn, cb)
  }
  _proxy(key){
    Object.defineProperty(this, key, {
      configurable: true,
      enumerable: true,
      get: () => this._data[key],
      set: (val) => {
        this._data[key] = val
      }
    })
  }
}

import Vue from './Vue';
let demo = new Vue({
  data: {
    'a': {
      'ab': {
        'c': 'C'
      }
    },
    'b': [
      'bb': 'BB',
      'bbb': 'BBB'
    ],
    'c': 'C'
  }
});
demo.$watch('c', () => console.log('c is changed'));
// get value
demo.$watch('a.ab', () => console.log('a.ab is changed'));
demo.$watch('b', () => console.log('b is changed'));
// get value
demo.c = 'CCC';
// new value setted
// get value
// c is changed
demo.a.ab = 'AB';
// get value
// new value setted
demo.b.push({'bbbb': 'BBBB'});
// get value

var Koa = require('koa');
var app = new Koa();
//添加中间件1
app.use(function *(next){
  var start = new Date;
  console.log("start=======1111");
  yield next;
  console.log("end  =======1111");
  var ms = new Date - start;
  console.log('%s %s - %s', this.method, this.url, ms);
});
//添加中间件2
app.use(function *(){
  console.log("start=======2222");
  this.body = 'Hello World';
  console.log("end  =======2222");
});

app.listen(3000);
/*
start=======1111
start=======2222
end  =======2222
end  =======1111
GET / - 10
start=======1111
start=======2222
end  =======2222
end  =======1111
GET /favicon.ico - 5
*/

function Application() {
  if (!(this instanceof Application)) return new Application;
  this.env = process.env.NODE_ENV || 'development';
  this.subdomainOffset = 2;
  // 用于存放中间件，即generator对象
  this.middleware = [];
  this.proxy = false;
  // 获得封装的上下文对象
  this.context = Object.create(context);
  // 获取封装的请求对象
  this.request = Object.create(request);
  // 获取封装的响应对象
  this.response = Object.create(response);
}

listen() {
  debug('listen');
  // 调用node原生中的创建服务
  // 其中callback()是服务创建的核心，具体见下面分析
  const server = http.createServer(this.callback());
  // 开启服务的监听
  return server.listen.apply(server, arguments);
}

app.use = function(fn){
  if (!this.experimental) {
    // es7 async functions are not allowed,
    // so we have to make sure that `fn` is a generator function
    assert(fn && 'GeneratorFunction' == fn.constructor.name, 'app.use() requires a generator function');
  }
  debug('use %s', fn._name || fn.name || '-');
  // 将输入的fn依次push到middleware数组中
  this.middleware.push(fn);
  // 返回this，以便链式调用
  return this;
};

app.callback = function(){
  if (this.experimental) {
    console.error('Experimental ES7 Async Function support is deprecated. Please look into Koa v2 as the middleware signature has changed.')
  }
  // 将中间件按照加入的顺序，实现yield的链式调用，即组织异步调用结构，详细见下面的compose
  // co.wrap方法将generator函数转化为Promise
  var fn = this.experimental ? compose_es7(this.middleware) : co.wrap(compose(this.middleware));
  var self = this;

  if (!this.listeners('error').length) this.on('error', this.onerror);

  // 返回node native的请求处理函数
  return function handleRequest(req, res){
    res.statusCode = 404;
    var ctx = self.createContext(req, res);
    onFinished(res, ctx.onerror);
    fn.call(ctx).then(function handleResponse() {
      respond.call(ctx);
    }).catch(ctx.onerror);
  }
};

// 返回一个启动函数
function compose(middleware){
  return function *(next){
    if (!next) next = noop();
    var i = middleware.length;
    // 对中间件队列从后遍历，逐个获取对应的generator对象
    while (i--) {
      // 将后面的generator对象传递给前面中间件的generatorFunction
      next = middleware[i].call(this, next);
    }
    // 返回一个yield，next指向第一个中间件的generator
    return yield *next;
  }
}
function *noop(){}

co(function* (){
    var a = yield Promise.resolve('one');
    console.log(a);
    var b = yield Promise.reslove('two');
    console.log(b);
    return 'three';
}).then((value) => console.log(value));
// one
// two
// three

co(function* (){
    var res = yield [Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)];
    return res;
}).then((value) => console.log(res));
// [1, 2, 3]

function co(gen) {
  // 保持当前函数的上下文
  var ctx = this;
  // 截取co输入的参数，剔除arguments中的第一个参数，即gen对象，剩余参数作为gen的入参
  var args = slice.call(arguments, 1);

  // 返回一个Promise对象，即最外围Promise对象
  return new Promise(function(resolve, reject) {
    // 判断传入的gen是否为函数，若是则执行，将结果赋值给gen对象
    // 若不是，则不执行
    if (typeof gen === 'function') gen = gen.apply(ctx, args);
    // 根据generator函数执行结果是否存在next字段，判断gen是否为generator迭代器对象
    // 若不是，则调用resolve返回最外围Promise对象的状态
    if (!gen || typeof gen.next !== 'function') return resolve(gen);

    // 若是generator迭代器对象，开始控制gen.next()方法的调用
    onFulfilled();

    // 两个用途
    // 一、generator函数的执行入口
    // 二、当做所有内部Promise对象的resolve方法，处理异步结果，并继续调用下一个Promise
    function onFulfilled(res) {
      var ret;
      try {
        // gen运行至yield处被挂起，开始处理异步操作，并将异步操作的结果返回给ret.value
        ret = gen.next(res);
      } catch (e) {
        // 若报错，直接调用reject返回外围Promise对象的状态，并传出错误对象
        return reject(e);
      }
      // 将gen.next的执行结果传入next函数，实现依次串行调用gen.next方法
      next(ret);
      return null;
    }

    // 当做所有内部Promise对象的reject方法，处理异步结果，并继续调用下一个Promise
    function onRejected(err) {
      var ret;
      try {
        ret = gen.throw(err);
      } catch (e) {
        // 若报错，直接调用reject返回外围Promise对象的状态，并传出错误对象
        return reject(e);
      }
      // 将gen.throw的执行结果传入next函数，实现依次串行调用gen.next方法
      next(ret);
    }

    // 实现串行调用gen.next的核心
    function next(ret) {
      // 判断内部Promise是否全部执行完毕
      // 若执行完毕，直接调用resolve改变外围Promise的状态，并返回最终的return值[问题3]
      if (ret.done) return resolve(ret.value);
      // 若未执行完毕，调用toPromise方法将上一个Promise返回的值转化为Promise对象
      // 具体参见toPromise方法
      var value = toPromise.call(ctx, ret.value);
      // 根据value转化后的Promise对象的两个状态，执行下一个next方法
      if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
      // 抛出不符合转化规则的类型的值
      return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
        + 'but the following object was passed: "' + String(ret.value) + '"'));
      }
    });
  }

function toPromise(obj) {
  // 确保obj有意义
  if (!obj) return obj;
  // 若是Promise对象，则直接返回
  if (isPromise(obj)) return obj;
  // 若是generator函数或者generator对象，则传入一个新的co，并返回新co的外围Promise
  // 作为当前co的内部Promise，这样实现多层级调用
  if (isGeneratorFunction(obj) || isGenerator(obj)) return co.call(this, obj);
  // 若是函数，则返回thunk规范的函数
  if ('function' == typeof obj) return thunkToPromise.call(this, obj);
  // 若是数组，把数组中每个元素转化为内部Promise，返回Promise.all并行运算
  if (Array.isArray(obj)) return arrayToPromise.call(this, obj);
  // 若是对象，遍历对象中的每个key对应的value，转化成Promise.all并行运算
  if (isObject(obj)) return objectToPromise.call(this, obj);
  return obj;
}

function thunkToPromise(fn) {
  var ctx = this;
  return new Promise(function (resolve, reject) {
    fn.call(ctx, function (err, res) {
      if (err) return reject(err);
      if (arguments.length > 2) res = slice.call(arguments, 1);
      resolve(res);
    });
  });
}

function arrayToPromise(obj) {
  // Array.map并行计算返回每一个元素的Promise
  return Promise.all(obj.map(toPromise, this));
}

function objectToPromise(obj){
  var results = new obj.constructor();
  var keys = Object.keys(obj);
  var promises = [];
  for (var i = 0; i < keys.length; i++) {
    var key = keys[i];
    var promise = toPromise.call(this, obj[key]);
    if (promise && isPromise(promise)) defer(promise, key);
    else results[key] = obj[key];
  }
  // Promise链式调用，后续的then能偶获取此处的results
  return Promise.all(promises).then(function () {
    return results;
  });

  function defer(promise, key) {
    // key对应的元素成功转化为Promise对象后，构造这些Promise的resovle方法
    // 以便在results中获取每个Promise对象成功执行后结果
    results[key] = undefined;
    promises.push(promise.then(function (res) {
      results[key] = res;
    }));
  }
}

function* firstGenerator() {
  var one = yield 'one';
  console.log(one);
  var two = yield 'two';
  concole.log(two);
  var third = yield 'third';
  console.log(third);
  return 'over'
}

var it = firstGenerator();
console.log(it.next(1));  // {value: "one", done: false}
console.log(it.next(2));  // {value: "two", done: false}
console.log(it.next(3));  // {value: "third", done: false}
console.log(it.next(4));  // {value: "over", done: true}

function* subGen() {
  console.log('step in sub generator');
  var b = yield 'sub 1';
  console.log(b);
  console.log('step out sub generator');
}
var subGenerator = new subGen();
function* mainGen() {
  var a = yield 'main 1';
  console.log(a);
  var b = yield *subGenerator;
  console.log(b);
  var c = yield 'main 2';
  console.log(c);
  return 'over';
}
var it = mainGen();
console.log(it.next(1));
// {value: 'main 1', done: false}
console.log(it.next(2));
// 2
// step in sub generator
// {value: 'sub 1', done: false}
console.log(it.next(3));
// 3
// step out sub generator
// null
// {value: 'main 2', done: false}
console.log(it.next(4));
// 4
// {value: 'over', done: true}

var $win = $(window),
      $header = $('.header'),
      $empty = $('.empty');

$win.on('scroll', function(event) {
     if($win.scrollTop() > $header.offset().top) {
         $header.addClass('sticky');
         $empty.removeClass('hidden');
     } else if($win.scrollTop() < $empty.offset().top) {
         $header.removeClass('sticky');
         $empty.addClass('hidden');
     }
});