<template>
    <div>
        <el-input v-if="!realStr" disabled clearable v-model="str">
            <el-button @click="visibleClick" slot="append" icon="el-icon-search" v-if="isCreatOrEdit"/>
            <div v-if="isClear">
                <el-button @click="clearApartment" type="success" slot="append" icon="el-icon-delete" />
            </div>
        </el-input>
        <el-input v-if="realStr" disabled clearable v-model="realStr">
            <el-button @click="visibleClick" slot="append" icon="el-icon-search"/>
            <div v-if="isClear">
                <el-button  @click="clearApartment" type="success" slot="append"  icon="el-icon-delete" />
            </div>
        </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"  default-expand-all>
				   <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 == 'campus'">
          	<i class="fa fa-building"></i>
          	<span>&nbsp;{{node.label}}</span>
          </div>
             <div v-if="data.alias == 'building'">
          	<i class="fa fa-university"></i>
          	<span>&nbsp;{{node.label}}</span>
          </div>
            	<div v-if="data.alias == 'room'">
				 		 				<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 { roomTree } from '../../api/sys/public'

  export default {
    name: "apartment-tree",
    props: {
      str: {
        type: String,
        default: ''
      },
      isClear:{
        type:Boolean,
        default:false
      },
      isCreatOrEdit:{
        type:Boolean,
        default:true
      }
    },
    data () {
      return {
        treeData: [],
        filterText:'',
        realStr:'',
        dialogVisible:false,
        defaultProps: {
          children: 'children',
          label: 'userNm'
        },
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      },
    },
    methods:{
      handleNodeClick(data) {
        if(data.alias !== 'room'){
          this.$message({
            message: '请选择房间',
            type: 'error'
          })
          return false
        }else{
          this.realStr = data.name
          this.dialogVisible = false
          // console.log(data)
          // this.$emit('depNm',data.name)
          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.realStr === '' && this.str === ''){
           this.$message({
             message: '无法清除(未选择部门)',
             type: 'error'
           })
           return false
         }*/
        this.realStr=''
        this.str=''


        this.$emit('clearInput')
      },
      cleanName() {
        this.str = "";
        this.realStr = "";
      },
    },
    mounted () {
        roomTree({}).then(res=>{
          this.treeData = JSON.parse(res.msgDat)
        })
    },


  }
</script>

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

</style>