<template>
  <div>
  <el-input placeholder="请输入内容" v-model="filTree" :disabled="true" on-change="filTreeChange">
    <template slot="prepend"><div id="clean" class="el-icon-close" @click="clean" style="cursor:pointer;"></div></template>
    <el-button slot="append" icon="menu" @click="expendClk"></el-button>
  </el-input>
    <div id="tree" v-show="expend">
      <_TREE :search=searchable :data='treeData' :node-click="showTree" :nodeKey="nodeKey"
             :showCheckBox=showCheckBox :expandAll=expandAll ref='tree' :highlight='true' :accordion="accordion"
             :defaultCheckedKeys="defaultCheckedKeys"></_TREE>
    </div>

</div>
</template>
<script>
  import _TREE from '@/views/components/Tree/Tree.vue'
  import api from '@/api'
  import log from '@/log'
  import {getUser} from '@/config/info'
  export default {
    props: {
      filterVal: {
        type: String,
        default: ''
      } // 外界传过来的值
    },
    data () {
      return {
        expend: false,
        input3: '',
        input4: '',
        filTree: '',
        select: '',
        nodeKey: 'id',
        defaultCheckedKeys: [],
        expandAll: true,
        searchable: true, // 是否带搜索框
        showCheckBox: false, // 是否带复选框
        accordion: true,
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    mounted () {
      this.init()
    },
    components: {
      _TREE
    },
    methods: {
      init () {
        let orgTreeparam = {}
        orgTreeparam.orgrelTypeId = 2
        orgTreeparam.treeRoot = getUser().companyId
        console.log('orgTreeparam:' + JSON.stringify(orgTreeparam))
        api.requestJava('POST', BasePath.ORGUNIT_TREE, orgTreeparam)
          .then((request) => {
            this.filTree = this.filterVal
            if (Number(request.data.code) === 200) {
              this.treeData = request.data.data
            } else if (Number(request.data.code) === 401) {
              this.$notify.error({ title: '查询失败', message: request.data.message })
            } else {
              throw new Error(JSON.stringify(request))
            }
          })
          .catch((err) => {
            this.$store.commit('TOGGLE_LOADING')
            let culprit = this.$route.name
            log.work(err, culprit)
          })
      },
      filterNode (value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      clean () {
        this.filTree = ''
      },
      $$ (name) {
        return document.getElementsByClassName(name)
      },
      expendClk () {
        this.expend = !this.expend
        if (this.expend) {
          for (var i = 0; i < this.$$('.el-tree-node__label').length; i++) {
            if (this.$$('.el-tree-node__label')[i].innerText.trim() === this.filTree) {
              this.$$('.el-tree-node__label')[i].parentNode.parentNode.className('is-current')
            }
          }
        }
      },
      showTree (data) {
        this.filTree = data.label
        this.expend = !this.expend
        this.$emit('on-change', JSON.stringify(data))
      },
      filTreeChange (msg) {
        console.log(msg)
      }
    },
    watch: {
      filterVal (val, oldval) {
        console.log('update', val)
        this.filTree = this.filterVal
      }
    }
}
</script>
<style>

</style>

