<template>
  <div>
    <div class="group-row clearfix" v-for="(pi, line) in resourceList">
      <div class="form-group" v-for="(index, item) in line">
        <div class="label">
          <checkbox 
            :list="[{value: item.parent.id, label:item.parent.name}]" 
            :layout="['bold']" 
            :selected.sync="selectedHeadArray[pi * 3 + index]"
            @manual-change="selectAll(pi * 3 + index)"></checkbox>
        </div>
        <div class="control">
          <checkbox 
            v-for="child in item.children" 
            :selected.sync="selectedArray[pi * 3 + index]" 
            :list="[{value: child.id, label: child.name}]" 
            :layout="['block']"></checkbox>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  module.exports ={
    props: {
      'resource': {
        type: Array
      },
      'selectedResource': {
        type: Array,
        twoWay: true
      }
    },
    data: function () {
      return {
        resourceArray: [],
        resourceList: [],
        isManual: false,
        selectedHeadArray: [[], [], [], [], [], [], []],
        selectedArray: [[], [], [], [], [], [], []]
      };
    },
    watch: {
      'selectedResource': function (arr) {
        // 如果是手动同步值，不再修改状态
        if (this.isManual) {
          return true;
        }
        var self = this;
        _.each(this.resourceArray, function (classify, index) {
          var selected = [];
          _.each(classify.children, function (item) {
            if (_.indexOf(arr, item.id) > -1) {
              selected.push(item.id);
            }
          });
          self.selectedArray.$set(index, selected);
        });
      },
      'resource': function (val) {
        //var list = flushAuth(val);
        //
        alert(val);
        this.resourceArray =val;// [].concat(list);
        ///this.resourceList = [];
       // this.resourceList.push(list.slice(0, 3));
        //this.resourceList.push(list.slice(3, 6));
      },
      selectedArray: function (arr) {
        alert(arr);
        var self = this;
        _.each(this.resourceArray, function (classify, index) {
          var totalLen = classify.children.length;
          if (arr[index].length === totalLen) {
            self.selectedHeadArray.$set(index, [classify.parent.id]);
          } else {
            self.selectedHeadArray.$set(index, []);
          }
        });
      }
    },
    methods: {
      selectAll: function (index) {
        if (this.selectedHeadArray[index].length) {
          var result = _.map(this.resourceArray[index].children, function (item) {
            return item.id;
          });
          this.selectedArray.$set(index, result);
        } else {
          this.selectedArray.$set(index, []);
        }
      }
    },
    events: {
      'sync-resource': function () {
        var self = this;
        this.isManual = true;
        var _concat = [].concat;
        this.selectedResource = _concat.apply(_concat.apply([], this.selectedHeadArray), this.selectedArray);

        window.setTimeout(function () {
          self.isManual = false;
        }, 50)
      }
    }
  };

  function flushAuth(sysAuthList) {
    var parentList = {};
    var sortArray = new Array(6);
    _.each(sysAuthList, function (item) {
      if (!item.parentId) {
        if (!parentList[item.id]) {
          parentList[item.id] = {
            children: []
          };
        }
        sortArray[item.storNo - 1] = item.id;
        parentList[item.id].parent = item;
      } else {
        if (!parentList[item.parentId]) {
          parentList[item.parentId] = {
            children: []
          };
        }
        parentList[item.parentId].children.push(item);
      }
    });

    var result = [];

    for (var i = 0, len = sortArray.length; i < len; i++) {
      result.push(parentList[sortArray[i]]);
    }
    return result;
  }
</script>