<template>
  <div class="app-container classifiedGrading">
    <div class="top-button-max-box">
      <div class="top-button-box" @click="buttonPageType(1)"  v-hasPermiRouter="['lab:classType:list']">
        <p :class="pageType == 1 ? 'p-color':''">安全分类</p>
        <p :class="pageType == 1 ? 'p-back':''"></p>
      </div>
      <div class="top-button-box" @click="buttonPageType(2)"  v-hasPermiRouter="['lab:classLevel:list']">
        <p :class="pageType == 2 ? 'p-color':''">安全分级</p>
        <p :class="pageType == 2 ? 'p-back':''"></p>
      </div>
      <div class="top-button-box" @click="buttonPageType(3)"  v-hasPermiRouter="['lab:classMold:list']">
        <p :class="pageType == 3 ? 'p-color':''">实验室类型</p>
        <p :class="pageType == 3 ? 'p-back':''"></p>
      </div>
    </div>
    <classtype v-if="pageType == 1"></classtype>
    <classified v-if="pageType == 2"></classified>
    <subject-class v-if="pageType == 3"></subject-class>
  </div>
</template>

<script>
  import classified from "./classified.vue";
  import classtype from "./classtype.vue";
  import subjectClass from "./subjectClass.vue";
    export default {
      name: "index",
      components: {
        classified,
        classtype,
        subjectClass,
      },
      data() {
        return {
          pageType:1,
        }
      },
      created() {

      },
      mounted(){

      },
      methods:{
        // 选项卡切换
        buttonPageType(type){
          if(this.pageType != type){
            this.pageType = type;
          }
        },
      }
    }
</script>

<style scoped lang="scss">
  .classifiedGrading{
    flex:1;
    display: flex;
    flex-direction: column;
    .top-button-max-box{
      display: flex;
      padding-top:4px;
      border-bottom:1px solid #D8D8D8;
      .top-button-box{
        height:73px;
        padding:0 25px;
        p:nth-child(1){
          line-height:68px;
          text-align: center;
          font-weight:500;
          cursor: pointer;
        }
        p:nth-child(2){
          height:5px;
          border-radius:2px;
        }
        .p-color{
          color:#0045AF;
        }
        .p-back{
          background: #0045AF;
        }
      }
    }
  }
</style>
