<template>
  <el-row :gutter="24">
    <el-col :span="24">
      <div class="grid-content bg-purple">
        <el-tabs v-model="activeName2" type="card" v-if="manager_type>0">
          <el-tab-pane label="全部排名" name="RankEntire">
            <el-row style="background-color: #fff;">
              <el-col :lg="12">
                <RankEntire></RankEntire>
              </el-col>

              <el-col :lg="12" v-show="manager_type > 0">
                <RankDept></RankDept>
              </el-col>
              <el-col :lg="12" v-show="manager_type == 0">
                <PointRankDepartment></PointRankDepartment>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="管理者排名" name="RankManager">
            <RankManager></RankManager>
          </el-tab-pane>
          <el-tab-pane label="职位排名" name="RankJob">
            <RankJob></RankJob>
          </el-tab-pane>
        </el-tabs>

        <el-row v-if="manager_type==0" :gutter="24">
          <el-col :lg="12">
            <RankEntire></RankEntire>
          </el-col>

          <el-col :lg="12" v-show="manager_type == 0">
            <PointRankDepartment></PointRankDepartment>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>


<script>
import RankEntire from "./RankEntire";
import RankManager from "./RankManager";
import RankDept from "./RankDept";
import RankJob from "./RankJob";
import PointRankDepartment from "./PointRankDepartment";

export default {
  components: {
    RankEntire,
    RankManager,
    RankDept,
    RankJob,
    PointRankDepartment
  },
  data() {
    return {
      profile: this.$store.getters.user_info,
      manager_type: this.$store.getters.user_info.manager_type,
      activeName2: "RankEntire",
      activeName: "RankDept"
    };
  },
  methods: {
    handleClick(tab, event) {
      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);
}
</style>
