<template>
  <div class="mt-tab-router">
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane 
        :label="item.name"
        v-for = "(item, index) in list"
        v-bind:key ="index"
        :name="item.url"></el-tab-pane>
    </el-tabs>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        activeName: this.$route.path
      }
    },
    props: {
      list: Array
    },
    methods: {
      handleClick () {
        this.$router.replace(this.activeName)
      }
    }
  }
</script>
<style lang="less">
  .mt-tab-router{
    .el-tabs__nav-wrap{
      background: #EDF2F6;
    }
    .el-tabs__nav-prev,.el-tabs__nav-next{
      line-height: 50px;
      color:#fff;
      background:darken(#EDF2F6, 10%);
    }
    .el-tabs__active-bar{
      height: 50px;
      z-index: 0;
    }
    .el-tabs__item{
      padding: 5px 40px;
      height: 50px;
      &.is-active{
        color:#fff;
      }
    }
  }
</style>
