<template>
  <div class="max-big-box">
    <div class="top-max-box">
      <p :class="{'p-color-A':pageType==1,'p-color-B':pageType!=1,}"
         v-if="userPermsData.indexOf('business:statisticsAnalysis:consumelist')!=-1"
         @click="pageTypeClick('1')">消耗统计</p>
      <p :class="{'p-color-A':pageType==2,'p-color-B':pageType!=2,}"
         v-if="userPermsData.indexOf('business:statisticsAnalysis:stocklist')!=-1"
         @click="pageTypeClick('2')">库存分析</p>
    </div>
    <div class="bottom-max-box">
      <consumption-statistics v-if="pageType==1"></consumption-statistics><!--列表信息-->
      <inventory-analysis v-if="pageType==2"></inventory-analysis><!--统计信息-->
    </div>
  </div>
</template>

<script>
  export default {
    name: "statisticalAnalysis",
    components:{
      consumptionStatistics: resolve => {require(['@/components/directorateDecisionSupport/statisticalAnalysisView/consumptionStatistics'], resolve)},//消耗统计
      inventoryAnalysis: resolve => {require(['@/components/directorateDecisionSupport/statisticalAnalysisView/inventoryAnalysis'], resolve)},//库存分析
    },
    data () {
      return {
        userPermsData:localStorage.getItem('userPerms'),
        pageType:0,
      }
    },

    created(){

    },
    mounted() {
      if(this.userPermsData.indexOf('business:statisticsAnalysis:consumelist')!=-1){
        this.pageType = 1;
      }else if(this.userPermsData.indexOf('business:statisticsAnalysis:stocklist')!=-1){
        this.pageType = 2;
      }
    },
    methods: {
      //页面切换
      pageTypeClick(type){
        if(this.pageType!=type){
          this.pageType=type;
        }
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    display flex
    flex-direction column
    flex:1;
  .top-max-box
    display: flex;
    margin:0 105px 0;
    p
      margin-right:24px;
      width:120px;
      font-size:$font_13;
      color:$color_ff
      line-height:30px;
      border-radius:4px;
      cursor:pointer
    .p-color-A
      box-shadow:0 0 20px 1px #06b1f0 inset
      background:rgba(6,177,240,0.5);
    .p-color-B
      box-shadow:0 0 20px 1px #0a73a7 inset
      background:rgba(6,177,240,0.2);
  .bottom-max-box
    display flex
    flex-direction column
    flex:1;
</style>
