<template>
  <div class="course-schedule-content">
    <div v-if="scheduleData.length > 0" class="schedule-table-wrapper">
      <a-alert
        message="以下为推荐的排课计划参考，可根据实际情况调整"
        type="info"
        show-icon
        closable
        class="schedule-alert"
      />

      <a-table
        :columns="scheduleColumns"
        :data-source="scheduleData"
        :pagination="false"
        size="small"
        bordered
        class="schedule-table"
      />
    </div>

    <a-empty v-else description="暂无排课计划参考" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  course: any;
}>();

const scheduleColumns = [
  { title: '时间', dataIndex: 'dayOfWeek', key: 'dayOfWeek', width: 100 },
  { title: '课程类型', dataIndex: 'lessonType', key: 'lessonType', width: 120 },
  { title: '课程名称', dataIndex: 'lessonName', key: 'lessonName' },
  { title: '区域活动', dataIndex: 'activity', key: 'activity' },
  { title: '备注', dataIndex: 'note', key: 'note' },
];

const scheduleData = computed(() => {
  if (!props.course.scheduleRefData) return [];
  try {
    const data = JSON.parse(props.course.scheduleRefData);
    return Array.isArray(data) ? data : [];
  } catch {
    return [];
  }
});
</script>

<style scoped>
.course-schedule-content {
  min-height: 400px;
}

.schedule-alert {
  margin-bottom: 16px;
}

.schedule-table-wrapper {
  background: white;
}

.schedule-table {
  font-size: 13px;
}

.schedule-table :deep(.ant-table-thead > tr > th) {
  background: linear-gradient(135deg, #FFF5EB 0%, #FFE8D6 100%);
  font-weight: 600;
  color: #333;
}

.schedule-table :deep(.ant-table-tbody > tr:hover) {
  background: #FFF9F5;
}

.schedule-table :deep(.ant-table-cell) {
  padding: 12px 16px;
}
</style>
