<!--
 * @Author: hookehuyr hookehuyr@gmail.com
 * @Date: 2025-01-20 10:00:00
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-06-27 15:29:06
 * @FilePath: /mlaj/src/views/teacher/myClassPage.vue
 * @Description: 我的班级页面
-->
<template>
  <van-config-provider :theme-vars="themeVars">
    <div class="bg-gradient-to-br from-green-50 via-green-100/30 to-blue-50/30 min-h-screen">
      <!-- 用户信息卡片 -->
      <div>
        <div class="bg-white p-4">
          <div class="flex items-center mb-4">
            <van-image round width="4rem" height="4rem"
              :src="currentUser.avatar || 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'" fit="cover" class="mr-3" />
            <div class="flex-1">
              <h2 class="text-lg font-bold text-gray-800">{{ currentUser.name }}</h2>
              <div class="flex items-center mt-1">
                <van-icon name="clock-o" size="22" color="#10b981" class="mr-1" />&nbsp;
                <van-icon name="chat-o" size="22" color="#10b981" class="mr-1" />&nbsp;
                <van-icon name="comment-circle-o" size="22" color="#10b981" />&nbsp;
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 筛选器 -->
      <div>
        <van-sticky>
          <van-dropdown-menu active-color="#10b981" swipe-threshold="2">
            <van-dropdown-item v-model="selectGradeValue" :options="gradeOption" @change="handleGradeChange" />
            <van-dropdown-item v-model="selectClassValue" :options="classOption" @change="handleClassChange" />
            <van-dropdown-item v-model="selectCourseValue" :options="courseOption" @change="handleCourseChange" />
          </van-dropdown-menu>
        </van-sticky>
      </div>

      <div style="height: 0.5rem;"></div>

      <!-- 统计数据 -->
      <div>
        <van-row>
          <!-- 出勤率 -->
          <van-col span="8">
            <div class="bg-white p-4 text-center">
              <div class="relative w-16 h-16 mx-auto mb-2">
                <van-circle v-model:current-rate="attendanceRate" :rate="attendanceRate"
                  :text="attendanceRate + '%'" stroke-width="70" color="#10b981" size="64" layer-color="#eee" />
              </div>
              <div class="text-sm text-gray-600">出勤率</div>
            </div>
          </van-col>
          <!-- 任务完成 -->
          <van-col span="8">
            <div class="bg-white p-4 text-center">
              <div class="relative w-16 h-16 mx-auto mb-2">
                <van-circle v-model:current-rate="taskCompletionRate" :rate="taskCompletionRate" layer-color="#eee"
                  :text="taskCompletionRate + '%'" stroke-width="70" color="#3b82f6" size="64" />
              </div>
              <div class="text-sm text-gray-600">任务完成</div>
            </div>
          </van-col>
          <!-- 学习进度 -->
          <van-col span="8">
            <div class="bg-white p-4 text-center">
              <div class="relative w-16 h-16 mx-auto mb-2">
                <van-circle v-model:current-rate="learningProgress" :rate="learningProgress" layer-color="#eee"
                  :text="learningProgress + '%'" stroke-width="70" color="#f59e0b" size="64" />
              </div>
              <div class="text-sm text-gray-600">学习进度</div>
            </div>
          </van-col>
        </van-row>
      </div>

      <!-- 班级成员 -->
      <div class="">
        <div class="">
          <!-- 标题和搜索 -->
          <div class="p-4 border-b border-gray-100 bg-white">
            <div class="flex items-center justify-between mb-3">
              <h3 class="text-lg font-bold text-gray-800">班级成员 ({{ studentCount }})</h3>
              <!-- <div @click="showSortPopup = true" class="flex items-center text-sm text-gray-600 cursor-pointer">
                <span>{{ sortFilter }}</span>
                <van-icon name="arrow-down" size="14" class="ml-1" />
              </div> -->
            </div>
            <van-search v-model="searchKeyword" placeholder="请搜索" shape="round" @blur="handleSearch" @clear="handleClearSearch" @input="handleSearchInput" />
          </div>

          <!-- 学生列表 -->
          <div class="p-4">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
              <div v-for="student in studentList" :key="student.id"
                class="flex items-center justify-between py-3 border-gray-50 bg-white rounded-xl p-4 text-center shadow-sm mb-4"
                @click="handleStudentClick(student)">
                <div class="flex items-center flex-1">
                  <van-image round width="2.5rem" height="2.5rem"
                    :src="student.avatar || 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'" fit="cover" class="mr-3" />
                  <div class="flex-1">
                    <div class="flex items-center">
                      <span class="font-medium text-gray-800 mr-2">{{ student.name }}</span>
                      <!-- <font-awesome-icon v-if="student.gender === 'male'" icon="venus" color="#3b82f6" class="mr-2" style="font-size: 0.85rem;" />
                      <font-awesome-icon v-else icon="mars" color="#ec4899" class="mr-2" style="font-size: 0.85rem;" /> -->
                    </div>
                    <div class="text-sm text-gray-500" style="text-align: left;">
                      <span v-for="(item, index) in student.class_list" :key="index" class="mr-2">{{ item.class_name }}</span>
                    </div>
                  </div>
                </div>
                <div class="text-right">
                  <div class="flex items-center text-sm text-gray-500 mb-1">
                    <van-icon name="phone-o" size="12" class="mr-1" />
                    <span>{{ formatPhone(student.mobile) }}</span>
                  </div>
                  <div class="text-xs text-gray-400">{{ student.last_checkin_time_desc }}</div>
                </div>
                <van-icon name="arrow" color="#d1d5db" size="16" class="ml-2" />
              </div>
            </van-list>
          </div>
        </div>
      </div>

      <!-- 排序弹窗 -->
      <van-popup v-model:show="showSortPopup" position="bottom" round>
        <div class="p-4">
          <div class="text-center text-lg font-bold mb-4">选择排序方式</div>
          <van-cell-group>
            <van-cell
              v-for="option in sortOptions"
              :key="option.value"
              :title="option.text"
              clickable
              @click="onSortSelect(option)"
              :border="false"
              :class="{ 'text-green-600': sortFilter === option.value }"
            >
              <template #right-icon>
                <van-icon v-if="sortFilter === option.value" name="success" color="#10b981" />
              </template>
            </van-cell>
          </van-cell-group>
          <div class="mt-4">
            <van-button block @click="showSortPopup = false">取消</van-button>
          </div>
        </div>
      </van-popup>
    </div>
  </van-config-provider>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import AppLayout from '@/layouts/AppLayout.vue'
import { useTitle } from '@vueuse/core';
import { useAuth } from '@/contexts/auth'

import { getTeacherGradeClassListAPI, getStudentListAPI } from "@/api/teacher";

const router = useRouter()
const route = useRoute()
useTitle(route.meta.title);

const themeVars = ref({
  'dropdownMenuShadow': '#fff',
  searchInputHeight: '2.5rem',
})

// 获取用户认证状态
const { currentUser } = useAuth()

// 筛选器数据
const selectGradeValue = ref(null);
const selectClassValue = ref(null);
const selectCourseValue = ref(null);
const gradeOption = ref([]);
const classOption = ref([]);
const courseOption = ref([]);

const sortFilter = ref('按活跃度')
const searchKeyword = ref('')
const showSortPopup = ref(false)

// 筛选器选项
const sortOptions = ref([
  { text: '按活跃度', value: '按活跃度' },
])

// 统计数据
const attendanceRate = ref(85)
const taskCompletionRate = ref(76)
const learningProgress = ref(92)

// 学生列表
const studentList = ref([])

const studentCount = ref(0);

// 列表加载状态
const loading = ref(false)
const finished = ref(false)
const limit = ref(10)
const page = ref(0)

// 请求控制器，用于取消重复请求
let abortController = null;

/**
 * 格式化手机号
 * @param {string} phone - 手机号
 * @returns {string} 格式化后的手机号
 */
const formatPhone = (phone) => {
  if (!phone) return ''
  return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3')
}

/**
 * 重置分页参数并重新加载数据
 */
const resetAndReload = () => {
  page.value = 0;
  studentList.value = [];
  finished.value = false;
  loading.value = true;
  onLoad();
}

/**
 * 处理年级筛选变化
 * @param {string} val - 选中的年级
 */
const handleGradeChange = async (val) => {
  console.log('val', val);
  selectGradeValue.value = val;
  // 重置班级和课程选择
  selectCourseValue.value = null;

  // 根据年级ID 更新过滤列表
  await getFilterList(val);

  // 重置分页参数并重新加载数据
  resetAndReload();
}

/**
 * 处理班级筛选变化
 * @param {string} val - 选中的班级
 */
const handleClassChange = async (val) => {
  console.log('val', val);
  selectClassValue.value = val;
  // 重置课程选择
  selectCourseValue.value = null;

  // 根据年级ID和班级ID 更新过滤列表
  await getFilterList(selectGradeValue.value, val);

  // 重置分页参数并重新加载数据
  resetAndReload();
}

/**
 * 处理课程筛选变化
 * @param {string} val - 选中的课程
 */
const handleCourseChange = (val) => {
  console.log('val', val);
  selectCourseValue.value = val;

  // 重置分页参数并重新加载数据
  resetAndReload();
}

/**
 * 处理排序变化
 * @param {string} value - 选中的排序方式
 */
const handleSortChange = (value) => {
  console.log('排序变化:', value)
}

/**
 * 处理排序选择
 * @param {Object} option - 选中的排序选项
 */
const onSortSelect = (option) => {
  sortFilter.value = option.value
  showSortPopup.value = false
  handleSortChange(option.value)
}

// 搜索防抖定时器
let searchTimer = null;

/**
 * 处理搜索输入 - 只更新显示值，不触发搜索
 * @param {string} value - 搜索关键词
 */
const handleSearchInput = (value) => {
  // 只更新输入框显示，不触发搜索
  // searchKeyword 通过 v-model 自动更新
}

/**
 * 处理搜索 - 立即搜索，无需防抖
 * @param {string} value - 搜索关键词
 */
const handleSearch = () => {

  // 清除之前的定时器
  if (searchTimer) {
    clearTimeout(searchTimer);
  }

  // 立即执行搜索
  resetAndReload();
}

const handleClearSearch = () => {
  // 清除之前的定时器
  if (searchTimer) {
    clearTimeout(searchTimer);
  }

  searchKeyword.value = '';
  resetAndReload();
}

/**
 * 处理学生点击
 * @param {Object} student - 学生信息
 */
const handleStudentClick = (student) => {
  console.log('点击学生:', student)
  // 这里可以跳转到学生详情页
  router.push({
    path: '/teacher/student/' + student.id,
  })
}

/**
 * 加载更多数据
 */
const onLoad = async () => {
  // 取消之前的请求
  if (abortController) {
    abortController.abort();
  }

  // 创建新的请求控制器
  abortController = new AbortController();

  const nextPage = page.value;

  try {
    const res = await getStudentListAPI({
      limit: limit.value,
      page: nextPage,
      grade_id: selectGradeValue.value,
      class_id: selectClassValue.value,
      course_id: selectCourseValue.value,
      keyword: searchKeyword.value,
    });

    if (res.code) {
      // 整理数据结构
      studentList.value = [...studentList.value, ...res.data.user_list];
      finished.value = res.data.user_list.length < limit.value;
      page.value = nextPage + 1;
      studentCount.value = res.data.count;
    }
  } catch (error) {
    // 如果是取消请求的错误，不需要处理
    if (error.name !== 'AbortError') {
      console.error('加载学生列表失败:', error);
    }
  } finally {
    loading.value = false;
  }
}

const gradeList = ref([]);
const classList = ref([]);
const courseList = ref([]);

const getFilterList = async (grade_id=null, class_id=null) => {
  const { code, data } = await getTeacherGradeClassListAPI({ grade_id, class_id });
  if (code) {
    // 处理数据
    gradeOption.value = data.grade_list?.map(item => {
      return {
        text: item.grade_name,
        value: item.id,
      }
    });
    gradeOption.value.unshift({
      text: '全部年级',
      value: null,
    });
    classOption.value = data.class_list?.map(item => {
      return {
        text: item.class_name,
        value: item.id,
      }
    });
    classOption.value.unshift({
      text: '全部班级',
      value: null,
    });
    courseOption.value = data.group_list?.map(item => {
      return {
        text: item.title,
        value: item.id,
      }
    });
    courseOption.value.unshift({
      text: '全部课程',
      value: null,
    });
  }
}

/**
 * 组件挂载时初始化数据
 */
onMounted(async () => {
  // 获取老师的年级、班级、课程列表信息
  getFilterList();
})

/**
 * 组件卸载时清理资源
 */
onUnmounted(() => {
  // 清理搜索防抖定时器
  if (searchTimer) {
    clearTimeout(searchTimer);
    searchTimer = null;
  }

  // 取消进行中的请求
  if (abortController) {
    abortController.abort();
    abortController = null;
  }
})
</script>

<style lang="less">
/* 自定义样式 */
.van-dropdown-menu {
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* 下拉菜单选项文字单行显示 */
.van-dropdown-item {
  .van-cell__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    flex: 0 0 80%; /* title占80%宽度 */
  }
  
  .van-cell__value {
    flex: 0 0 20%; /* value占20%宽度 */
  }
}

/* 下拉菜单按钮文字单行显示 */
.van-dropdown-menu__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.van-circle {
  font-size: 12px;
  font-weight: bold;
}

.van-search {
  // background-color: #f9fafb;
  // border-radius: 0.5rem;
}

.van-list {
  min-height: 200px;
}
</style>