// －－－ View层 请看Html代码段
// －－－－－－－－－ Model层 －－－－－－－－－－
var newPerson = {
  name: 'Nelson Kuang',
  age: 18,
  classMates: [
    {
      name: '张三',
      gender: '男',
      age: 18
    },
    {
      name: '李四',
      gender: '男',
      age: 17
    },
    {
      name: '王五',
      gender: '女',
      age: 19
    }
  ],
  school: {
    name: 'XX Middle School',
    classNumber: '18',
    grade: '03'
  }
};

// －－－－－－－－－ viewModel层 －－－－－－－－－－
function updateSchool(newVal, oldVal) { // 传统的拼接html字符串的方式实现更新视图View
  console.log(newVal)
  var compiled = _.template('<h3>${ name }</h3><ul><li>Class ${ classNumber }</li><li>Grade ${ grade }</li></ul>')
  document.querySelector('#school').innerHTML = compiled(newVal)
}
Object.defineProperty(newPerson, 'school', {
    set: function (x) {
        if (!_.isEqual(x, this.oldPropValue)) { // 数组或者对象的比较与普通的数值的比较不一样，要深度遍历进行比较
          console.log(x)
          updateSchool(x, this.oldPropValue)
          this.oldPropValue = x
        } else {
            console.log('school的值没变')
        }
    },
    get: function () {
        console.log('in property get accessor');
        return this.oldPropValue;
    },
    enumerable: true,
    configurable: true
});


function updateTable(newVal, oldVal) { // 传统的拼接html字符串的方式实现更新视图View
  if(_.isArray(newVal)) {
    var el = document.querySelector('#classmates__list'),
        strHtml = '';
    newVal.forEach(function(item){
      strHtml += '<tr><td>' + item.name + '</td><td>' + item.gender + '</td><td>' + item.age + '</td></tr>';
    })
    el.innerHTML = strHtml
  }
}
Object.defineProperty(newPerson, 'classMates', {
    set: function (x) {
        if (!_.isEqual(x, this.oldPropValue)) { // 数组或者对象的比较与普通的数值的比较不一样，要深度遍历进行比较
          updateTable(x, this.oldPropValue)
          this.oldPropValue = x
        } else {
            console.log('classMates的值没变')
        }
    },
    get: function () {
        console.log('in property get accessor');
        return this.oldPropValue;
    },
    enumerable: true,
    configurable: true
});


Object.defineProperty(newPerson, 'name', {
    set: function (x) {
        if (x !== this.oldPropValue) {
            document.querySelector('#name').innerHTML = x
            this.oldPropValue = x;
        } else {
            console.log('name的值没变')
        }
    },
    get: function () {
        console.log('in property get accessor');
        return this.oldPropValue;
    },
    enumerable: true,
    configurable: true
});
Object.defineProperty(newPerson, 'age', {
    set: function (x) {
        if (x !== this.oldPropValue) {
            document.querySelector('#age').innerHTML = x
            this.oldPropValue = x;
        } else {
            console.log('age的值没变')
        }
    },
    get: function () {
        console.log('in property get accessor');
        return this.oldPropValue;
    },
    enumerable: true,
    configurable: true
});
// －－－－－－－－－ mvvm 数据驱动开发方式，现在只需修改newPerson的数据，View层的Dom节点会自动更新，如下：
  setTimeout(function(){
    // mvvm 数据驱动开发方式
    newPerson.name = 'Gary Li'
    newPerson.age = 20
    newPerson.classMates = [
    {
      name: '小明',
      gender: '男',
      age: 17
    },
    {
      name: '小强',
      gender: '男',
      age: 19
    },
    {
      name: '小梅',
      gender: '女',
      age: 19
    }]
    newPerson.school = {
      name: 'YY Middle School',
      classNumber: '10',
      grade: '01'
    }
  }, 5000)


// 下面只是计时器，与上面无关，set the timer
Object.prototype.delay = function (time, doSomething) {
    var self = this,
        startTime = time;
    if (self) {
        setTimeout(function () {
            doSomething(self, startTime);
        }, time);
    }
    return this;
}
var el = document.querySelector('#timer');
for (var i = 0; i <= 5; i++) {
    el.delay(i * 1000, function (self, startTime) {
        self.innerHTML = 5 - startTime / 1000;
    })
}