(function() {
  'use strict';
  
  angular
    .module('heroApp', [])
    .component('heroList', {
      template: `
      <b>Heros</b><br>
      <hero-detail ng-repeat="hero in $ctrl.list" 
                   on-remove="$ctrl.removeHero(hero)"
                   on-update="$ctrl.updateHero(hero, prop, value)"
                   hero="hero"></hero-detail>
      `,
      controller: function() {
        var $ctrl = this;
        
        $ctrl.list = [
          {
            name: '张三',
            location: 'test1'
          },
          {
            name: '李四',
            location: 'test2'
          }
        ];
        
        $ctrl.removeHero = removeHero;
        $ctrl.updateHero = updateHero;
        
        function removeHero(hero) {
          var idx = $ctrl.list.indexOf(hero);
          
          if (idx >=0 ) {
            $ctrl.list.splice(idx, 1);
          }
        }
        
        function updateHero(hero, prop, value) {
          hero[prop] = value;
        }
      }
    })
    .component('heroDetail', {
      template: `
      <hr>
      <div>
        Name:{{$ctrl.hero.name}}
        Location: <editable-field field-value="$ctrl.hero.location" field-type="text"
                         on-update="$ctrl.update('location', value)"></editable-field><br>
        <button ng-click="$ctrl.remove()">Delete</button>
      </div>
      `,
      bindings: {
        hero: '<',
        onRemove: '&',
        onUpdate: '&'
      },
      controller: function() {
        var $ctrl = this;
        
        $ctrl.remove = remove;
        $ctrl.update = update;
        
        function remove() {
          $ctrl.onRemove({ hero: $ctrl.hero });
        }
        
        function update(prop, value) {
          console.log(prop);
          $ctrl.onUpdate({hero: $ctrl.hero, prop: prop, value: value});
        };
      }
    })
    .component('editableField', {
      template: `
      <span ng-switch="$ctrl.editMode">
		    <input ng-switch-when="true" type="{{$ctrl.fieldType}}" ng-model="$ctrl.fieldValue">
         <span ng-switch-default>{{$ctrl.fieldValue}}</span>
      </span>
      <button ng-click="$ctrl.handleModeChange()">{{$ctrl.editMode ? '保存' : '编辑'}}</button>
      <button ng-if="$ctrl.editMode" ng-click="$ctrl.reset()">重置</button>
      `,
      bindings: {
        fieldValue: '<',
        fieldType: '@?',
        onUpdate: '&'
      },
      controller: function() {
        var $ctrl = this;
        
        $ctrl.editMode = false;
        $ctrl.$onInit = init;
        $ctrl.reset = reset;
        $ctrl.handleModeChange = handleModeChange;
        
        function handleModeChange() {
          if ($ctrl.editMode) {
            $ctrl.onUpdate({ value: $ctrl.fieldValue });
            $ctrl.fieldValueCopy = $ctrl.fieldValue;
          }
          $ctrl.editMode = !$ctrl.editMode;
        }
        
        function reset() {
          $ctrl.fieldValue = $ctrl.fieldValueCopy;
        }
        
        function init() {
          $ctrl.fieldValueCopy = $ctrl.fieldValue;
          $ctrl.fieldType = $ctrl.fieldType || 'text';
        }
        
      }
    })
  
})();