/*
  递归treeNode，此组件仅作为UI组件，不参与逻辑计算-通过父组件的透传的 expandedList属性去展开。
  checkedId为单选时选中的值
  checkbox的选中则为父级的方法通过当前的id去计算是否存在于父级的响应式数据checkedList来判断是否需要勾选与取消勾选
  checkedList为父级透传的响应式数据
  会收集当前组件的Watcher作为Dep，从而实现响应式，则不需要在treeNode组件本身添加响应式数据，减少性能开销
*/
import ksIcon from '../icon';
import ksCheckbox from '../checkbox';
import './tree-node.css';

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('div', {
    staticClass: "ks-tree-container"
  }, _vm._l(_vm.treeData, function (node) {
    return _c('div', {
      key: node.id,
      staticClass: "tree-node",
      attrs: {
        "id": 'node' + node.id + _vm.$attrs.id
      }
    }, [_c('div', {
      staticClass: "tree-node__row"
    }, [_c('div', {
      staticClass: "tree-node__row-left",
      on: {
        "click": function click($event) {
          $event.stopPropagation();
          return _vm.$listeners.nodeClick(node);
        }
      }
    }, [_c('div', {
      staticClass: "tree-node__row-left__icon"
    }, [node.children && node.children.length ? _c('ks-icon', {
      class: {
        'tree-node__row-left__icon-checked': node.expanded,
        'tree-node__row-left__icon-active': node.id === _vm.$attrs.checkedId
      },
      attrs: {
        "color": "no",
        "size": "10",
        "name": "play"
      }
    }) : _vm._e()], 1), _vm._v(" "), _c('div', {
      staticClass: "tree-node__row-left__text",
      class: {
        'tree-node__row-left__text-checked': node.id === _vm.$attrs.checkedId
      }
    }, [_vm._t("treeNode", [_vm._v("\n            " + _vm._s(node.name) + "\n          ")], {
      "node": node,
      "attrs": _vm.$attrs
    })], 2)]), _vm._v(" "), _vm.$attrs.multiple ? _c('div', {
      staticClass: "tree-node__row-right"
    }, [_c('ks-checkbox', {
      attrs: {
        "value": _vm.$listeners.getItemCheckedStatus(node.id),
        "shape": "square",
        "icon-size": "14px"
      },
      on: {
        "click": function click($event) {
          $event.stopPropagation();
          return _vm.$listeners.nodeChecked(node);
        }
      }
    })], 1) : _vm._e()]), _vm._v(" "), node.children && node.children.length ? _c('div', {
      staticClass: "tree-node__children"
    }, [node.expanded || _vm.$attrs.expandedList.indexOf(node.id) > -1 ? _c('tree-node', _vm._g(_vm._b({
      attrs: {
        "tree-data": node.children
      },
      scopedSlots: _vm._u([{
        key: "treeNode",
        fn: function fn(ref) {
          var node = ref.node;
          var attrs = ref.attrs;
          return [_vm._t("treeNode", null, {
            "node": node,
            "attrs": attrs
          })];
        }
      }], null, true)
    }, 'tree-node', _vm.$attrs, false), _vm.$listeners)) : _vm._e()], 1) : _vm._e()]);
  }), 0);
};

var __vue_staticRenderFns__ = [];
export default {
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__,
  props: ['treeData'],
  name: 'tree-node',
  components: {
    ksCheckbox: ksCheckbox,
    ksIcon: ksIcon
  }
};