<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      声部设置
    </h2>
    <div class="m-core">
      <!-- navMenu -->
        <tab-router
          v-model.trim="activeIndex"
          type="card"
          @tab-click="handleClick"
        >
          <el-tab-pane
            label="声部设置(对内)"
            lazy
            name="0"
            v-if="permissionList.musicalManager"
          >
            <musicalManager v-if="activeIndex == 0" />
          </el-tab-pane>
          <el-tab-pane
            label="声部设置(对外)"
            lazy
            name="1"
            v-if="permissionList.musicalManagerOut"
          >
            <musicalManagerOut v-if="activeIndex == 1" />
          </el-tab-pane>
        </tab-router>
    </div>
  </div>
</template>
<script>
import musicalManager from "./specialSetup/musicalManager";
import musicalManagerOut from "./specialSetup/musicalManagerOut";
import { permission } from "@/utils/directivePage";
export default {
  components: {
    musicalManager,
    musicalManagerOut
  },
  name: "globalConfig",
  data() {
    return {
      activeIndex: "0",
      permissionList: {
        musicalManager: permission("/globalConfig/musicalManager"),
        musicalManagerOut: permission("/globalConfig/musicalManagerOut")
      }
    };
  },
  methods: {
    handleClick(val) {
      this.activeIndex = val.name;
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.m-container {
  padding: 0 10px 40px;
}
</style>
