<template>
  <basic-container>
    <div class="content">
      <leftMenu @select="select" />
      <div class="right-content">
        <el-tabs v-model="activeName">
          <el-tab-pane label="服务承接" name="taskCenter"> </el-tab-pane>
          <el-tab-pane label="其他" name="other"></el-tab-pane>
        </el-tabs>
        <div class="content-box">
          <el-scrollbar style="height:100%" class="content-scroll-bar">
            <component :deptId="deptId" :is="activeName" />
          </el-scrollbar>
        </div>
      </div>
    </div>
  </basic-container>
</template>

<script>
import leftMenu from "@/views/components/teamManagement/leftMenu";
import taskCenter from "./individualHandlesTasksComponents/taskCenter";
import other from "./individualHandlesTasksComponents/other";

export default {
  components: {
    leftMenu,
    taskCenter,
    other
  },
  data() {
    return {
      deptId: "",
      activeName: "taskCenter"
    };
  },
  methods: {
    select(info) {
      if (this.deptId !== info.deptId) {
        this.activeName = "taskCenter";
        this.deptId = info.deptId;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  display: flex;
}
.right-content {
  margin-left: 10px;
  flex: 1;
  overflow: auto;
}
</style>
