<template>
  <div class="max-big-box">
    <div class="top-max-box">
      <p :class="{'p-color-A':pageType==1,'p-color-B':pageType!=1,}"
         @click="pageTypeClick('1')"
         v-if="userPermsData.indexOf('business:userManager:list')!=-1">
        人员基本信息
      </p>
      <p :class="{'p-color-A':pageType==2,'p-color-B':pageType!=2,}"
         @click="pageTypeClick('2')"
         v-if="userPermsData.indexOf('business:taskTraining:list')!=-1">
        任务训练信息
      </p>
      <p :class="{'p-color-A':pageType==3,'p-color-B':pageType!=3,}"
         @click="pageTypeClick('3')"
         v-if="userPermsData.indexOf('business:baseInfo:list')!=-1">
        基础任务信息
      </p>
    </div>
    <div class="bottom-max-box">
      <basic-information-of-personnel v-if="pageType==1"></basic-information-of-personnel><!--列表信息-->
      <task-training-information v-if="pageType==2"></task-training-information><!--统计信息-->
      <basic-task-information v-if="pageType==3"></basic-task-information><!--基础任务信息-->
    </div>
  </div>
</template>

<script>
  export default {
    name: "personnelManagement",//人员管理
    components:{
      basicInformationOfPersonnel: resolve => {require(['@/components/directorateDecisionSupport/personnelManagement/basicInformationOfPersonnel'], resolve)},//人员基本信息
      taskTrainingInformation: resolve => {require(['@/components/directorateDecisionSupport/personnelManagement/taskTrainingInformation'], resolve)},//任务训练信息
      BasicTaskInformation: resolve => {require(['@/components/directorateDecisionSupport/personnelManagement/BasicTaskInformation'], resolve)},//基础任务信息
    },
    data () {
      return {
        userPermsData:localStorage.getItem('userPerms'),
        pageType:0,
      }
    },

    created(){

    },
    mounted() {
      if(this.userPermsData.indexOf('business:userManager:list')!=-1){
        this.pageType = 1;
      }else if(this.userPermsData.indexOf('business:taskTraining:list')!=-1){
        this.pageType = 2;
      }else if(this.userPermsData.indexOf('business:baseInfo:list')!=-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 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>
