<script setup lang="ts">
import CourseSectionPick from './section/pick.vue'
import CourseGroupPick from './group/pick.vue'
import {Tabs, Tab} from 'vant';
import {ref} from "vue";

const active = ref(0);
const props = defineProps({
  params: {
    type: Object
  }
});
</script>

<template>
<div class="mix-root">
  <Tabs v-model:active="active">
    <Tab title="选择课程" title-class="abc">
      <CourseSectionPick :params="params"/>
    </Tab>
    <Tab title="选择课节" title-class="cde">
      <CourseGroupPick :params="params"/>
    </Tab>
  </Tabs>
</div>
</template>

<style scoped lang="less">

.mix-root {

  width: 100%;
  height: calc(100% - 1rem);
  position: relative;

  > :deep(.van-tabs) {

    height: 100%;

    > .van-tabs__content {
      height: calc(100% - var(--van-tabs-line-height));
      overflow: auto;
      position: relative;

      .van-tab__panel {
        height: 100%;
        position: relative;

        .main {
          height: 100%!important;
        }
      }
    }
  }
}
</style>
