<!--
 * @Author: hookehuyr hookehuyr@gmail.com
 * @Date: 2025-01-20 10:00:00
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-06-18 11:43:03
 * @FilePath: /mlaj/src/views/teacher/formPage.vue
 * @Description: 教师作业新增表单页面
-->
<template>
    <AppLayout title="新增作业">
        <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"
                                    class="bg-green-500 hover:bg-green-600 transition-colors"
                                >
                                    确认并保存
                                </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.meta.title || '新增作业');

// 表单数据
const formData = ref({
    homework_name: '',
    type: '',
    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>