<!--
 * @Author: hookehuyr hookehuyr@gmail.com
 * @Date: 2025-01-20 10:00:00
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-06-20 10:58:03
 * @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="py-4">
            <van-form @submit="handleSubmit">
              <van-cell-group inset>
                <!-- 作业名称 -->
                <van-field v-model="formData.homework_name" name="homework_name" label="作业名称" placeholder="请输入作业名称"
                  required :border="false" :rules="[{ required: true, message: '请输入作业名称' }]" />

                <!-- 类型 -->
                <!-- <van-field
                                    v-model="formData.type"
                                    is-link
                                    readonly
                                    name="type"
                                    label="类型"
                                    placeholder="请选择类型"
                                    :border="false"
                                    @click="showTypePicker = true"
                                /> -->

                <!-- 频次 -->
                <van-field v-model="formData.frequency" is-link readonly name="frequency" label="频次" placeholder="请选择频次"
                  :border="false" @click="showFrequencyPicker = true" />

                <!-- 目标总数 -->
                <van-field v-model="formData.target_count" type="number" name="target_count" label="目标总数"
                  :border="false" placeholder="请输入目标数量" />

                <!-- 开始时间 -->
                <van-field v-model="startTimeDisplay" is-link readonly name="start_time" label="开始时间"
                  placeholder="请选择开始时间" :border="false" @click="showStartTimePicker = true" />

                <!-- 结束时间 -->
                <van-field v-model="endTimeDisplay" is-link readonly name="end_time" label="结束时间" placeholder="请选择结束时间"
                  :border="false" @click="showEndTimePicker = true" />

                <!-- 课程 -->
                <van-field v-model="formData.course" is-link readonly name="course" label="课程" placeholder="请选择课程"
                  :border="false" @click="showCoursePicker = true" />

                <!-- 活动 -->
                <van-field v-model="formData.activity" is-link readonly name="activity" label="活动" placeholder="请选择活动"
                  :border="false" @click="showActivityPicker = true" />

                <!-- 年级 -->
                <van-field v-model="formData.grade" is-link readonly name="grade" label="年级" placeholder="请选择年级"
                  :border="false" @click="showGradePicker = true" />

                <!-- 班级 -->
                <van-field v-model="formData.class_name" is-link readonly name="class_name" label="班级"
                  placeholder="请选择班级" :border="false" @click="showClassPicker = true" />

                <!-- 小组 -->
                <van-field v-model="formData.group_name" is-link readonly name="group_name" label="小组"
                  placeholder="请选择小组" :border="false" @click="showGroupPicker = true" />
              </van-cell-group>

              <!-- 提交按钮 -->
              <div style="margin: 16px;">
                <van-button native-type="submit" type="primary" block round :loading="loading">
                  确认并保存
                </van-button>
              </div>
            </van-form>
          </div>
        </FrostedGlass>
      </div>
    </div>

    <!-- 类型选择器 -->
    <van-popup v-model:show="showTypePicker" position="bottom">
      <van-picker :columns="typeOptions" @confirm="onTypeConfirm" @cancel="showTypePicker = false" />
    </van-popup>

    <!-- 频次选择器 -->
    <van-popup v-model:show="showFrequencyPicker" position="bottom">
      <van-picker :columns="frequencyOptions" @confirm="onFrequencyConfirm" @cancel="showFrequencyPicker = false" />
    </van-popup>

    <!-- 开始时间选择器 -->
    <van-popup v-model:show="showStartTimePicker" position="bottom">
      <van-date-picker v-model="startDate" title="选择开始时间" :min-date="minDate" :max-date="maxDate"
        @confirm="onStartTimeConfirm" @cancel="showStartTimePicker = false" />
    </van-popup>

    <!-- 结束时间选择器 -->
    <van-popup v-model:show="showEndTimePicker" position="bottom">
      <van-date-picker v-model="endDate" title="选择结束时间" :min-date="minDate" :max-date="maxDate"
        @confirm="onEndTimeConfirm" @cancel="showEndTimePicker = false" />
    </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="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';

const $route = useRoute();
const $router = useRouter();
useTitle($route.query.type === 'homework' ? '设置作业' : '安排打卡');

const type = ref('');

// 表单数据
const formData = ref({
  homework_name: '',
  type: $route.query.type === 'homework' ? '上传附件' : '签到',
  frequency: '',
  target_count: '',
  start_time: new Date(),
  end_time: new Date(),
  course: '',
  activity: '',
  grade: '',
  class_name: '',
  group_name: ''
});

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

// 弹窗显示状态
const showTypePicker = ref(false);
const showFrequencyPicker = ref(false);
const showStartTimePicker = ref(false);
const showEndTimePicker = ref(false);
const showCoursePicker = 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 minDate = new Date(2020, 0, 1);
const maxDate = new Date(2030, 11, 31);

// 选项数据
const typeOptions = ref([
  { text: '签到', value: 'checkin' },
  { text: '作业', value: 'homework' },
  { text: '考试', value: 'exam' },
  { text: '活动', value: 'activity' }
]);

const frequencyOptions = ref([
  { text: '一次', value: 'once' },
  { text: '每日', value: 'daily' },
  { text: '每周', value: 'weekly' },
  { text: '每月', value: 'monthly' }
]);

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

// 数据列表
const courses = ref([
  { id: 1, name: '数学课程' },
  { id: 2, name: '语文课程' },
  { id: 3, name: '英语课程' },
  { id: 4, name: '物理课程' }
]);

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

const grades = ref([
  { id: 1, name: '一年级' },
  { id: 2, name: '二年级' },
  { id: 3, name: '三年级' },
  { id: 4, name: '四年级' }
]);

const classes = ref([
  { id: 1, name: '一班' },
  { id: 2, name: '二班' },
  { id: 3, name: '三班' },
  { id: 4, name: '四班' }
]);

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 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');
  return `${year}-${month}-${day}`;
};

/**
 * 类型选择确认
 * @param {Object} option - 选中的选项
 */
const onTypeConfirm = (option) => {
  formData.value.type = option.selectedOptions[0].text;
  showTypePicker.value = false;
};

/**
 * 频次选择确认
 * @param {Object} option - 选中的选项
 */
const onFrequencyConfirm = (option) => {
  formData.value.frequency = option.selectedOptions[0].text;
  showFrequencyPicker.value = false;
};

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

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

/**
 * 课程选择
 * @param {Object} course - 选中的课程
 */
const onCourseSelect = (course) => {
  formData.value.course = course.name;
  showCoursePicker.value = false;
  courseSearchValue.value = '';
};

/**
 * 活动选择
 * @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;
  showGradePicker.value = false;
  gradeSearchValue.value = '';
};

/**
 * 班级选择
 * @param {Object} classItem - 选中的班级
 */
const onClassSelect = (classItem) => {
  formData.value.class_name = classItem.name;
  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 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.homework_name) {
      showToast('请输入作业名称');
      return;
    }

    // 这里可以调用API提交数据
    console.log('提交的表单数据:', formData.value);

    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000));

    showToast('保存成功');

    // 返回上一页或跳转到列表页
    $router.back();

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

/**
 * 组件挂载时初始化数据
 */
onMounted(() => {
  // 这里可以调用API获取课程、活动、年级、班级、小组等数据
  console.log('页面初始化');
});
</script>

<style scoped>
/* 自定义样式 */
:deep(.van-field__label) {
  color: #333;
  font-weight: 500;
}

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

:deep(.van-button--primary) {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
}

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

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