<template>
  <div style="padding: 0 10px">
    <Tree
      ref="tree"
      :check-strictly="true"
      :data="treeData"
      class="tree-con"
      :multiple="false"
      @on-select-change="dataChange"
      @on-check-change="dataChange">
    </Tree>
  </div>
</template>

<script>
export default {
  name: 'material-tree',
  props: {
    treeData: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    handleData (data) {
      data.forEach(item => {
        item.checked = false
        if (item.children) {
          this.handleData(item.children)
        }
      })
    },
    clear () {
      this.handleData(this.treeData)
      this.$refs.tree.rebuildTree()
    },
    dataChange (arr, obj) {
      arr.forEach(item => {
        item.checked = false
      })
      obj.checked = true
      this.$emit('on-select', obj)
      this.$emit('on-select-selected', {
        value: obj.value,
        label: obj.label
      })
    }
  }
}
</script>

<style scoped>
/deep/ .ivu-tree-title {
  vertical-align: baseline;
}
</style>
