<!--
 * @Author: hookehuyr hookehuyr@gmail.com
 * @Date: 2025-01-20 10:00:00
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-12-03 13:44:41
 * @FilePath: /mlaj/src/views/teacher/formPage.vue
 * @Description: 教师作业新增表单页面
-->
<template>
  <AppLayout>
    <div class="bg-gradient-to-br from-green-50 via-green-100/30 to-blue-50/30 min-h-screen">
      <div class="px-4 py-6">
        <FrostedGlass class="rounded-xl overflow-hidden">
          <div class="p-6">
            <van-form @submit="handleSubmit">
              <!-- 作业名称输入框 -->
              <div class="mb-6">
                <van-field
                  v-model="formData.title"
                  name="title"
                  :placeholder="`请输入${pageTitle === '设置作业' ? '作业' : '打卡'}名称(必填)`"
                  required
                  :border="false"
                  class="homework-name-field"
                />
              </div>

              <!-- 作业要求说明 -->
              <div class="mb-6">
                <van-field
                  v-model="formData.note"
                  name="note"
                  type="textarea"
                  :placeholder="`请输入${pageTitle === '设置作业' ? '作业' : '打卡'}要求和说明`"
                  :border="false"
                  rows="4"
                  class="description-field"
                />
              </div>

              <!-- 作业设置 -->
              <div class="mb-6">
                <h3 class="section-title">{{ pageTitle }}</h3>

                <!-- 作品类型选择 - 只在设置作业时显示 -->
                <div v-if="$route.query.type === 'homework'" class="mb-4">
                  <label class="setting-label">作业类型 (可多选)</label>
                  <van-checkbox-group v-model="formData.attachment_type" direction="horizontal" checked-color="#4caf50" icon-size="1.05rem">
                    <van-checkbox
                      v-for="option in attachmentTypeOptions"
                      :key="option.name"
                      :name="option.name"
                      shape="square"
                    >
                      <span style="font-size: 1rem;">{{ option.text }}</span>
                    </van-checkbox>
                  </van-checkbox-group>
                </div>

                <!-- 作业频次和每周期提交数量 -->
                <van-row gutter="10" class="mb-4">
                  <van-col span="12">
                    <label class="setting-label">{{ pageTitle === '设置作业' ? '作业' : '打卡' }}频次</label>
                    <van-field
                      v-model="formData.cycle_text"
                      is-link
                      readonly
                      name="cycle_text"
                      placeholder="请选择周期"
                      :border="false"
                      @click="showCyclePicker = true"
                      class="cycle-field"
                    />
                  </van-col>
                  <van-col span="12">
                    <label class="setting-label">每周期提交数量</label>
                    <div class="target-count-container">
                      <van-stepper
                        v-model="formData.frequency"
                        min="0"
                        max="100"
                        integer
                        button-size="24px"
                        input-width="50%"
                      />
                      <span class="target-unit">次</span>
                    </div>
                  </van-col>
                </van-row>

                <!-- 目标总数 -->
                <van-row gutter="10" class="mb-4">
                  <van-col span="24">
                    <label class="setting-label">目标总数</label>
                    <div class="target-count-container">
                      <van-stepper
                        v-model="formData.target_number"
                        min="0"
                        max="100"
                        integer
                        button-size="24px"
                        input-width="80%"
                      />
                      <span class="target-unit">次</span>
                    </div>
                  </van-col>
                </van-row>
              </div>

              <!-- 时间设置 -->
              <div class="mb-6">
                <div class="time-row">
                  <div class="time-item">
                    <van-icon name="calendar-o" class="time-icon" />
                    <span class="time-label">开始日期：</span>
                    <span class="time-value" @click="openStartTimePicker">
                      {{ startTimeDisplay || '2025-05-13' }}
                    </span>
                    <van-icon name="arrow" class="arrow-icon" />
                  </div>
                </div>
                <div class="time-row">
                  <div class="time-item">
                    <van-icon name="calendar-o" class="time-icon" />
                    <span class="time-label">结束日期：</span>
                    <span class="time-value" @click="openEndTimePicker">
                      {{ endTimeDisplay || '2025-06-13' }}
                    </span>
                    <van-icon name="arrow" class="arrow-icon" />
                  </div>
                </div>
              </div>

              <!-- 选择项目 -->
              <div class="mb-6">
                <!-- 优先选择课程，驱动后续年级与班级级联 -->
                <div class="select-row">
                  <div class="select-item">
                    <van-icon name="friends-o" class="select-icon" />
                    <span class="select-label">所在课程：</span>
                    <span class="select-value" @click="showCoursePicker = true">{{ formData.course || '请选择课程' }}</span>
                    <van-icon name="arrow" class="arrow-icon" @click="showCoursePicker = true" />
                  </div>
                </div>
                <div class="select-row">
                  <div class="select-item">
                    <van-icon name="friends-o" class="select-icon" />
                    <span class="select-label">所在年级：</span>
                    <span class="select-value" @click="showGradePicker = true">{{ formData.grade || '请选择年级' }}</span>
                    <van-icon name="arrow" class="arrow-icon" @click="showGradePicker = true" />
                  </div>
                </div>
                <div class="select-row">
                  <div class="select-item">
                    <van-icon name="friends-o" class="select-icon" />
                    <span class="select-label">所在班级：</span>
                    <span class="select-value" @click="showClassPicker = true">{{ formData.class_name || '请选择班级' }}</span>
                    <van-icon name="arrow" class="arrow-icon" @click="showClassPicker = true" />
                  </div>
                </div>
                <!-- 仅在完成班级选择后，允许进行课程目录选择 -->
                <div class="select-row" v-if="formData.class_id && courseChapters[formData.course]?.length">
                  <div class="select-item">
                    <van-icon name="bookmark-o" class="select-icon" />
                    <span class="select-label">课程目录：</span>
                    <span class="select-value" @click="showChapterPicker = true">
                      {{ selectedChaptersDisplay || '请选择目录' }}
                    </span>
                    <van-icon name="arrow" class="arrow-icon" @click="showChapterPicker = true" />
                  </div>
                </div>
                <!-- <div class="select-row">
                  <div class="select-item">
                    <van-icon name="fire-o" class="select-icon" />
                    <span class="select-label">所在活动：</span>
                    <span class="select-value" @click="showActivityPicker = true">{{ formData.activity || '请选择活动' }}</span>
                    <van-icon name="arrow" class="arrow-icon" @click="showActivityPicker = true" />
                  </div>
                </div>
                <div class="select-row">
                  <div class="select-item">
                    <van-icon name="friends-o" class="select-icon" />
                    <span class="select-label">所在小组：</span>
                    <span class="select-value" @click="showGroupPicker = true">{{ formData.group_name || '请选择小组' }}</span>
                    <van-icon name="arrow" class="arrow-icon" @click="showGroupPicker = true" />
                  </div>
                </div> -->
              </div>

              <!-- 提交按钮 -->
              <div class="submit-container">
                <van-button
                  native-type="submit"
                  type="primary"
                  block
                  round
                  :loading="loading"
                  class="submit-btn"
                >
                  确认发布
                </van-button>
              </div>
            </van-form>
          </div>
        </FrostedGlass>
        <div style="height: 4rem;"></div>
      </div>
    </div>

    <!-- 周期选择器 -->
    <van-popup v-model:show="showCyclePicker" position="bottom">
      <van-picker :columns="cycleOptions" @confirm="onCycleConfirm" @cancel="showCyclePicker = false" />
    </van-popup>

    <!-- 开始时间选择器 -->
    <van-popup v-model:show="showStartTimePicker" position="bottom">
      <van-picker-group
        title="选择开始时间"
        :tabs="['选择日期', '选择时间']"
        next-step-text="下一步"
        @confirm="onStartTimeConfirm"
        @cancel="showStartTimePicker = false"
      >
        <van-date-picker
          v-model="startDate"
          :min-date="minDate"
          :max-date="maxDate"
        />
        <van-time-picker
          v-model="startTime"
          :columns-type="['hour', 'minute', 'second']"
        />
      </van-picker-group>
    </van-popup>

    <!-- 结束时间选择器 -->
    <van-popup v-model:show="showEndTimePicker" position="bottom">
      <van-picker-group
        title="选择结束时间"
        :tabs="['选择日期', '选择时间']"
        next-step-text="下一步"
        @confirm="onEndTimeConfirm"
        @cancel="showEndTimePicker = false"
      >
        <van-date-picker
          v-model="endDate"
          :min-date="minDate"
          :max-date="maxDate"
        />
        <van-time-picker
          v-model="endTime"
          :columns-type="['hour', 'minute', 'second']"
        />
      </van-picker-group>
    </van-popup>

    <!-- 课程选择器 -->
    <van-popup v-model:show="showCoursePicker" position="bottom">
      <div class="p-4">
        <van-search v-model="courseSearchValue" placeholder="搜索课程" @search="searchCourse" />
        <van-list>
          <van-cell v-for="course in filteredCourses" :key="course.id" :title="course.name" is-link :border="false"
            @click="onCourseSelect(course)" />
        </van-list>
      </div>
    </van-popup>

    <!-- 课程目录选择器 -->
    <van-popup v-model:show="showChapterPicker" position="bottom" class="chapter-picker-popup">
      <div class="chapter-picker-container">
        <div class="picker-header">
          <h3>批量设置课程目录</h3>
          <van-search v-model="chapterSearchValue" placeholder="搜索章节" @search="searchChapter" />
        </div>

        <div class="chapter-list">
          <div v-for="chapter in filteredAvailableChapters" :key="chapter.id" class="chapter-item">
            <van-checkbox
              v-model="chapter.selected"
              @change="onChapterToggle(chapter)"
              class="chapter-checkbox"
            >
              {{ chapter.name }}
            </van-checkbox>

            <!-- 时间设置区域 -->
            <div v-if="chapter.selected" class="time-settings">
              <div class="time-row">
                <span class="time-label">开始时间：</span>
                <van-field
                  v-model="chapter.startTime"
                  readonly
                  placeholder="请选择开始时间"
                  @click="openTimePicker(chapter, 'start')"
                  class="time-field"
                />
              </div>
              <div class="time-row">
                <span class="time-label">结束时间：</span>
                <van-field
                  v-model="chapter.endTime"
                  readonly
                  placeholder="请选择结束时间"
                  @click="openTimePicker(chapter, 'end')"
                  class="time-field"
                />
              </div>
            </div>
          </div>
        </div>

        <div class="picker-footer">
          <van-button @click="cancelChapterSelection" class="cancel-btn">取消</van-button>
          <van-button type="primary" @click="confirmChapterSelection" class="confirm-btn">
            确认选择 ({{ selectedChaptersCount }}个章节)
          </van-button>
        </div>
      </div>
    </van-popup>

    <!-- 时间选择器 -->
    <van-popup v-model:show="showChapterTimePicker" position="bottom">
      <van-date-picker
        v-model="currentChapterTime"
        title="选择时间"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onChapterTimeConfirm"
        @cancel="showChapterTimePicker = false"
      />
    </van-popup>

    <!-- 活动选择器 -->
    <!-- <van-popup v-model:show="showActivityPicker" position="bottom">
      <div class="p-4">
        <van-search v-model="activitySearchValue" placeholder="搜索活动" @search="searchActivity" />
        <van-list>
          <van-cell v-for="activity in filteredActivities" :key="activity.id" :title="activity.name" is-link
            :border="false" @click="onActivitySelect(activity)" />
        </van-list>
      </div>
    </van-popup> -->

    <!-- 年级选择器 -->
    <van-popup v-model:show="showGradePicker" position="bottom">
      <div class="p-4">
        <van-search v-model="gradeSearchValue" placeholder="搜索年级" @search="searchGrade" />
        <van-list>
          <van-cell v-for="grade in filteredGrades" :key="grade.id" :title="grade.name" is-link :border="false"
            @click="onGradeSelect(grade)" />
        </van-list>
      </div>
    </van-popup>

    <!-- 班级选择器 -->
    <van-popup v-model:show="showClassPicker" position="bottom">
      <div class="p-4">
        <van-search v-model="classSearchValue" placeholder="搜索班级" @search="searchClass" />
        <van-list>
          <van-cell v-for="classItem in filteredClasses" :key="classItem.id" :title="classItem.name" is-link
            :border="false" @click="onClassSelect(classItem)" />
        </van-list>
      </div>
    </van-popup>

    <!-- 小组选择器 -->
    <!-- <van-popup v-model:show="showGroupPicker" position="bottom">
      <div class="p-4">
        <van-search v-model="groupSearchValue" placeholder="搜索小组" @search="searchGroup" />
        <van-list>
          <van-cell v-for="group in filteredGroups" :key="group.id" :title="group.name" is-link :border="false"
            @click="onGroupSelect(group)" />
        </van-list>
      </div>
    </van-popup> -->
  </AppLayout>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { showToast, DatePicker, Popup } from 'vant';
import AppLayout from '@/components/layout/AppLayout.vue';
import FrostedGlass from '@/components/ui/FrostedGlass.vue';
import { useTitle } from '@vueuse/core';

import { getTeacherFindSettingsAPI, setTeacherTaskAPI } from "@/api/teacher";

const $route = useRoute();
const $router = useRouter();

const pageTitle = computed(() => {
  return $route.query.type === 'homework' ? '设置作业' : '安排打卡';
});

useTitle(pageTitle);

// 表单数据
const formData = ref({
  title: '',
  note: '',
  task_type: $route.query.type === 'homework' ? 'upload' : 'checkin',
  cycle_text: '',
  cycle: '',
  target_number: 1,
  start_time: new Date(),
  end_time: new Date(),
  course: '',
  lesson_id: '',
  chapter: '',
  // activity: '',
  grade: '',
  grade_id: '',
  class_name: '',
  class_id: '',
  // group_name: ''
  attachment_type: [], // 作品类型数组，用于设置作业时的多选
  frequency: 1 // 每周期提交数量
});

// 加载状态
const loading = ref(false);

// 弹窗显示状态
const showCyclePicker = ref(false);
const showStartTimePicker = ref(false);
const showEndTimePicker = ref(false);
const showCoursePicker = ref(false);
const showChapterPicker = ref(false);
const showChapterTimePicker = ref(false);
// const showActivityPicker = ref(false);
const showGradePicker = ref(false);
const showClassPicker = ref(false);
// const showGroupPicker = ref(false);

// 日期选择器相关
const startDate = ref(['2024', '01', '01']);
const endDate = ref(['2024', '12', '31']);
const startTime = ref(['00', '00', '00']);
const endTime = ref(['23', '59', '59']);
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2035, 11, 31);

const cycleOptions = ref([]);

// 作品类型选项 - 从接口获取
const attachmentTypeOptions = ref([]);

// 搜索值
const courseSearchValue = ref('');
const chapterSearchValue = ref('');
// const activitySearchValue = ref('');
const gradeSearchValue = ref('');
const classSearchValue = ref('');
// const groupSearchValue = ref('');

// 数据列表
const courses = ref([]);

// 章节数据 - 根据课程动态变化
const chapters = ref([]);

// 各课程对应的章节数据
const courseChapters = ref({});

// 已选择的章节列表
const selectedChapters = ref([]);

// 当前时间选择相关
const currentChapterTime = ref(['2024', '01', '01']);
const currentChapter = ref(null);
const currentTimeType = ref(''); // 'start' or 'end'

// const activities = ref([
//   { id: 1, name: '春游活动' },
//   { id: 2, name: '运动会' },
//   { id: 3, name: '文艺汇演' },
//   { id: 4, name: '科技节' }
// ]);

const grades = ref([]);

const classes = ref([]);

// const groups = ref([
//   { id: 1, name: '第一小组' },
//   { id: 2, name: '第二小组' },
//   { id: 3, name: '第三小组' },
//   { id: 4, name: '第四小组' }
// ]);

// 计算属性 - 时间显示格式
const startTimeDisplay = computed(() => {
  if (!formData.value.start_time) return '';
  return formatDateTime(formData.value.start_time);
});

const endTimeDisplay = computed(() => {
  if (!formData.value.end_time) return '';
  return formatDateTime(formData.value.end_time);
});

// 过滤后的数据
const filteredCourses = computed(() => {
  if (!courseSearchValue.value) return courses.value;
  return courses.value.filter(course =>
    course.name.toLowerCase().includes(courseSearchValue.value.toLowerCase())
  );
});

const filteredChapters = computed(() => {
  if (!chapterSearchValue.value) return chapters.value;
  return chapters.value.filter(chapter =>
    chapter.name.toLowerCase().includes(chapterSearchValue.value.toLowerCase())
  );
});

// 可选择的章节列表（根据当前课程）
const filteredAvailableChapters = computed(() => {
  if (!chapterSearchValue.value) return chapters.value;
  return chapters.value.filter(chapter =>
    chapter.name.toLowerCase().includes(chapterSearchValue.value.toLowerCase())
  );
});

// 已选择章节的显示文本
const selectedChaptersDisplay = computed(() => {
  const count = selectedChapters.value.length;
  if (count === 0) return '';
  if (count === 1) return selectedChapters.value[0].name;
  return `已选择 ${count} 个章节`;
});

// 已选择章节数量
const selectedChaptersCount = computed(() => {
  return chapters.value.filter(chapter => chapter.selected).length;
});

// const filteredActivities = computed(() => {
//   if (!activitySearchValue.value) return activities.value;
//   return activities.value.filter(activity =>
//     activity.name.toLowerCase().includes(activitySearchValue.value.toLowerCase())
//   );
// });

const filteredGrades = computed(() => {
  if (!gradeSearchValue.value) return grades.value;
  return grades.value.filter(grade =>
    grade.name.toLowerCase().includes(gradeSearchValue.value.toLowerCase())
  );
});

const filteredClasses = computed(() => {
  if (!classSearchValue.value) return classes.value;
  return classes.value.filter(classItem =>
    classItem.name.toLowerCase().includes(classSearchValue.value.toLowerCase())
  );
});

// const filteredGroups = computed(() => {
//   if (!groupSearchValue.value) return groups.value;
//   return groups.value.filter(group =>
//     group.name.toLowerCase().includes(groupSearchValue.value.toLowerCase())
//   );
// });

/**
 * 格式化日期时间
 * @param {Date} date - 日期对象
 * @returns {string} 格式化后的日期时间字符串
 */
const formatDateTime = (date) => {
  if (!date) return '';
  const d = new Date(date);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  const hour = String(d.getHours()).padStart(2, '0');
  const minute = String(d.getMinutes()).padStart(2, '0');
  const second = String(d.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
};

/**
 * 周期选择确认
 * @param {Object} option - 选中的选项
 */
const onCycleConfirm = (option) => {
  formData.value.cycle_text = option.selectedOptions[0].text;
  formData.value.cycle = option.selectedOptions[0].value;
  showCyclePicker.value = false;
};

/**
 * 打开开始时间选择器
 */
const openStartTimePicker = () => {
  // 同步当前的开始时间到选择器
  if (formData.value.start_time) {
    const date = new Date(formData.value.start_time);
    startDate.value = [
      date.getFullYear().toString(),
      (date.getMonth() + 1).toString().padStart(2, '0'),
      date.getDate().toString().padStart(2, '0')
    ];
    startTime.value = [
      date.getHours().toString().padStart(2, '0'),
      date.getMinutes().toString().padStart(2, '0'),
      date.getSeconds().toString().padStart(2, '0')
    ];
  }
  showStartTimePicker.value = true;
};

/**
 * 开始时间确认
 */
const onStartTimeConfirm = () => {
  const [year, month, day] = startDate.value;
  const [hour, minute, second] = startTime.value;
  formData.value.start_time = new Date(
    parseInt(year),
    parseInt(month) - 1,
    parseInt(day),
    parseInt(hour),
    parseInt(minute),
    parseInt(second)
  );
  showStartTimePicker.value = false;
};

/**
 * 打开结束时间选择器
 */
const openEndTimePicker = () => {
  // 同步当前的结束时间到选择器
  if (formData.value.end_time) {
    const date = new Date(formData.value.end_time);
    endDate.value = [
      date.getFullYear().toString(),
      (date.getMonth() + 1).toString().padStart(2, '0'),
      date.getDate().toString().padStart(2, '0')
    ];
    endTime.value = [
      date.getHours().toString().padStart(2, '0'),
      date.getMinutes().toString().padStart(2, '0'),
      date.getSeconds().toString().padStart(2, '0')
    ];
  }
  showEndTimePicker.value = true;
};

/**
 * 结束时间确认
 */
const onEndTimeConfirm = () => {
  const [year, month, day] = endDate.value;
  const [hour, minute, second] = endTime.value;
  formData.value.end_time = new Date(
    parseInt(year),
    parseInt(month) - 1,
    parseInt(day),
    parseInt(hour),
    parseInt(minute),
    parseInt(second)
  );
  showEndTimePicker.value = false;
};

/**
 * 课程选择
 * @param {Object} course - 选中的课程
 */
const onCourseSelect = (course) => {
  formData.value.course = course.name;
  formData.value.lesson_id = course.id;
  // 重置级联选择
  formData.value.grade = '';
  formData.value.grade_id = '';
  formData.value.class_name = '';
  formData.value.class_id = '';
  // 根据课程派生年级列表
  grades.value = (course.team_list || []).map(team => ({
    name: team.team_name,
    id: String(team.id),
    subteam_list: team.subteam_list || []
  }));
  // 清空班级列表，待年级选择后填充
  classes.value = [];
  // 清空之前选择的章节
  selectedChapters.value = [];
  // 根据选择的课程更新章节数据
  chapters.value = courseChapters.value[course.name] ? JSON.parse(JSON.stringify(courseChapters.value[course.name])) : [];
  showCoursePicker.value = false;
  courseSearchValue.value = '';
};

/**
 * 章节切换选择状态
 * @param {Object} chapter - 章节对象
 */
const onChapterToggle = (chapter) => {
  // 切换选择状态的逻辑已经由 v-model 处理
  console.log('章节选择状态变更:', chapter.name, chapter.selected);
};

/**
 * 打开时间选择器
 * @param {Object} chapter - 章节对象
 * @param {string} type - 时间类型 'start' 或 'end'
 */
const openTimePicker = (chapter, type) => {
  currentChapter.value = chapter;
  currentTimeType.value = type;

  // 设置当前时间
  const timeValue = type === 'start' ? chapter.startTime : chapter.endTime;
  if (timeValue) {
    const date = new Date(timeValue);
    currentChapterTime.value = [
      date.getFullYear().toString(),
      (date.getMonth() + 1).toString().padStart(2, '0'),
      date.getDate().toString().padStart(2, '0')
    ];
  } else {
    // 使用当前日期作为默认值
    const today = new Date();
    currentChapterTime.value = [
      today.getFullYear().toString(),
      (today.getMonth() + 1).toString().padStart(2, '0'),
      today.getDate().toString().padStart(2, '0')
    ];
  }

  showChapterTimePicker.value = true;
};

/**
 * 确认章节时间选择
 */
const onChapterTimeConfirm = () => {
  const [year, month, day] = currentChapterTime.value;
  const dateStr = `${year}-${month}-${day}`;

  if (currentChapter.value && currentTimeType.value) {
    // 时间验证逻辑
    if (currentTimeType.value === 'start') {
      // 设置开始时间时，检查是否晚于结束时间
      if (currentChapter.value.endTime && dateStr > currentChapter.value.endTime) {
        showToast('开始时间不能晚于结束时间');
        return;
      }
      currentChapter.value.startTime = dateStr;
    } else {
      // 设置结束时间时，检查是否早于开始时间
      if (currentChapter.value.startTime && dateStr < currentChapter.value.startTime) {
        showToast('结束时间不能早于开始时间');
        return;
      }
      currentChapter.value.endTime = dateStr;
    }
  }

  showChapterTimePicker.value = false;
  currentChapter.value = null;
  currentTimeType.value = '';
};

/**
 * 取消章节选择
 */
const cancelChapterSelection = () => {
  // 重置所有章节的选择状态
  chapters.value.forEach(chapter => {
    chapter.selected = false;
    chapter.startTime = '';
    chapter.endTime = '';
  });
  showChapterPicker.value = false;
  chapterSearchValue.value = '';
};

/**
 * 确认章节选择
 */
const confirmChapterSelection = () => {
  // 更新已选择的章节列表
  selectedChapters.value = chapters.value.filter(chapter => chapter.selected);

  // 验证已选择章节的时间设置
  const invalidChapters = selectedChapters.value.filter(chapter => !chapter.startTime || !chapter.endTime);
  if (invalidChapters.length > 0) {
    showToast('请为所有选中的章节设置开始和结束时间');
    selectedChapters.value = '';
    return;
  }

  // 验证时间逻辑：结束时间不能早于开始时间
  const timeInvalidChapters = selectedChapters.value.filter(chapter =>
    chapter.startTime && chapter.endTime && chapter.endTime < chapter.startTime
  );
  if (timeInvalidChapters.length > 0) {
    showToast('存在结束时间早于开始时间的章节，请重新设置');
    selectedChapters.value = '';
    return;
  }

  showChapterPicker.value = false;
  chapterSearchValue.value = '';
  showToast(`已选择 ${selectedChapters.value.length} 个章节`);
};

/**
 * 活动选择
 * @param {Object} activity - 选中的活动
 */
// const onActivitySelect = (activity) => {
//   formData.value.activity = activity.name;
//   showActivityPicker.value = false;
//   activitySearchValue.value = '';
// };

/**
 * 年级选择
 * @param {Object} grade - 选中的年级
 */
const onGradeSelect = (grade) => {
  formData.value.grade = grade.name;
  formData.value.grade_id = grade.id;
  // 根据年级派生班级列表
  classes.value = (grade.subteam_list || []).map(sub => ({
    name: sub.subteam_name,
    id: String(sub.id)
  }));
  // 清空已选择的班级，等待用户确认
  formData.value.class_name = '';
  formData.value.class_id = '';
  showGradePicker.value = false;
  gradeSearchValue.value = '';
};

/**
 * 班级选择
 * @param {Object} classItem - 选中的班级
 */
const onClassSelect = (classItem) => {
  formData.value.class_name = classItem.name;
  formData.value.class_id = classItem.id;
  showClassPicker.value = false;
  classSearchValue.value = '';
};

/**
 * 小组选择
 * @param {Object} group - 选中的小组
 */
// const onGroupSelect = (group) => {
//   formData.value.group_name = group.name;
//   showGroupPicker.value = false;
//   groupSearchValue.value = '';
// };

/**
 * 搜索课程
 * @param {string} value - 搜索值
 */
const searchCourse = (value) => {
  courseSearchValue.value = value;
};

/**
 * 搜索章节
 * @param {string} value - 搜索值
 */
const searchChapter = (value) => {
  chapterSearchValue.value = value;
};

/**
 * 搜索活动
 * @param {string} value - 搜索值
 */
// const searchActivity = (value) => {
//   activitySearchValue.value = value;
// };

/**
 * 搜索年级
 * @param {string} value - 搜索值
 */
const searchGrade = (value) => {
  gradeSearchValue.value = value;
};

/**
 * 搜索班级
 * @param {string} value - 搜索值
 */
const searchClass = (value) => {
  classSearchValue.value = value;
};

/**
 * 搜索小组
 * @param {string} value - 搜索值
 */
// const searchGroup = (value) => {
//   groupSearchValue.value = value;
// };

/**
 * 表单提交处理
 * @param {Object} values - 表单值
 */
const handleSubmit = async (values) => {
  try {
    loading.value = true;

    // 验证必填项
    if (!formData.value.title) {
      showToast('请输入作业名称');
      return;
    }

    // 准备提交的数据，包含课程目录选择和格式化的日期
    const submitData = {
      ...formData.value,
      // 格式化日期为YYYY-MM-DD格式
      begin_date: formatDateTime(formData.value.start_time),
      end_date: formatDateTime(formData.value.end_time),
      // 处理每周期提交数量和目标总数，当值为0时转换为空值
      frequency: formData.value.frequency === 0 ? null : formData.value.frequency,
      target_number: formData.value.target_number === 0 ? null : formData.value.target_number,
      // 添加课程目录选择数据
      schedule: selectedChapters.value.map(chapter => ({
        id: chapter.id,
        name: chapter.name,
        begin_date: formatDateTime(chapter.startTime),
        end_date: formatDateTime(chapter.endTime)
      }))
    };

    // 这里可以调用API提交数据
    console.log('提交的表单数据:', submitData);
    const { code, data } = await setTeacherTaskAPI(submitData);
    if (code) {
      showToast('保存成功');
      $router.back();
    }

  } catch (error) {
    console.error('提交失败:', error);
    showToast('保存失败，请重试');
  } finally {
    loading.value = false;
  }
};

/**
 * 组件挂载时初始化数据
 */
onMounted(async () => {
  // 这里可以调用API获取课程、活动、年级、班级、小组等数据
  const { code, data } = await getTeacherFindSettingsAPI();
  if (code) {
    cycleOptions.value = Object.entries(data.task_cycle).map(([value, text]) => ({
      text,
      value: String(value) // 确保值为字符串类型
    }));

    // 初始化周期选择
    formData.value.cycle_text = cycleOptions.value[0].text;
    formData.value.cycle = cycleOptions.value[0].value;

    // 处理作业类型数据
    if (data.task_attachment_type) {
      attachmentTypeOptions.value = Object.entries(data.task_attachment_type).map(([key, value]) => ({
        name: key, // 提交给后台的值
        text: value // 显示的文本
      }));
    }

    // 年级与班级不再从顶层返回，改为根据所选课程派生
    grades.value = [];
    classes.value = [];
    // 课程包含章节与年级树
    courses.value = data.group_list.map(course => ({
      name: course.title,
      id: String(course.id),
      schedule_list: course.schedule_list || [],
      team_list: course.team_list || []
    }));
    data.group_list.forEach(course => {
      courseChapters.value[course.title] = course.schedule_list.map(chapter => ({
        id: chapter.id,
        name: chapter.title,
        selected: false,
        startTime: '',
        endTime: ''
      }));
    });
  }
});
</script>

<style scoped>
/* 自定义样式 */

/* 作业名称输入框 */
.homework-name-field {
  background: #f5f5f5;
  border-radius: 12px;
  padding: 0.5rem;
}

:deep(.homework-name-field .van-field__control) {
  font-size: 16px;
  font-weight: 500;
  padding: 12px 16px;
}

/* 作业要求说明 */
.description-field {
  background: #f5f5f5;
  border-radius: 12px;
  padding: 4px 0;
}

:deep(.description-field .van-field__control) {
  padding: 12px 16px;
  min-height: 100px;
}

/* 作业设置标题 */
.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

/* 设置行 */
.setting-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.setting-item {
  flex: 1;
}

.setting-label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

/* 周期选择 */
.cycle-field {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 0.3rem;
}

:deep(.cycle-field .van-field__control) {
  /* padding: 2px; */
  text-align: center;
}

/* 目标总数容器 */
.target-count-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.target-unit {
  font-size: 14px;
  color: #666;
  flex-shrink: 0;
}

:deep(.van-stepper) {
  background: #f5f5f5;
  border-radius: 8px;
  flex: 1;
  padding: 0.25rem;
}

/* 时间设置 */
.time-row {
  margin-bottom: 12px;
}

.time-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
}

.time-icon {
  color: #666;
  margin-right: 12px;
}

.time-label {
  font-size: 14px;
  color: #333;
  margin-right: auto;
}

.time-value {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.arrow-icon {
  color: #999;
  margin-left: 8px;
  cursor: pointer;
}

/* 选择项目 */
.select-row {
  margin-bottom: 12px;
}

.select-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
}

.select-icon {
  color: #666;
  margin-right: 12px;
}

.select-label {
  font-size: 14px;
  color: #333;
  margin-right: 12px;
  min-width: 80px;
}

.select-value {
  font-size: 14px;
  color: #666;
  margin-right: auto;
  flex: 1;
  text-align: right;
}

/* 提交按钮 */
.submit-container {
  margin-top: 32px;
}

.submit-btn {
  height: 48px;
  font-size: 16px;
  font-weight: 600;
}

:deep(.submit-btn.van-button--primary) {
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* 通用样式 */
:deep(.van-field__label) {
  color: #333;
  font-weight: 500;
}

:deep(.van-field--required .van-field__label::before) {
  color: #ee0a24;
}

:deep(.van-popup) {
  border-radius: 16px 16px 0 0;
}

:deep(.van-picker__toolbar) {
  border-radius: 16px 16px 0 0;
}

/* 章节选择器样式 */
/* .chapter-picker-popup {
  :deep(.van-popup) {
    max-height: 80vh;
  }
} */

.chapter-picker-container {
  display: flex;
  flex-direction: column;
  height: 80vh;
  background: white;
}

.picker-header {
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.picker-header h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  text-align: center;
}

.chapter-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.chapter-item {
  margin-bottom: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.chapter-checkbox {
  margin-bottom: 8px;
}

:deep(.chapter-checkbox .van-checkbox__label) {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.time-settings {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #dee2e6;
}

.time-settings .time-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.time-settings .time-label {
  font-size: 14px;
  color: #666;
  margin-right: 12px;
  min-width: 80px;
}

.time-field {
  flex: 1;
  background: white;
  border-radius: 6px;
}

:deep(.time-field .van-field__control) {
  padding: 8px 12px;
  font-size: 14px;
}

.picker-footer {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid #eee;
  background: #f8f9fa;
}

.cancel-btn {
  flex: 1;
  height: 44px;
  border: 1px solid #ddd;
  background: white;
  color: #666;
}

.confirm-btn {
  flex: 2;
  height: 44px;
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  border: none;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .setting-row {
    flex-direction: column;
    gap: 16px;
  }

  .time-item,
  .select-item {
    padding: 10px 12px;
  }

  .chapter-picker-container {
    height: 85vh;
  }

  .time-settings .time-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .time-settings .time-label {
    min-width: auto;
  }
}
</style>