<template>
  <div class="" style="padding: 0 20px 20px 20px;">
    <div style="overflow: hidden;">
      <el-input
        suffix-icon="el-icon-search"
        v-model="filterText"
        placeholder="输入关键字进行过滤" size="small" style="width: 200px;">
      </el-input>
      <span style="color: #666; display: inline-block; padding-left: 20px;">当前选中：<span style="color: #000; font-size: 14px;" v-if="sedNode">{{sedNode.text}}</span></span>
      <el-button :disabled="!sedNode" @click="selectSubmit" type="primary" icon="el-icon-check" size="small" style="float: right;">确认选择</el-button>
    </div>
    <el-tree style="padding-top: 10px;"
      @current-change="currentChange"
      :data="data2"
      :props="defaultProps"
      :show-checkbox="showCheckbox"
      highlight-current
      default-expand-all
      :filter-node-method="filterNode"
      ref="tree2">
    </el-tree>
  </div>
</template>
<script>
export default {
  // parentId 父节点ID
  // extendParam 扩展参数，用于多次用到控制，原样emit到父组件
  // showCheckbox 多选控制，默认单选
  props: ['parentId', 'extendParam', 'showCheckbox'],
  data () {
    return {
      filterText: '',
      sedNode: null,
      data2: [],
      defaultProps: {
        children: 'children',
        label: 'text'
      }
    };
  },
  watch: {
    filterText (val) {
      this.$refs.tree2.filter(val);
    },
    parentId () {
      this.findDepartment();
    }
  },
  mounted () {
    this.findDepartment();
  },
  methods: {
    selectSubmit () {
      // deptSelectorEmit emit 事件
      this.$emit('deptSelectorEmit', this.sedNode);
    },
    currentChange (oData, nNode) {
      this.sedNode = oData;
    },
    filterNode (value, data) {
      if (!value) return true;
      return data.text.indexOf(value) !== -1;
    },
    findDepartment () {
      let _this = this;
      let memo1 = '20171218221814830158';
      if (this.parentId) {
        memo1 = this.parentId;
      }
      // 部门科室
      this.axios.post('/PbModelDbService/findAuthDepartmentCmdDb', [{'memo1': memo1}]).then(function (response) {
        if (response) {
          _this.data2 = response.data.data;
        }
      });
    }
  }
}
</script>
<style scoped>
</style>
