<template>
  <div style=" background-color: #fff; padding:15px;">
    <el-scrollbar wrap-class="org-chart-wrapper" :native="false">
      <vo-basic
        :data="orgData"
        :pan="true"
        :toggleCollapse="false" ref="vo-basic-com">
      </vo-basic>
          <!-- :nodeContent="titleData" -->
    </el-scrollbar>
  </div>
</template>
<script>
  import "@/styles/org-chart-style.css";
  import {VoBasic} from 'vue-orgchart'

  export default {
    components: {VoBasic},
    data() {
      return {
        profile: this.$store.getters.user_info,
        orgData: {},
        // titleData: 'title'
      }
    },
    methods: {
      //获取组织架构
      loadOrgData() {

        if(document.getElementById('chart-container')){
          document.getElementById('chart-container').innerHTML = ''
        }

        var self = this
        this.$http('get','/integral.php/ajax_request_common/get_org_tree',{site_id: this.profile.site_id}).then(function (response) {
          if (response.status == 200) {
            let jsonData = response.data
            try {
              self.orgData = {
                name: '公司',
                title: jsonData.top_manager.join(","),
                children: jsonData.tree
              }
            } catch (err) {
              console.log(err)
            }
          }
        }).catch(function (error) {
          console.log(error)
        })
      }
    },
    created() {
      this.loadOrgData()
    },
    mounted(){
      // this.$nextTick(()=>{
      //   let bootNode = document.querySelectorAll('.node')[0]
      //   console.log('bootNode')
      //   console.log(bootNode)
      // })
      // setTimeout(()=>{
      //     let bootNode = document.querySelectorAll('.node')[0]
      //     let bootContent = bootNode.children[1]
      //     bootNode.removeChild(bootContent)
      //   console.log('bootNode')
      //   console.log(bootNode)
      //   console.log(bootContent)
      // },1000)
    }
  }
</script>
