<template>
  <div class="distributionAd">
    <el-tabs v-model="activeName">
      <!-- <el-tab-pane label="分销用户" name="1">
        <userRank v-if="activeName == '1'"  />
      </el-tab-pane> -->
      <el-tab-pane label="分销员余额" name="2">
        <userBalanceList v-if="activeName == '2'"  />
      </el-tab-pane>
      <!-- <el-tab-pane label="带货" name="3">
        <InfluenceList v-if="activeName == '3'"  />
      </el-tab-pane> -->
      <el-tab-pane label="商品" name="4">
        <ProductList v-if="activeName == '4'"  />
      </el-tab-pane>
      <el-tab-pane label="订单" name="5">
        <orderList v-if="activeName == '5'"  />
      </el-tab-pane>
      <el-tab-pane label="分销设置" name="6">
        <DistributionDevel v-if="activeName == '6'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import DistributionDevel from "./components/distributionDevel.vue";
import userRank from "./components/userRank.vue"
import userBalanceList from './components/userBalanceList.vue'
import InfluenceList from './components/influenceList.vue'
import orderList from './components/orderList.vue'
import ProductList from "./components/productList.vue";
@Component({components:{DistributionDevel,userRank,userBalanceList,InfluenceList,orderList,ProductList}})
export default class DistributionAd extends Vue {
  activeName:string='2'
}
</script>

<style lang="scss">
.distributionAd{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 16px;
  .el-tabs{
    width: 100%;
    height: 100%;
  }
  .el-tabs__header{
    margin: 0 !important;
  }
  .el-tabs__content{
    height: calc(100% - 40px);
    padding-top: 8px;
    box-sizing: border-box;
    overflow: hidden;
    .el-tab-pane{
      width: 100%;
      height: 100%;
    }
  }
}
</style>