<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:materialStrength')!=-1"
         @click="pageTypeClick('1')">按管理单位查询</p>
      <p :class="{'p-color-A':pageType==2,'p-color-B':pageType!=2,}"
         v-if="userPermsData.indexOf('business:statisticsAnalysis:materialUnitName')!=-1"
         @click="pageTypeClick('2')">按基数单位查询</p>
      <p :class="{'p-color-A':pageType==3,'p-color-B':pageType!=3,}"
         v-if="userPermsData.indexOf('business:statisticsAnalysis:materialStrength')!=-1"
         @click="pageTypeClick('3')">按类别查询</p>
    </div>
    <div class="bottom-max-box">
      <press-the-management-unit-to-inquire v-if="pageType==1"></press-the-management-unit-to-inquire><!--按管理单位查询-->
      <query-by-cardinality-unit v-if="pageType==2"></query-by-cardinality-unit><!--按基数单位查询-->
      <query-by-category v-if="pageType==3"></query-by-category><!--按类别查询-->
    </div>
  </div>
</template>
<script>
  export default {
    name: "equipmentMaterialStrengthInformation",//装备物资实力信息
    components:{
      pressTheManagementUnitToInquire: resolve => {require(['@/components/equipmentSituation/equipmentMaterialStrengthInformationView/pressTheManagementUnitToInquire'], resolve)},//按管理单位查询
      queryByCardinalityUnit: resolve => {require(['@/components/equipmentSituation/equipmentMaterialStrengthInformationView/queryByCardinalityUnit'], resolve)},//按基数单位查询
      queryByCategory: resolve => {require(['@/components/equipmentSituation/equipmentMaterialStrengthInformationView/queryByCategory'], resolve)},//按类别查询
    },
    data () {
      return {
        userPermsData:localStorage.getItem('userPerms'),
        pageType:0,
      }
    },

    created(){

    },
    mounted() {
      if(this.userPermsData.indexOf('business:statisticsAnalysis:materialStrength')!=-1){
        this.pageType = 1;
      }else if(this.userPermsData.indexOf('business:statisticsAnalysis:materialUnitName')!=-1){
        this.pageType = 2;
      }else if(this.userPermsData.indexOf('business:statisticsAnalysis:materialStrength')!=-1){
        this.pageType = 3;
      }
    },
    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 20px;
      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:1;

</style>


