<template>
  <Select
    ref="select"
    :clearable="true"
    :transfer="true"
    :placeholder="placeholder"
    @on-change="handleChange"
    @on-clear="onClear"
  >
<!--    <Option :value="value" :label="label">-->
      <material-tree ref="myTree" @on-select="onSelect" :tree-data="treeData"></material-tree>
<!--    </Option>-->
  </Select>
</template>

<script>
import MaterialTree from './material-tree'
export default {
  name: 'my-tree-select',
  data () {
    return {
      tree: []
    }
  },
  components: {
    MaterialTree
  },
  props: {
    placeholder: {
      type: String,
      default: '请选择'
    },
    treeData: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    init (val) {
      this.handleData(val, this.treeData)
    },
    handleData (val, data) {
      for (const item of data) {
        if (val === item.value) {
          this.$refs.select.$emit('on-select-selected', {
            value: item.value,
            label: item.name
          })
          break
        }
        if (item.children) {
          this.handleData(val, item.children)
        }
      }
    },
    onSelect (data) {
      console.log(data)
      this.value = data.value
      this.$refs.select.$emit('on-select-selected', {
        value: data.value,
        label: data.name
      })
      this.$emit('input', data.value)
    },
    handleChange (selected) {
      this.$emit('input', selected)
    },
    onClear () {
      this.$refs.myTree.clear()
    }
  }
}
</script>

<style scoped>

</style>
