<template>
    <div class="left-tree" v-show="showTree">
        <bc-authority-tree tree-type="common" :ztreeNameShow="true" :url="url" :params="treeParam" :reload.sync="reload"
                           :show-icon="true" :show-line="true"
                           :height="650" @onClick="treeClick" :selectedType="selectedType" :selected-id="selectedId"></bc-authority-tree>
      </div>
</template>
<script>
/*
    使用实例，引入之后需要把右边内容添加ID ”idTreeRight“
    <div>
        <leftTree @treeClick="treeClick"/>
        <div id="idTreeRight" >
            右边内容
        </div>
    </div>
*/
export default {
    name:'bcLeftTree',
    props:{
        controlTree:{ // 是否控制树，传false不控制会一直显示
            type:Boolean,
            default:true
        },
        url:{
            type:String,
            default:'api/v1/institutionCompany/tree/'
        },
        reload:{
            type:Boolean,
            default:false
        },
        treeParams:{
            type:Object,
            default:()=>{
                return {
                    isDepart: '0'
                }
            }
        },
      selectedId:{
          type:String,
        default:'first'
      },
      selectedType:{
          type:Array,
          default:()=>{
            return []
          }
      }
    },
    data(){
        return{
            showTree:false,
            treeParam: {isDepart: '0'},
            userInfo:{},
        }
    },
    methods: {
      treeClick(event, treeId, treeNode) {
          this.$emit('treeClick',event, treeId, treeNode)
      },
    },
    created(){
      this.userInfo = this.$userUtil.getCurrentObject();
      this.treeParam.areaId = this.userInfo.areaId;
      if(this.userInfo.userType === '0' || this.userInfo.userType === '1' || this.userInfo.userType === '2'){//业务员和人社局和组织部
        this.treeParam.areaId = this.userInfo.areaId
      }
      this.treeParam = Object.assign(this.treeParam,this.treeParams)
    },
    mounted () {
         let rightdiv = document.getElementById('idTreeRight')
        if(this.controlTree){
            setTimeout(() => {
                let tree = document.getElementById('bc-tree')
                let tree2 = document.getElementById('bc-tree_3')
                let treeul = document.getElementById("bc-tree_1_ul")
                if(tree){
                    let lis= tree.getElementsByTagName("li")
                    if(lis.length>1){
                        this.showTree = true
                        if(rightdiv){
                            rightdiv.style.width="calc(100% - 240px)"
                            rightdiv.style.display="inline-block"
                        }
                    } else {
                        rightdiv.style.width="100%"
                    }
                } else if(tree2){
                    this.showTree = true
                    if(rightdiv){
                        rightdiv.style.width="calc(100% - 240px)"
                        rightdiv.style.display="inline-block"
                    }
                }else if(treeul){
                let lis= treeul.getElementsByTagName("li")
                if(lis.length>1){
                    this.showTree = true
                    if(rightdiv){
                    rightdiv.style.width="calc(100% - 240px)"
                    rightdiv.style.display="inline-block"
                    }
                } else {
                    rightdiv.style.width="100%"
                }
                }else {
                    this.showTree = false
                    if(rightdiv){
                        let idright=document.getElementsByClassName("right-div")
                        if(idright.length>0){
                            idright[0].left=0
                        }
                    }
                    rightdiv.style.width="100%"
                }
            }, 500);
        } else {
            this.showTree = true
            if(rightdiv){
                rightdiv.style.width="calc(100% - 240px)"
                rightdiv.style.display="inline-block"
            }
        }
    }
}
</script>
<style>
.left-tree{
    width: 240px;
    border-right: 1px solid #e8e8e8;
    padding: 0 8px;
    min-height: 100%;
    display: inline-block;
}
</style>
