<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 show-checkbox style="height: 400px;overflow: auto" ref="tree" highlight-current :data="treeData"   node-key="id" :props="defaultProps" :filter-node-method="filterNode">
				 <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>
            <span slot="footer" class="dialog-footer">
     		    <zl-button @click="operInstanceEqu"/>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {TreeNodeStu} 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 {
                staLoading:false,
                treeData: [],
                filterText:'',
                realStr:'',
                dialogVisible:false,
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
            }
        },
        watch: {
            filterText(val) {
                console.log(val)
                this.$refs.tree.filter(val);
            },
        },
        methods:{
            handleNodeClick(data) {
                if(data.alias !== 'user'){
                    this.$message({
                        message: '请选择员工',
                        type: 'error',
                        duration:500
                    })
                    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 = "";
            },
            operInstanceEqu(){
				let temp = this.$refs.orgTree.getCheckedKeys()
				let arr = []
				temp.forEach((item,index)=>{
					arr.push(item)
				})
				this.form1.userIds = arr.map(item => item).join(',')
            }
        },
        mounted () {
            //this.strr = this.str
            if(this.depType==="student"){
                TreeNodeStu({depType:'JG002'}).then(res=>{
                    this.treeData = JSON.parse(res.msgDat)
                })
            }else{
                TreeNodeStu({depType:'JG001'}).then(res=>{
                    this.treeData = JSON.parse(res.msgDat)
                })
            }
        },
        watch:{
            'depType':function(val){
                if(val === 'student'){
                    TreeNodeStu({depType:'JG002'}).then(res=>{
                        this.treeData = JSON.parse(res.msgDat)
                    })
                }else if(val === 'teacher'){
                    TreeNodeStu({depType:'JG001'}).then(res=>{
                        this.treeData = JSON.parse(res.msgDat)
                    })
                }
            },
        }

    }
</script>

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

</style>
