<template>
  <div class="app-container">
    <stat-all v-permission="[Role.totalCounts]"></stat-all>
    <stat-product v-permission="[Role.productCycCounts]" style="margin-top: 20px;"></stat-product>
    <stat-supplier v-permission="[Role.supplierCycCounts]" style="margin-top: 20px"></stat-supplier>
    <el-card v-if="has_tab" style="margin-top: 20px;">
      <el-tabs v-model="activeName" >
        <el-tab-pane v-if="has_tab_supplier" label="供应商" name="supplier">
          <table-supplier v-if="has_tab_supplier && activeName == 'supplier'"></table-supplier>
        </el-tab-pane>
        <el-tab-pane v-if="has_tab_product" label="货源商品" name="product">
          <table-product v-if="has_tab_product && activeName == 'product'"></table-product>
        </el-tab-pane>
        <el-tab-pane v-if="has_tab_category" label="货源商品分类" name="category">
          <table-category v-if="has_tab_category && activeName == 'category'"></table-category>
        </el-tab-pane>
      </el-tabs>
    </el-card>

  </div>
</template>

<script>
  import {mapActions} from 'vuex';
  import statAll from "./components/stat-all.vue"
  import statProduct from "./components/stat-product.vue"
  import statSupplier from "./components/stat-supplier.vue"
  import tableSupplier from "./components/table-supplier.vue"
  import tableProduct from "./components/table-product.vue"
  import tableCategory from "./components/table-category.vue"
  import checkPermission from "@/utils/permission"
  import Role from "@/constant/modules/supplierStat"

  export default {
    name: 'AppDashboard',
    components: {
      statAll,
      statProduct,
      statSupplier,
      tableSupplier,
      tableProduct,
      tableCategory
    },
    data() {
      return {
        Role,
        title: '',
        activeName: "supplier",
      }
    },
    computed: {
      has_tab_supplier(){
        return checkPermission([Role.supplierCycSales])
      },
      has_tab_product(){
        return checkPermission([Role.productCycSales])
      },
      has_tab_category(){
        return checkPermission([Role.productCategoryCycSales])
      },
      has_tab(){
        return checkPermission([Role.supplierCycSales, Role.productCycSales, Role.productCategoryCycSales])
      }
    },

    created() {
      if(this.has_tab){
        this.activeName = this.has_tab_supplier ? "supplier" : this.has_tab_product ? "product" : "category"
      }
    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    height: 100%;
    // padding: 80px 0 0;

    &__image {
      max-width: 500px;
      margin: 0 auto;

      & > img {
        width: 100%;
        opacity: 0.8;
      }
    }

    &__indextitle {
      font-size: 40px;
      font-weight: bold;
      padding: 50px 0;
      text-align: center;
      color: #444;
      text-shadow: 5px -2px 4px rgba(0, 0, 0, .1);
    }

  }

  @media screen and (max-width: 768px) {
    .app-container {

      &__image {
        max-width: 80vw;
        margin: 0 auto;
      }

      &__indextitle {
        font-size: 20px;

      }
    }
  }
</style>
