<template>
  <d2-container class="orgDetail">
    <headerLayout active="4"></headerLayout>
    <div class="org-wrapper">
      <div class="org-title d-flex jc-between">
        <label>组织架构</label>
        <span @click="goBack">&lt; 返回</span>
      </div>
        <treeChart class="org-content" :message="organList" idstr="orgCharts"/>
    </div>
  </d2-container>
</template>

<script>
import headerLayout from '@/components/headerLayout/index' // 公共头部
import treeChart from '@/components/echarts/treeChart'
import * as API_ORGAN from '@/api/con.organ'
export default {
  components: { headerLayout, treeChart },
  data () {
    return {
      organList: {}
    }
  },
  mounted () {
    this.getDeptTree()
  },
  methods: {
    // 获取组织机构
    async getDeptTree () {
      const _data = await API_ORGAN.getDeptTree()
      this.organList = _data.data
    },
    goBack () {
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.orgDetail {
  .org-wrapper {
    padding: .5rem 1rem;
  }
  .org-title {
    width: 100%;
    height: .54rem;
    font-size: .24rem;
    line-height: 1.5;
    color: $color-primary;
    border-bottom: .02rem solid $color-primary;
    margin-bottom: .5rem;
    span {
      cursor: pointer;
    }
  }
  .org-content {
    text-align: center;
    color: #fff;
    font-size: .14rem;
    width: 100%;
    height: 7.89rem;
    margin: 0 auto;
  }
}
</style>