<template>
  <div>
    <el-input v-if="!realStr" disabled clearable v-model="str">
      <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-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">
				 	<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 == '4'">
				 		 				<i class="fa fa-building"></i>
				 		 				<span>&nbsp;{{node.label}}</span>
				 		 			</div>
				 			  <div v-if="data.alias == 'son'">
				 				<i class="fa fa-user-circle"></i>
				 				<span>&nbsp;{{node.label}}</span>
				 			</div>
				 		 </span>
      </el-tree>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
	import {TreeNodeMt} from '../../api/sys/public'
  export default {
    name: "apartment-tree",
		props: {
			str: {
			  type: String,
			  default: ''
			},
			isClear:{
				type:Boolean,
				default:false
			}
		},
    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: 'error'
					})
					return false
				}else{
					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.realStr === '' && this.str === ''){
					this.$message({
						message: '无法清除(未选择商户)',
						type: 'error'
					})
					return false
				} */
				this.realStr=''
				this.str=''
				//this.$emit('clearInput')
			}
    },
    mounted () {
			//this.strr = this.str
      TreeNodeMt({depType:''}).then(res=>{
        this.treeData = JSON.parse(res.msgDat)
      })
    },


  }
</script>

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

</style>