<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      VIP课程参数
    </h2>
    <div class="m-core">
        <tab-router v-model.trim="activeIndex" type="card" @tab-click="handleClick">
          <el-tab-pane lazy v-if="permissionList.vipCourseType" label="课程形式" name="1">
            <vipCourseType v-if="activeIndex == '1'" />
          </el-tab-pane>
          <el-tab-pane lazy v-if="permissionList.vipCourseType" label="周期循环" name="2">
            <vipCourseTimeSet v-if="activeIndex == '2'" />
          </el-tab-pane>
        </tab-router>
    </div>
  </div>
</template>
<script>
import vipCourseType from "./vipCourseType";
import vipCourseTimeSet from "./vipCourseTimeSet";
import { permission } from '@/utils/directivePage'
export default {
  name: "vipParameterManager",
  components: { vipCourseType, vipCourseTimeSet },
  data() {
    return {
      activeIndex: "1",
      permissionList: {
        vipCourseType: permission("/vipCourseType"),
        vipCourseTimeSet: permission("/vipCourseTimeSet")
      },
    };
  },
  mounted() {},
  methods: {
    handleClick(val) {
      this.activeIndex = val.name;
    },
  },
};
</script>
<style lang="scss" scoped>
.left {
  margin-right: 20px;
}
.listWrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
</style>
<style lang="scss">
.courseMask {
  .el-tag.el-tag--info {
    margin-right: 4px;
  }
}
</style>
