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



        <el-tabs v-model="activeName2" type="card" @tab-click="handleClick" v-if="manager_type != 0">
            <el-tab-pane label="员工排名" name="first" v-if="">
                <paiming></paiming>
                <a @click="$router.replace({ name: 'point_rank'})">更多>></a></el-tab-pane>
            <el-tab-pane label="管理者排名" name="second">
                <paiming2></paiming2>
                <a @click="$router.replace({ name: 'point_rank'})">更多>></a></el-tab-pane>
        </el-tabs>


      <el-tabs v-model="activeName2" type="card" @tab-click="handleClick" v-if="manager_type == 0">
        <el-tab-pane label="总排名" name="first" v-if="">
          <paiming_all></paiming_all>
          <a @click="$router.replace({ name: 'point_rank'})">更多>></a></el-tab-pane>
        <el-tab-pane label="部门排名" name="second">
          <paiming_department></paiming_department>
          <a @click="$router.replace({ name: 'point_rank'})">更多>></a></el-tab-pane>
      </el-tabs>





    </div>
</template>


<script>
    import paiming from './paiming'
    import paiming2 from './paiming2'
    import paiming_all from './paiming_all'
    import paiming_department from './paiming_department'

    export default {
        components: {paiming, paiming2, paiming_all, paiming_department},
        data() {
            return {
              manager_type:this.$store.getters.user_info.manager_type,
                activeName2: 'first'
            };
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    };
</script>

<style>
    .paiming a {
        position: absolute;
        z-index: 2;
        color: #fff;
        display: block;
        right: 10px;
        top: -50px;
        font-size: 16px;
    }

    .paiming a:hover {
        color: #fff;
    }

    .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>
