<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 == 'fix02'">
				 		 				<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 == 'equi'">
				 		 				<i class="fa fa-users"></i>
				 		 				<span>&nbsp;{{node.label}}</span>
				 		 			</div>
				 		 </span>
            </el-tree>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">
  import {TreeNodeEqui} 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) {
        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
      TreeNodeEqui({depType:''}).then(res=>{
        this.treeData = JSON.parse(res.msgDat)
      })
    },


  }
</script>

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

</style>