<template>
  <div class="schedule-container">
    <div class="page-header">
      <h2>课程排期</h2>
      <a-button type="primary" @click="showCreateModal">
        <template #icon><PlusOutlined /></template>
        新建排课
      </a-button>
    </div>

    <a-tabs v-model:activeKey="activeTab" @change="handleTabChange">
      <a-tab-pane key="list" tab="列表视图">
        <ScheduleList ref="scheduleListRef" />
      </a-tab-pane>
      <a-tab-pane key="timetable" tab="课表视图">
        <TimetableView ref="timetableRef" />
      </a-tab-pane>
      <a-tab-pane key="calendar" tab="日历视图">
        <CalendarView ref="calendarRef" />
      </a-tab-pane>
    </a-tabs>

    <!-- 新建排课弹窗 -->
    <CreateScheduleModal ref="createModalRef" @success="handleCreateSuccess" />
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import ScheduleList from './ScheduleList.vue';
import TimetableView from './TimetableView.vue';
import CalendarView from './CalendarView.vue';
import CreateScheduleModal from './components/CreateScheduleModal.vue';

const activeTab = ref('list');
const createModalRef = ref<InstanceType<typeof CreateScheduleModal>>();
const scheduleListRef = ref<InstanceType<typeof ScheduleList> | null>(null);
const timetableRef = ref<InstanceType<typeof TimetableView> | null>(null);
const calendarRef = ref<InstanceType<typeof CalendarView> | null>(null);

const showCreateModal = () => {
  createModalRef.value?.open();
};

const handleTabChange = (key: string) => {
  activeTab.value = key;
  // 切换视图时刷新对应视图数据
  nextTick(() => {
    switch (key) {
      case 'list':
        scheduleListRef.value?.refresh();
        break;
      case 'timetable':
        timetableRef.value?.refresh();
        break;
      case 'calendar':
        calendarRef.value?.refresh();
        break;
    }
  });
};

const handleCreateSuccess = () => {
  // 刷新当前视图的数据
  switch (activeTab.value) {
    case 'list':
      scheduleListRef.value?.refresh();
      break;
    case 'timetable':
      timetableRef.value?.refresh();
      break;
    case 'calendar':
      calendarRef.value?.refresh();
      break;
  }
};
</script>

<style scoped lang="scss">
.schedule-container {
  padding: 24px;
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF8F0 0%, #FFFFFF 100%);

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h2 {
      margin: 0;
    }
  }

  :deep(.ant-tabs) {
    .ant-tabs-nav {
      margin-bottom: 16px;
    }

    .ant-tabs-tab {
      padding: 8px 16px;
    }
  }
}
</style>
