<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="35%"
            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" :default-expanded-keys="['org']" node-key="alias" ref="treeData" :data="treeData" :filter-node-method="filterNode" :props="defaultProps" @node-click="handleNodeClick">
				<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" @node-click="handleNodeClick">
					 <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-dialog>
  </div>
</template>
<script type="text/javascript">
  //import { getEmployeeByTree,EmpTreeAll } from '../../../../api/att/leave'
  export default {
    name: "saff-tree",
    data () {
      return {
				falg:true,
				empLoading:false,
				empTreeAll:[],
        treeData: [{
				  title:'请稍候',
				  value:-1
				}],
        filterText:'',
        realStr:'',
				// str:'',
        dialogVisible:false,
        defaultProps: {
          children: 'data',
          label: 'title'
        },
      }
    },
     props:{
      str:{type:String}
     },
    watch: {
      filterText(val) {
        /* this.$refs.treeData.filter(val); */
				if (val) {
				     this.falg=true
				}
      },
    },
    methods:{
			searchClick(){
				/* this.falg=false
				 EmpTreeAll({
				  params:this.filterText
				}).then(res=>{
				  this.empTreeAll = JSON.parse(res.data)
				}) */
			},
      handleNodeClick(data) {
				if(data.alias == 'emp'){
					this.realStr = data.title
					this.dialogVisible = false
					this.$emit('input', data.value)
				}else{
					this.$message({
						message:'请选择员工',
						type: 'error'
					})
					return false
				}
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.title.indexOf(value) !== -1;
      },
      visibleClick () {
        this.dialogVisible = !this.dialogVisible
      },
			cleanName () {
				this.str = ''
				this.realStr = ''
			},
			loadEmpTree(node,resolve){
				/* if (node.level === 0) {
				      return resolve (this.treeData)
				}
				if (node.level === 1) {
				       return resolve (this.treeData[0].data)
				    }
				    if (node.level > 1) {
				      if (node.data.alias === 'emp') {
				        return resolve([])
				  }
				getEmployeeByTree({
					orgId:node.data.value
				  }).then(res=>{
						console.log(res)
					let temp = JSON.parse(res.data) || []
				        if (node.data.data.length) {
				          temp = temp.concat(node.data.data)
				        }
				        return resolve (temp)
				      })
				    } */
			}
    },
    mounted () {
			this.empLoading=true
    /*  getEmployeeByTree().then(res=>{
        this.treeData = JSON.parse(res.data)
				this.empLoading=false
      }) */
    },
  }
</script>

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

</style>