<template>
  <div class="app-container classifiedGrading">
    <div class="top-button-max-box">
      <div class="top-button-box" @click="buttonPageType(1)">
        <p :class="pageType == 1 ? 'p-color':''">基础配置</p>
        <p :class="pageType == 1 ? 'p-back':''"></p>
      </div>
      <div class="top-button-box" @click="buttonPageType(2)">
        <p :class="pageType == 2 ? 'p-color':''">化学品终端</p>
        <p :class="pageType == 2 ? 'p-back':''"></p>
      </div>
      <div class="top-button-box" @click="buttonPageType(3)">
        <p :class="pageType == 3 ? 'p-color':''">管控一体机</p>
        <p :class="pageType == 3 ? 'p-back':''"></p>
      </div>
      <div class="top-button-box" @click="buttonPageType(4)">
        <p :class="pageType == 4 ? 'p-color':''">小程序</p>
        <p :class="pageType == 4 ? 'p-back':''"></p>
      </div>
      <div class="top-button-box" @click="buttonPageType(5)">
        <p :class="pageType == 5 ? 'p-color':''">开发配置</p>
        <p :class="pageType == 5 ? 'p-back':''"></p>
      </div>
      <div class="top-button-box" @click="buttonPageType(6)">
        <p :class="pageType == 6 ? 'p-color':''">首页配置</p>
        <p :class="pageType == 6 ? 'p-back':''"></p>
      </div>
      <div class="null-box"></div>
      <p class="top-save-button-box"
         @click="addButton"
         v-hasPermiRouter="['system:conf:edit']">提交</p>
    </div>
    <basics-config ref="basicsConfig" v-if="pageType == 1"></basics-config>
    <chemicals-config ref="chemicalsConfig" v-if="pageType == 2"></chemicals-config>
    <integrationConfig ref="integrationConfig" v-if="pageType == 3"></integrationConfig>
    <program-config ref="programConfig" v-if="pageType == 4"></program-config>
    <exploit-config ref="exploitConfig" v-if="pageType == 5"></exploit-config>
    <home-config ref="homeConfig" v-if="pageType == 6"></home-config>
  </div>
</template>

<script>
import basicsConfig from "./basicsConfig.vue";
import chemicalsConfig from "./chemicalsConfig.vue";
import integrationConfig from "./integrationConfig.vue";
import programConfig from "./programConfig.vue";
import exploitConfig from "./exploitConfig.vue";
import homeConfig from "./homeConfig.vue";
export default {
  name: "index",
  components: {
    basicsConfig,
    chemicalsConfig,
    integrationConfig,
    programConfig,
    exploitConfig,
    homeConfig,
  },
  data() {
    return {
      pageType:1,
    }
  },
  created() {

  },
  mounted(){

  },
  methods:{
    // 选项卡切换
    buttonPageType(type){
      if(this.pageType != type){
        this.pageType = type;
      }
    },
    //保存按钮
    addButton(){
      let self = this;
      if(self.pageType == 1){
        self.$refs.basicsConfig.addOrUpdate();
      }else if (self.pageType == 2){
        self.$refs.chemicalsConfig.addOrUpdate();
      } else if (self.pageType == 3){
        self.$refs.integrationConfig.addOrUpdate();
      } else if (self.pageType == 4){
        self.$refs.programConfig.addOrUpdate();
      } else if (self.pageType == 5){
        self.$refs.exploitConfig.addOrUpdate();
      } else if (self.pageType == 6){
        self.$refs.homeConfig.addOrUpdate();
      }
    },
  }
}
</script>

<style scoped lang="scss">
.classifiedGrading{
  flex:1;
  display: flex;
  flex-direction: column;
  *{
    margin:0;
  }
  .top-button-max-box{
    display: flex;
    padding:7px 10px 0;
    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;
      }
    }
    .null-box{
      flex: 1;
    }
    .top-save-button-box{
      width: 80px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      font-size: 14px;
      margin: 12px 20px;
      border-radius: 6px;
      border: 1px solid #0045AF;
      color: #FFFFFF;
      background-color: #0045AF;
    }
    .top-save-button-box:hover{
      color:#fff;
      background-color: #409EFF;
      border:1px solid #409EFF;
    }
  }
}
</style>
