<template>
  <div>
    <el-input v-if="!realStr" disabled clearable v-model="str">
      <el-button @click="visibleClick" slot="append" icon="el-icon-search"/>
			<el-button v-if="isClear" @click="clearApartment" type="success" slot="append" icon="el-icon-delete" />
    </el-input>
    <el-input v-if="realStr" disabled clearable v-model="realStr">
      <el-button @click="visibleClick" slot="append" icon="el-icon-search"/>
			<el-button v-if="isClear"  @click="clearApartment" type="success" slot="append"  icon="el-icon-delete" />
    </el-input>
    <el-dialog
            title="部门选择"
            :modal="false"
            :visible.sync="dialogVisible"
            width="35%"
            center>
      <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText">
      </el-input>
       <el-tree style="height: 400px;overflow: auto" ref="tree" highlight-current :data="treeData"   node-key="id" :props="defaultProps" :filter-node-method="filterNode" @node-click="handleNodeClick">
				 <span class="icon-tree" slot-scope="{ node, data }">
				 		 			<div v-if="data.alias == 'top'">
				 		 				<i class="fa fa-university"></i>
				 		 				<span>&nbsp;{{node.label}}</span>
				 		 			</div>
				 		 			<div v-if="data.alias == 'JG001'">
				 		 				<i class="fa fa-building"></i>
				 		 				<span>&nbsp;{{node.label}}</span>
				 		 			</div>
				 		 				<div v-if="data.alias == 'JG002'">
				 		 				<i class="fa fa-building"></i>
				 		 				<span>&nbsp;{{node.label}}</span>
				 		 			</div>
				 		 				<div v-if="data.alias == 'JG003'">
				 		 				<i class="fa fa-users"></i>
				 		 				<span>&nbsp;{{node.label}}</span>
				 		 			</div>
				 		 			<div v-if="data.alias == 'user'">
				 		 				<i class="fa fa-users"></i>
				 		 				<span>&nbsp;{{node.label}}</span>
				 		 			</div>
				 		 </span>
      </el-tree>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
	import {TreeNodeOrg} from '../../api/sys/public'
  export default {
    name: "apartment-tree",
		props: {
			str: {
			  type: String,
			  default: ''
			},
			isClear:{
				type: String,
				default: ''
			}
		},
    data () {
      return {
        treeData: [],
        filterText:'',
        realStr:'', 
				strr:'',
        dialogVisible:false,
        defaultProps: {
          children: 'children',
          label: 'name'
        },
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      },
    },
    methods:{
      handleNodeClick(data) {
        if(data.alias == 'top'){
          this.$message({
            message: '请选择部门',
            type: 'warning'
          })
          return false
        }
        	 this.realStr = data.name
        	 this.dialogVisible = false
        	 this.$emit('input', data.id)
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      visibleClick () {
        this.dialogVisible = !this.dialogVisible
      },
			clearApartment(){
				if(this.isClear){
					if (this.realStr === '' && this.str === ''){
						this.$message({
							message: '无法清除(未选择部门)',
							type: 'error'
						})
						return false
					}
					this.realStr=''
					this.str=''
					this.$emit('clearInput')
				}
				
			}
    },
    mounted () {
			//this.strr = this.str
      TreeNodeOrg({depType:''}).then(res=>{
        this.treeData = JSON.parse(res.msgDat)
      })
    },


  }
</script>

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

</style>