<!-- 基础配置 -->
<template>
  <div class="basicConfiguration">
    <div class="page-container-top-max-big-box-shadow">
      <p class="top-1-p">基础配置</p>
      <p class="top-2-p" @click="resetButton()">重置</p>
      <p class="top-3-p" @click="submitButton()"
         v-hasPermiRouter="['exam:elDisciplineType:batchSave']">保存</p>
    </div>
    <div class="bottom-max-big-box">
      <div class="left-max-big-box">
        <p class="left-for-p" :class="item.value == buttonType?'check-button-p':''"
           v-show="shouldShowItem(item)"
           @click="tableButton(item.value)"
           v-for="(item,index) in buttonList" :key="index">{{item.name}}</p>
      </div>
      <examinationConfiguration ref="examinationConfiguration" class="right-max-big-box" v-if="buttonType == 1"></examinationConfiguration>
      <specialtyConfiguration ref="specialtyConfiguration" class="right-max-big-box" v-if="buttonType == 2"></specialtyConfiguration>
      <gradingConfiguration ref="gradingConfiguration" class="right-max-big-box" v-if="buttonType == 3"></gradingConfiguration>
      <classHoursConfiguration ref="classHoursConfiguration" class="right-max-big-box" v-if="buttonType == 4"></classHoursConfiguration>
      <otherConfiguration ref="otherConfiguration" class="right-max-big-box" v-if="buttonType == 5"></otherConfiguration>
    </div>
  </div>
</template>
<script>
  import store from '@/store'
  import examinationConfiguration from "./examinationConfiguration.vue";
  import specialtyConfiguration from "./specialtyConfiguration.vue";
  import gradingConfiguration from "./gradingConfiguration.vue";
  import classHoursConfiguration from "./classHoursConfiguration.vue";
  import otherConfiguration from "./otherConfiguration.vue";
  export default {
    name: 'index',
    components: {
      examinationConfiguration,
      specialtyConfiguration,
      gradingConfiguration,
      classHoursConfiguration,
      otherConfiguration,
    },
    data () {
      return {
        tableButtonType:this.hasPermiDom(['demo:demo:detail','demo:demo:edit','demo:demo:del',]),
        //页面状态
        buttonType:1,
        //菜单按钮
        buttonList:[
          {name:'考试类型配置',value:'1'},
          {name:'专业类别配置',value:'2'},
          {name:'分级要求配置',value:'3'},
          {name:'学时积分配置',value:'4'},
          {name:'其他配置',value:'5'},
        ],
        //管理权限
        sustainType:false,
      }
    },
    created () {

    },
    mounted () {
      let permissions = store.getters.permissions;
      if(permissions[0] == "*:*:*"){
        this.$set(this,'sustainType',true);
      }else{
        this.$set(this,'sustainType',false);
      }
    },
    methods: {
      tableButton(val){
        if(this.buttonType != val){
          this.$set(this,'buttonType',val);
        }
      },
      resetButton(){
        if(this.buttonType == 1){
          this.$refs.examinationConfiguration.resetButton();
        }else if(this.buttonType == 2){
          this.$refs.specialtyConfiguration.resetButton();
        }else if(this.buttonType == 3){
          this.$refs.gradingConfiguration.resetButton();
        }else if(this.buttonType == 4){
          this.$refs.classHoursConfiguration.resetButton();
        }else if(this.buttonType == 5){
          this.$refs.otherConfiguration.resetButton();
        }
      },
      //提交
      submitButton(){
        if(this.buttonType == 1){
          this.$refs.examinationConfiguration.submitButton();
        }else if(this.buttonType == 2){
          this.$refs.specialtyConfiguration.submitButton();
        }else if(this.buttonType == 3){
          this.$refs.gradingConfiguration.submitButton();
        }else if(this.buttonType == 4){
          this.$refs.classHoursConfiguration.submitButton();
        }else if(this.buttonType == 5){
          this.$refs.otherConfiguration.submitButton();
        }
      },
      shouldShowItem(item){
        if(this.sustainType){
          return true
        }else{
          return item.value != 2;
        }
      },
    },
  }
</script>
<style scoped lang="scss">
  .basicConfiguration{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .bottom-max-big-box{
      flex:1;
      display: flex;
      overflow: hidden;
      .left-max-big-box{
        padding:20px 0;
        width:240px;
        overflow: hidden;
        border-radius:10px;
        margin:5px 10px 20px 10px;
        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
        .left-for-p{
          padding:0 30px;
          line-height:40px;
          cursor: pointer;
          margin-bottom:5px;
        }
        .left-for-p:hover{
          color:#fff;
          background-color: #0183fa;
        }
        .check-button-p{
          color:#0183FA;
        }
      }
      .right-max-big-box{
        flex:1;
        overflow: hidden;
        padding:0;
        border-radius:10px;
        margin:5px 20px 20px 10px;
        box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
      }
    }
  }
</style>
