<script setup lang="ts">
import Timetable from '@/page/urge/timetable/components/Timetable.vue'
import Order from '@/page/urge/timetable/components/Order.vue'
import Report from '@/page/urge/timetable/components/Report.vue'

const activeClass = ref('timetable')
const classList = [
  { id: 'timetable', name: '课表' },
  { id: 'report', name: '报告' },
  { id: 'order', name: '订单' },
]

onActivated(() => {
  activeClass.value = 'timetable'
})
</script>
<template>
  <div class="page">
    <div class="head">
      <BackBar />
      <div style="flex-grow: 1"></div>
      <Btn
        style="margin-right: 24px"
        width="272"
        height="80"
        tilt
        @click="$router.push('/urge/open')"
        >督学续费</Btn
      >
    </div>
    <div class="content">
      <div class="content-sidebar">
        <Sidebar v-model="activeClass" :config="classList" class="left-vbar" />
      </div>
      <div class="content-main">
        <Timetable v-if="activeClass === 'timetable'" />
        <Report v-else-if="activeClass === 'report'" />
        <Order v-else-if="activeClass === 'order'" />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  @include main_bg;

  .head {
    display: flex;
    padding: $space-3_h $space-6;

    :deep(.x-button) {
      margin-left: auto;
    }
  }
}

.content {
  display: flex;
  position: fixed;
  top: 10.67vh;
  left: 64px;
  right: 0;
}

.content-sidebar {
  width: 240px;
  margin-top: 3.33vh;
  flex-shrink: 0;
}

.content-main {
  flex-grow: 1;
  margin-left: 40px;
}
</style>
