<template>
  <div style=" position: relative;" class="">



    <el-tabs v-model="activeName2" type="card" @tab-click="handleClick" >
      <el-tab-pane label="部门管理" name="first">
        <DeptManage @pdate-call="loadDeptTreeData"></DeptManage>
      </el-tab-pane>
      <el-tab-pane label="组织架构图" name="second">
        <DeptTree ref="DeptTreeCom"></DeptTree>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
  import DeptManage from './DeptManage'
  import DeptTree from './DeptTree'

  export default {
    components: {DeptManage, DeptTree},
    data() {
      return {
        activeName2: 'first'
      }
    },
    methods: {
      loadDeptTreeData(){

      },
      handleClick(tab, event) {
        this.$refs['DeptTreeCom'].loadOrgData()
        console.log(tab, event)
      }
    }
  }
</script>

<style>


  .paiming .el-tabs__content {
    overflow: visible;
  }

  .paiming .el-tabs__nav-wrap {
    background-color: #5B8BF7;
    padding: 3px 3px 0 3px;
    border-radius: 3px 3px 0 0;
  }

  .paiming .el-tabs__item {
    color: #fff;
    border: none;
    font-weight: normal;
  }

  .paiming .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: none;
  }

  .paiming .el-tabs--card > .el-tabs__header .el-tabs__item {
    border: none;
  }

  .paiming .is-active {
    background-color: #fff;
    color: rgba(96, 98, 102, 1);
    border-radius: 3px 3px 0 0;
  }

  .paiming .el-tabs__item.is-active {
    color: rgba(96, 98, 102, 1);
  }

  .el-tabs__header {
    margin: 0;
  }
</style>
