<template>
  <div>
    <el-input v-if="!realStr" disabled v-model="str">
      <el-button @click="visibleClick" slot="append" icon="el-icon-search"/>
    </el-input>
    <el-input v-if="realStr" disabled v-model="realStr">
      <el-button @click="visibleClick" slot="append" icon="el-icon-search"/>
    </el-input>
    <el-dialog title="员工选择" :modal="false" :visible.sync="dialogVisible" width="600px" center>
      <div v-loading="empLoading" element-loading-text="正在加载员工数据">
        选择员工
        <el-input placeholder="输入员工姓名或者员工工号" v-model="filterText">
          <el-button @click="searchClick" slot="append" icon="el-icon-search"/>
        </el-input>
      </div>
      <div v-show="falg === true">
        <el-tree
          :load="loadEmpTree"
          lazy
          style="height: 400px;overflow: auto"
          ref="treeData"
          :default-expanded-keys="['org']"
          node-key="alias"
          :data="empTree"
          :filter-node-method="filterNode"
          :props="defaultProps"
          show-checkbox
        >
          <span class="icon-tree" slot-scope="{ node, data }">
            <div v-if="data.alias == 'org'">
              <i class="fa fa-university"></i>
              <span>&nbsp;{{node.label}}</span>
            </div>
            <div v-if="data.alias == 'dept'">
              <i class="fa fa-users"></i>
              <span>&nbsp;{{node.label}}</span>
            </div>
            <div v-if="data.alias == 'emp'">
              <i class="fa fa-user-circle"></i>
              <span>&nbsp;{{node.label}}</span>
            </div>
          </span>
        </el-tree>
      </div>
      <div v-show="falg === false">
        <el-tree
          style="height: 400px;overflow: auto"
          ref="empTreeAll"
          default-expand-all
          :data="empTreeAll"
          :filter-node-method="filterNode"
          :props="defaultProps"
          show-checkbox
        >
          <span class="icon-tree" slot-scope="{ node, data }">
            <div v-if="data.alias == 'org'">
              <i class="fa fa-university"></i>
              <span>&nbsp;{{node.label}}</span>
            </div>
            <div v-if="data.alias == 'dept'">
              <i class="fa fa-users"></i>
              <span>&nbsp;{{node.label}}</span>
            </div>
            <div v-if="data.alias == 'emp'">
              <i class="fa fa-user-circle"></i>
              <span>&nbsp;{{node.label}}</span>
            </div>
          </span>
        </el-tree>
      </div>
      <el-button style="margin-left: 450px;" @click="handleNodeClick()">确 定</el-button>
    </el-dialog>
  </div>
</template>
<script type="text/javascript">
//import { getEmployeeByTree, EmpTreeAll } from "../../../../api/att/leave";
export default {
  name: "saff-tree",
  data() {
    return {
      falg: true,
      list: [],
      list_1: [],
      empTreeAll: [],
      empLoading: false,
      filterText: "",
      realStr: "",
      // str:'',
      dialogVisible: false,
      defaultProps: {
        children: "data",
        label: "title"
      },
      empTree: [
        {
          title: "请稍候",
          value: -1
        }
      ]
    };
  },
  props: {
    str: { type: String }
  },
  watch: {
    filterText(val) {
      // this.$refs.treeData.filter(val);
      if (val) {
        this.falg = true;
      }
    }
  },
  methods: {
    handleNodeClick() {
     /* if (this.filterText === "") {
        this.realStr = this.$refs.treeData
          .getCheckedNodes()
          .map(item => item.title)
          .join(",");
        let temp = this.$refs.treeData.getCheckedNodes();
        let result = [];
        temp.forEach(element => {
          if (element.alias === "emp") {
            result.push(element);
          }
        });
        this.$emit("input", result.map(item => item.value).join(","));
      } else {
        this.list = this.$refs.empTreeAll.getCheckedNodes();
        console.log(this.list)
        let result = [];
        this.list.forEach(element => {
          if (element.alias === "emp") {
            result.push(element);
          }
        });
        console.log(result)
        this.realStr = result.map(item => item.title).join(",")
        this.$emit("input", result.map(item => item.value).join(","));

        //  for(var i=0;i<this.list.length;i++){
        // 	 if(this.list[i].alias === 'emp'){
        // 		 this.realStr=this.list[i].title
        // 		 this.$emit('input', this.list[i].value)
        // 	 }
        //  }
      } */
      this.dialogVisible = false;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },
    searchClick() {
    /*  this.falg = false;
      EmpTreeAll({
        params: this.filterText
      }).then(res => {
				this.treeTraverse(res.data)
        this.empTreeAll = JSON.parse(res.data);
      }); */
    },
    visibleClick() {
      this.dialogVisible = !this.dialogVisible;
    },
    cleanName() {
      this.str = "";
      this.realStr = "";
		},
		treeTraverse (node) {
        if (!node || !node.data) {return}
        if (node.alias === 'emp') {
          node.disabled = false
        } else {
          node.disabled = true
        }
        node.data.forEach((item) => {
          this.treeTraverse(item)
        })
      },
    loadEmpTree(node, resolve) {
      if (node.level === 0) {
        return resolve(this.empTree);
      }
      if (node.level === 1) {
				this.treeTraverse(this.empTree[0])
        return resolve(this.empTree[0].data);
      }
      if (node.level > 1) {
        if (node.data.alias === "emp") {
          return resolve([]);
        }
        getEmployeeByTree({
          orgId: node.data.value
        }).then(res => {
          let temp = JSON.parse(res.data) || [];
          if (node.data.data.length) {
            temp = temp.concat(node.data.data);
					}
					this.treeTraverse(temp)
          return resolve(temp);
        });
      }
    }
  },
  mounted() {
    this.empLoading = true;
    /* getEmployeeByTree().then(res => {
      this.empTree = JSON.parse(res.data);
      this.empLoading = false;
    }); */
  }
};
</script>

<style lang="sass" rel="stylesheet/sass" scoped>

</style>