<template>
  <div class="navigation">
    <div class="filterArea">
      <el-input
        placeholder="输入关键字进行过滤"
        @keyup.enter.native="handleEnter"
        v-model="filterText">
        <template slot="prepend" ><i class="el-icon-search"></i></template>
      </el-input>
    </div>
    <div class="tree radioTree">
      <el-tree
        class="filter-tree"
        :data="treeData"
        :props="defaultProps"
        default-expand-all
        node-key="organguid"
        :filter-node-method="filterNode"
        highlight-current
        accordion
        :expand-on-click-node="true"
        @node-click="handleNodeClick"
        @current-change="handleNodeLocationClick"
        ref="tree2">
      </el-tree>
    </div>
  </div>
</template>

<script>
  import Api from '@/api/index.js'

  export default {
    props: {
      operateOnoff: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        filterText: '',
        // treeData: [],
        treeData: [{ 
          id: '0',
          organguid: '',
          parentguid: '',
          organname: '机构',
          organtype: '0',
          organdescription: '',
          status: '1',
          childOrganinfoinfos: []
        }],

        defaultProps: {
          children: 'childOrganinfoinfos',
          label: 'organname'
        }
      }
    },
    computed: {
      gisopUserInfo () {
        return this.$store.state.gisopUserInfo
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree2.filter(val)
      },
      operateOnoff () {
        this.getOrganTree()
      }
    },
    mounted () {
      this.getOrganTree()
    },
    methods: {
      // 获取机构树
      getOrganTree () {
        Api.getOrganTree()
          .then(data => {
            if (data.status === 0) {
              this.treeData[0].childOrganinfoinfos = data.data
              
              this.$nextTick(() => {
                this.$refs.tree2.setCurrentKey(data.data[0].organguid)
                this.$emit('treeClick', data.data[0])
              })
            } else {
              this.$message({
                type: 'warning',
                message: '请求数据失败'
              })
            }
          }).catch(res => { 
            console.log('error:', res)
          })
      },
      filterNode(value, data) {
        if (!value) return true
        return data.organname.indexOf(value) !== -1
      },
      handleNodeLocationClick (data, node, self) { // 绑定点击节点父组件传递
        // console.log('node-click:', self);
        this.$emit('treeClick', data)
      },
      handleNodeClick(data) {
        // console.log(data);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .navigation {
    // display: flex;
    // flex-direction: column;
    width: 230px;
    // max-height: 100%;
    // height: 100%;
    padding: 12px 0;
    margin-right: 0;
    // float: left;
    flex: auto;
    overflow: auto;

    .filterArea {
      padding: 0 4px 10px;
    }

    .tree {
      display: flex;
      flex-direction: column;
      flex: 1;
      // overflow-y: auto;
    }
  }
</style>
