<template>
  <div
    class="el-treeSelect"
    style="position:relative"
    v-clickoutside="closeDropdown"
  >
    <div :class="wrapCls" @click.stop="openDropdown" ref="input-area">
      <el-scrollbar
        ref="scrollbar"
        tag="ul"
        wrap-class="el-select-dropdown__wrap"
        view-class="el-select-dropdown__list"
      >
        <ul class="drop-list">
          <li v-for="(item, index) in selectBusinessList" :key="index">
            <span>{{ item['label'] }}</span>
          </li>
        </ul>
      </el-scrollbar>
      <span
        v-show="!selectBusinessList.length"
        style="
          padding-left: 16px;
          position: absolute;
          top: 0;
          color: #bfc6d0;
          font-size: 13px;
        "
        >{{ placeholder }}</span
      >
      <span
        v-if="selectBusinessList.length && !disable"
        class="clear-selected"
        @click.stop="clear"
      >
        <el-icon class="el-icon-error"></el-icon>
      </span>
    </div>
    <div class="dropdownCls" ref="dropdown">
      <el-scrollbar
        v-show="open"
        tag="ul"
        wrap-class="el-select-dropdown__wrap"
        view-class="el-select-dropdown__list"
      >
        <div class="filter-input" style="padding: 0 15px 8px">
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText"
          ></el-input>
        </div>
        <el-tree
          v-model="selected"
          :filter-node-method="filterNode"
          ref="businessTree"
          node-key="dataId"
          @check-change="handleCheckChange"
          :data="dataTree"
          show-checkbox
          accordion
          highlight-current
        ></el-tree>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
import Clickoutside from 'ns-element/src/utils/clickoutside';
export default {
  name: 'ManagerTreeSelect',
  componentName: 'ManagerTreeSelect',
  directives: { Clickoutside },
  model: {
    prop: 'businessId',
    event: 'change'
  },
  props: {
    multiple: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: ''
    },
    businessId: Array,
    data: {
      type: Array,
      require: true
    },
    width: {
      type: String,
      default: ''
    },
    disable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectBusinessList: [],
      selected: this.businessId,
      filterText: '',
      filterText2: '',
      filterText3: '',
      prefix: 'treeSelect',
      open: false,
      dataTree: []
    };
  },
  computed: {
    wrapCls() {
      return [
        this.prefix,
        'treeSelect-enabled',
        {
          ['treeSelect-open']: this.open,
          ['select-tree-disable']: this.disable
        }
      ];
    }
  },
  watch: {
    filterText(val) {
      this.$refs.businessTree.filter(val);
    },
    filterText2(val) {
      this.$refs.businessTree2.filter(val);
    },
    filterText3(val) {
      this.$refs.businessTree3.filter(val);
    },
    selectBusinessList(val) {
      const label = val.map(arr => arr.label).join(',');
      this.$emit('translate', label);
    },
    data: {
      handler(val) {
        if (!this.multiple) {
          this.iterateTree(val, obj => {
            if (obj.children && obj.children.length !== 0) {
              obj.disabled = true;
            } else {
              obj.disabled = false;
            }
          });
        }
        this.dataTree = val;
      },
      deep: true,
      immediate: true
    },
    businessId: {
      handler(val) {
        if (this.$refs['businessTree']) {
          this.setCheckedKeys(val);
        }
      }
    }
  },
  methods: {
    iterateTree(tree, callback) {
      tree.forEach(obj => {
        callback(obj);
        if (obj.children && obj.children.length !== 0) {
          this.iterateTree(obj.children, callback);
        }
      });
    },
    openDropdown() {
      if (!this.disable) this.open = !this.open;
    },
    closeDropdown() {
      this.open = false;
    },
    filterNode(value, data, node) {
      if (!value) {
        node.expanded = false;
        return true;
      }
      return data.label.indexOf(value) !== -1;
    },
    filterNode2(value, data, node) {
      if (!value) {
        node.expanded = false;
        return true;
      }
      return data.label.indexOf(value) !== -1;
    },
    filterNode3(value, data, node) {
      if (!value) {
        node.expanded = false;
        return true;
      }
      return data.label.indexOf(value) !== -1;
    },
    setCheckedKeys(val) {
      this.$refs['businessTree'].setCheckedKeys(val);
      this.selectBusinessList = this.$refs['businessTree'].getCheckedNodes(true);
      this.selected = this.$refs['businessTree']
        .getCheckedNodes(true)
        .map(obj => obj.dataId);
    },
    handleCheckChange(val, selectedNode, selectedLeaf) {
      if (selectedNode && !this.multiple) {
        this.setCheckedKeys([val.dataId]);
      }
      this.selectBusinessList = this.$refs['businessTree'].getCheckedNodes(true);
      // this.$emit('check-change', val, selectedNode, selectedLeaf);
      this.selected = this.$refs['businessTree']
        .getCheckedNodes(true)
        .map(obj => obj.dataId);
      this.$emit('change', this.selected);
    },
    clear() {
      this.$refs.businessTree.setCheckedKeys([]);
      this.selectBusinessList = [];
      this.$emit('clear');
      this.$emit('change', []);
    }
  },
  mounted() {
    if (this.businessId) {
      this.setCheckedKeys(this.businessId);
    }
  }
};
</script>
