<template>
    <div>
        <el-input v-if="!realStr" disabled clearable v-model="strr">
            <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">
				 <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 { TreeNodeCard } from '../../api/sys/public'

  export default {
    name: "apartment-tree",
    props: {
      strr: {
        type: String,
        default: ''
      },
      isClear:{
        type:Boolean,
        default:false
      },
      isCreatOrEdit:{
        type:Boolean,
        default:true
      },
      depType:{
        type:String,
        default:''
      }
    },
    data () {
      return {
        treeData: [],
        filterText:'',
        realStr:'',
        dialogVisible:false,
        defaultProps: {
          children: 'children',
          label: 'name'
        },
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      },
    },
    methods:{
      handleNodeClick(data) {
        if(data.alias !== 'user'){
          this.$message({
            message: '请选择员工',
            type: 'error'
          })
          return false
        }else{
          this.realStr = data.name
          this.dialogVisible = false
          // console.log(data)
          this.$emit('depNm',data.depNm)
          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 () {
      //this.strr = this.str
      if(this.depType==="student"){
        TreeNodeCard({depType:'JG002'}).then(res=>{
          this.treeData = JSON.parse(res.msgDat)
        })
      }else{
        TreeNodeCard({depType:'JG001'}).then(res=>{
          this.treeData = JSON.parse(res.msgDat)
        })
      }
    },
    watch:{
      'depType':function(val){
        if(val === 'student'){
          TreeNodeCard({depType:'JG002'}).then(res=>{
            this.treeData = JSON.parse(res.msgDat)
          })
        }else if(val === 'teacher'){
          TreeNodeCard({depType:'JG001'}).then(res=>{
            this.treeData = JSON.parse(res.msgDat)
          })
        }
      },
    }

  }
</script>

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

</style>