import create from "../utils/create"; // Components

import Icon from "../icon";
import Sidebar from "../sidebar";
import SidebarItem from "../sidebar-item";
import { addUnit } from "../utils/format/unit";
export default create({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      class: _vm.b(),
      style: {
        height: _vm.addUnit(_vm.height)
      }
    }, [_c('Sidebar', {
      class: _vm.b('nav'),
      attrs: {
        "activeKey": _vm.mainActiveIndex
      },
      on: {
        "change": _vm.onChange
      }
    }, _vm._l(_vm.items, function (item, index) {
      return _c('SidebarItem', {
        key: index,
        class: [_vm.b('nav-item'), item.className],
        attrs: {
          "dot": item.dot,
          "badge": item.badge,
          "title": item.text,
          "disabled": item.disabled
        }
      });
    }), 1), _c('div', {
      class: _vm.b('content')
    }, [_vm._t("content", _vm._l(_vm.subItems, function (item) {
      return _c('div', {
        key: item.id,
        class: ['vm-ellipsis', _vm.b('item', {
          active: _vm.isActiveItem(item.id),
          disabled: item.disabled
        })],
        on: {
          "click": function click($event) {
            return _vm.onClick(item);
          }
        }
      }, [_vm._v("\n        " + _vm._s(item.text) + "\n        "), _vm.isActiveItem(item.id) ? _c('Icon', {
        class: _vm.b('selected'),
        attrs: {
          "name": _vm.selectedIcon
        }
      }) : _vm._e()], 1);
    }))], 2)], 1);
  },
  components: {
    Icon: Icon,
    Sidebar: Sidebar,
    SidebarItem: SidebarItem
  },
  name: "tree-select",
  props: {
    max: {
      type: [Number, String],
      default: Infinity
    },
    items: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    height: {
      type: [Number, String],
      default: 300
    },
    activeId: {
      type: [Number, String, Array],
      default: 0
    },
    selectedIcon: {
      type: String,
      default: "check"
    },
    mainActiveIndex: {
      type: [Number, String],
      default: 0
    }
  },
  methods: {
    addUnit: addUnit,
    isActiveItem: function isActiveItem(id) {
      return this.isMultiple ? this.activeId.indexOf(id) !== -1 : this.activeId === id;
    },
    onChange: function onChange(index) {
      this.$emit("update:main-active-index", index);
      this.$emit("click-nav", index);
    },
    onClick: function onClick(item) {
      if (!item.disabled) {
        var newActiveId = item.id;

        if (this.isMultiple) {
          newActiveId = this.activeId.slice();
          var index = newActiveId.indexOf(item.id);

          if (index !== -1) {
            newActiveId.splice(index, 1);
          } else if (newActiveId.length < this.max) {
            newActiveId.push(item.id);
          }
        }

        this.$emit("update:active-id", newActiveId);
        this.$emit("click-item", item);
      }
    }
  },
  computed: {
    isMultiple: function isMultiple() {
      return Array.isArray(this.activeId);
    },
    subItems: function subItems() {
      var selectedItem = this.items[+this.mainActiveIndex] || {};
      return selectedItem.children || [];
    }
  }
});