<!--
 * @Author: hookehuyr hookehuyr@gmail.com
 * @Date: 2025-06-19 17:12:19
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-06-19 21:32:23
 * @FilePath: /mlaj/src/views/teacher/studentPage.vue
 * @Description: 学生详情页面
-->
<template>
  <div class="bg-gradient-to-br from-green-50 via-green-100/30 to-blue-50/30 min-h-screen">
    <!-- 学生基本信息 -->
    <div class="bg-white p-4">
      <div class="flex items-start mb-4">
        <van-image round width="4rem" height="4rem"
          :src="studentInfo.avatar || 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'" fit="cover" class="mr-4" />
        <div class="flex-1">
          <div class="flex items-center mb-2">
            <h2 class="text-xl font-bold text-gray-800 mr-2">{{ studentInfo.name }}</h2>
            <van-icon v-if="studentInfo.gender === 'male'" name="friends-o" color="#3b82f6" size="16" />
            <van-icon v-else name="like-o" color="#ec4899" size="16" />
          </div>
          <div class="flex items-center mb-2">
            <van-icon name="chat-o" size="16" color="#10b981" class="mr-1" />
            <span class="text-sm text-gray-600 mr-4">{{ studentInfo.className }}</span>
            <van-icon name="phone-o" size="16" color="#10b981" class="mr-1" />
            <span class="text-sm text-gray-600">{{ formatPhone(studentInfo.phone) }}</span>
          </div>
          <!-- 标签 -->
          <div class="flex flex-wrap gap-2">
            <van-tag v-for="tag in studentInfo.tags" :key="tag" type="success" size="small">
              {{ tag }}
            </van-tag>
          </div>
        </div>
      </div>
    </div>

    <!-- 所学课程 -->
    <div class="bg-white mt-2 p-4">
      <div class="flex items-center mb-3">
        <van-icon name="bookmark-o" size="16" color="#10b981" class="mr-2" />
        <span class="text-sm font-medium text-gray-700">所学课程</span>
      </div>
      <div class="flex flex-wrap gap-2">
        <van-tag v-for="course in studentInfo.courses" :key="course" type="primary" size="small">
          {{ course }}
        </van-tag>
      </div>
    </div>

    <!-- 统计数据 -->
    <div class="mt-2">
      <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="studentStats.attendanceRate" :rate="studentStats.attendanceRate"
                :speed="100" :text="studentStats.attendanceRate + '%'" stroke-width="50" color="#10b981" 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="studentStats.homeworkRate" :rate="studentStats.homeworkRate"
                :speed="100" :text="studentStats.homeworkRate + '%'" stroke-width="50" 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="studentStats.testScore" :rate="studentStats.testScore" :speed="100"
                :text="studentStats.testScore + '%'" stroke-width="50" color="#f59e0b" size="64" />
            </div>
            <div class="text-sm text-gray-600">测验成绩</div>
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- 功能按钮 -->
    <div class="mt-2 p-4">
      <!-- 状态筛选 -->
      <div class="flex items-center justify-end mb-4">
        <div @click="showStatusPopup = true" class="flex items-center text-sm text-gray-600 cursor-pointer">
          <span>{{ statusFilter }}</span>
          <van-icon name="arrow-down" size="14" class="ml-1" />
        </div>
      </div>
      <!-- <div class="flex items-center justify-between mb-3">
        <div @click="activeTab = 'homework'"
          :class="['flex-1 text-center py-2 text-sm font-medium cursor-pointer', activeTab === 'homework' ? 'text-green-600 border-b-2 border-green-600' : 'text-gray-500']">
          作业记录
        </div>
        <div @click="activeTab = 'evaluation'"
          :class="['flex-1 text-center py-2 text-sm font-medium cursor-pointer', activeTab === 'evaluation' ? 'text-green-600 border-b-2 border-green-600' : 'text-gray-500']">
          班主任点评
        </div>
        <div @click="activeTab = 'statistics'"
          :class="['flex-1 text-center py-2 text-sm font-medium cursor-pointer', activeTab === 'statistics' ? 'text-green-600 border-b-2 border-green-600' : 'text-gray-500']">
          打卡统计
        </div>
      </div> -->
      <div class="px-4 py-3 bg-white" style="position: relative;">
        <van-tabs v-model:active="activeTab" color="#10b981" sticky animated swipeable @change="handleTabChange">
          <van-tab title="作业记录" name="homework"></van-tab>
          <van-tab title="班主任点评" name="evaluation"></van-tab>
          <van-tab title="打卡统计" name="statistics"></van-tab>
        </van-tabs>
      </div>

      <!-- 记录列表 -->
      <van-list v-show="activeTab === 'statistics'" v-model:loading="recordLoading" :finished="recordFinished"
        finished-text="没有更多了" @load="onRecordLoad">
        <div v-for="record in filteredRecords" :key="record.id"
          class="flex items-center justify-between py-4 border-b border-gray-100 last:border-b-0 bg-white px-4">
          <div class="flex items-center flex-1">
            <div class="mr-4">
              <div style="display: flex; justify-content: center;">
                <van-icon name="calendar-o" size="16" color="#6b7280" class="mb-1" /> &nbsp;
                <span class="text-xs text-gray-500">{{ record.date }}</span>
              </div>
              <div style="display: flex; ">
                <van-icon name="clock-o" size="16" color="#6b7280" class="mb-1" /> &nbsp;
                <span class="text-xs text-gray-500">{{ record.time }}</span>
              </div>
            </div>
          </div>
          <div class="flex items-center">
            <span v-if="record.status === '正常'" class="text-green-600 text-sm mr-2">{{ record.status }}</span>
            <span v-else-if="record.status === '迟到'" class="text-orange-500 text-sm mr-2">{{ record.status }}</span>
            <span v-else class="text-red-500 text-sm mr-2">{{ record.status }}</span>

            <van-icon v-if="record.status === '正常'" name="success" color="#10b981" size="16" />
            <van-icon v-else-if="record.status === '迟到'" name="warning-o" color="#f59e0b" size="16" />
            <van-icon v-else name="close" color="#ef4444" size="16" />
          </div>
        </div>
      </van-list>

      <!--作业记录 -->
      <van-list v-show="activeTab === 'homework' && checkinDataList.length" v-model:loading="loading"
        :finished="finished" finished-text="没有更多了" @load="onLoad" class="space-y-4">
        <div class="post-card" v-for="post in checkinDataList" :key="post.id">
          <div class="post-header">
            <van-row>
              <van-col span="4">
                <van-image round width="2.5rem" height="2.5rem"
                  :src="post.user.avatar || 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'" fit="cover" />
              </van-col>
              <van-col span="17">
                <div class="user-info">
                  <div class="username">{{ post.user.name }}</div>
                  <div class="post-time">{{ post.user.time }}</div>
                </div>
              </van-col>
              <van-col span="3">
              </van-col>
            </van-row>
          </div>
          <div class="post-content">
            <div class="post-text">{{ post.content }}</div>
            <div class="post-media">
              <div v-if="post.images.length" class="post-images">
                <van-image width="30%" fit="cover" v-for="(image, index) in post.images" :key="index" :src="image"
                  radius="5" @click="openImagePreview(index, post)" />
              </div>
              <van-image-preview v-if="currentPost" v-model:show="showImagePreview" :images="currentPost.images"
                :start-position="startPosition" :show-index="true" @change="onChange" />
              <div v-for="(v, idx) in post.videoList" :key="idx">
                <!-- 视频封面和播放按钮 -->
                <div v-if="v.video && !v.isPlaying" class="relative w-full rounded-lg overflow-hidden"
                  style="aspect-ratio: 16/9; margin-bottom: 1rem;">
                  <img :src="v.videoCover || 'https://cdn.ipadbiz.cn/mlaj/images/cover_video_2.png'" :alt="v.content"
                    class="w-full h-full object-cover" />
                  <div class="absolute inset-0 flex items-center justify-center cursor-pointer bg-black/20"
                    @click="startPlay(v)">
                    <div
                      class="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center hover:bg-black/70 transition-colors">
                      <van-icon name="play-circle-o" class="text-white" size="40" />
                    </div>
                  </div>
                </div>
                <!-- 视频播放器 -->
                <VideoPlayer v-if="v.video && v.isPlaying" :video-url="v.video"
                  class="post-video rounded-lg overflow-hidden" :ref="el => {
                    if (el) {
                      // 确保不重复添加
                      if (!videoPlayers?.includes(el)) {
                        videoPlayers?.push(el);
                      }
                    }
                  }" @onPlay="handleVideoPlay(player, post)" @onPause="handleVideoPause(post)" />
              </div>
              <AudioPlayer v-if="post.audio.length" :songs="post.audio" class="post-audio" :id="post.id" :ref="el => {
                if (el) {
                  // 确保不重复添加
                  if (!audioPlayers?.includes(el)) {
                    audioPlayers?.push(el);
                  }
                }
              }" @play="(player) => handleAudioPlay(player, post)" />
            </div>
          </div>
          <div class="post-footer">
            <van-icon @click="handLike(post)" name="good-job" class="like-icon" :color="post.is_liked ? 'red' : ''" />
            <span class="like-count">{{ post.likes }}</span>
          </div>
        </div>
      </van-list>
    </div>

    <!-- 状态筛选弹窗 -->
    <van-popup v-model:show="showStatusPopup" 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 statusOptions" :key="option.value" :title="option.text" clickable
            @click="onStatusSelect(option)" :border="false"
            :class="{ 'text-green-600': statusFilter === option.value }">
            <template #right-icon>
              <van-icon v-if="statusFilter === option.value" name="success" color="#10b981" />
            </template>
          </van-cell>
        </van-cell-group>
        <div class="mt-4">
          <van-button block @click="showStatusPopup = false">取消</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showConfirmDialog, showSuccessToast, showFailToast, showLoadingToast } from 'vant';
import VideoPlayer from "@/components/ui/VideoPlayer.vue";
import AudioPlayer from "@/components/ui/AudioPlayer.vue";
import { useTitle } from '@vueuse/core';
import dayjs from 'dayjs';

import { getTaskDetailAPI, getUploadTaskListAPI, delUploadTaskInfoAPI, likeUploadTaskInfoAPI, dislikeUploadTaskInfoAPI } from "@/api/checkin";


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

// 学生信息
const studentInfo = ref({
  id: 1,
  name: '李华',
  gender: 'female',
  className: '高一(3)班',
  phone: '13812345678',
  avatar: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg',
  tags: ['亲子学堂2025级'],
  courses: ['讲师训2025', '亲子学堂课程']
})

// 统计数据
const studentStats = ref({
  attendanceRate: 92,
  homeworkRate: 88,
  testScore: 85
})

// 当前选中的标签页
const activeTab = ref('homework')

// 状态筛选
const statusFilter = ref('按状态')
const showStatusPopup = ref(false)

// 状态选项
const statusOptions = ref([
  { text: '按状态', value: '按状态' },
  { text: '正常', value: '正常' },
  { text: '迟到', value: '迟到' },
  { text: '缺勤', value: '缺勤' }
])

// 记录列表
const records = ref([
  {
    id: 1,
    date: '2023-11-20',
    time: '07:45',
    status: '正常'
  },
  {
    id: 2,
    date: '2023-11-19',
    time: '07:50',
    status: '正常'
  },
  {
    id: 3,
    date: '2023-11-18',
    time: '07:42',
    status: '正常'
  },
  {
    id: 4,
    date: '2023-11-17',
    time: '08:10',
    status: '迟到'
  },
  {
    id: 5,
    date: '2023-11-16',
    time: '07:48',
    status: '正常'
  },
  {
    id: 6,
    date: '2023-11-15',
    time: '00:00',
    status: '缺勤'
  }
])

// 列表加载状态
const recordLoading = ref(false)
const recordFinished = ref(false)

/**
 * 过滤后的记录列表
 */
const filteredRecords = computed(() => {
  let filtered = records.value

  // 按状态筛选
  if (statusFilter.value !== '按状态') {
    filtered = filtered.filter(record => record.status === statusFilter.value)
  }

  return filtered
})

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

/**
 * 处理状态选择
 * @param {Object} option - 选中的状态选项
 */
const onStatusSelect = (option) => {
  statusFilter.value = option.value
  showStatusPopup.value = false
}

/**
 * 加载更多记录数据
 */
const onRecordLoad = () => {
  setTimeout(() => {
    recordLoading.value = false
    recordFinished.value = true
  }, 1000)
}

/**
 * 组件挂载时初始化数据
 */
const checkinDataList = ref([]);
onMounted(async () => {
  // 从路由参数获取学生ID
  const studentId = route.params.id
  console.log('学生详情页面已加载，学生ID:', studentId)

  // 这里可以根据studentId调用API获取学生详细信息
  loadStudentData(studentId)

  const current_date = route.query.date;
  if (current_date) {
    onLoad(current_date);
  } else {
    onLoad(dayjs().format('YYYY-MM-DD'));
  }
})

/**
 * 加载学生数据
 * @param {string} studentId - 学生ID
 */
const loadStudentData = (studentId) => {
  // 这里可以调用API获取实际数据
  console.log('加载学生数据:', studentId)
}

// 处理标签页切换
const handleTabChange = (name) => {
  // 先更新activeTab值
  activeTab.value = name;

  nextTick(() => {
    // 停止所有视频和音频播放
    if (videoPlayers.value) {
      videoPlayers.value.forEach(player => {
        console.warn(player);
        if (player && typeof player?.pause === 'function') {
          player?.pause();
        }
      });
    }

    stopAllAudio();
  })
};

// 存储所有视频播放器的引用
const videoPlayers = ref([]);

// 存储所有音频播放器的引用
const audioPlayers = ref([]);

// 组件卸载前清理播放器引用和事件监听器
onBeforeUnmount(() => {
  // 停止所有视频和音频播放
  if (videoPlayers.value) {
    videoPlayers.value.forEach(player => {
      if (player && typeof player?.pause === 'function') {
        player?.pause();
      }
    });
  }

  stopAllAudio();

  // 清空引用数组
  if (videoPlayers.value) videoPlayers.value = [];
  if (audioPlayers.value) audioPlayers.value = [];
});

/**
 * 开始播放指定帖子的视频
 * @param {Object} post - 要播放视频的帖子对象
 */
const startPlay = (post) => {
  // 确保checkinDataList.value是一个数组
  if (checkinDataList.value) {
    // 先暂停所有其他视频
    checkinDataList.value.forEach(p => {
      p.videoList.forEach(v => {
        if (v.id !== post.id) {
          v.isPlaying = false;
        }
      });
    });
  }

  // 设置当前视频为播放状态
  post.isPlaying = true;
};

/**
 * 处理视频播放事件
 * @param {Object} player - 视频播放器实例
 * @param {Object} post - 包含视频的帖子对象
 */
const handleVideoPlay = (player, post) => {
  stopAllAudio();
};

/**
 * 处理视频暂停事件
 * @param {Object} post - 包含视频的帖子对象
 */
const handleVideoPause = (post) => {
  // 视频暂停时不改变isPlaying状态，保持播放器可见
  // 这样用户可以继续从暂停处播放
};

/**
 * 停止除当前播放器外的所有其他视频
 * @param {Object} currentPlayer - 当前播放的视频播放器实例
 * @param {Object} currentPost - 当前播放的帖子对象
 */
const stopOtherVideos = (currentPlayer, currentPost) => {
  // 确保videoPlayers.value是一个数组
  if (videoPlayers.value) {
    // 暂停其他视频播放器
    videoPlayers.value.forEach(player => {
      if (player !== currentPlayer && player.pause) {
        player.pause();
      }
    });
  }

  // 更新其他帖子的播放状态
  checkinDataList.value.forEach(p => {
    p.videoList.forEach(v => {
      if (v.id !== currentPost.id) {
        v.isPlaying = false;
      }
    });
  });
};

/**
 * 处理音频播放事件
 * @param {Object} player - 音频播放器实例
 * @param {Object} post - 包含音频的帖子对象
 */
const handleAudioPlay = (player, post) => {
  // 停止其他音频播放
  stopOtherAudio(player, post);
};

const stopOtherAudio = (currentPlayer, currentPost) => {
  // 确保audioPlayers.value是一个数组
  if (audioPlayers.value) {
    // 暂停其他音频播放器
    audioPlayers.value.forEach(player => {
      if (player.id !== currentPost.id && player.pause) {
        player.pause();
      }
    });
  }
  // 更新其他帖子的播放状态
  checkinDataList.value.forEach(post => {
    if (post.id !== currentPost.id) {
      post.isPlaying = false;
    }
  });
  // 停止所有视频播放
  stopAllVideos();
}

const stopAllAudio = () => {
  // 确保audioPlayers.value是一个数组
  if (!audioPlayers.value) return;
  audioPlayers.value?.forEach(player => {
    // 使用组件暴露的pause方法
    if (typeof player.pause === 'function') {
      player.pause();
    }
  });
  // 更新所有帖子的播放状态
  checkinDataList.value.forEach(post => {
    if (post.audio.length) {
      post.isPlaying = false;
    }
  });
}

/**
 * 停止所有视频播放
 */
const stopAllVideos = () => {
  // 确保videoPlayers.value是一个数组
  if (!videoPlayers.value) return;

  // 更新所有帖子的播放状态
  checkinDataList.value.forEach(p => {
    p.videoList.forEach(v => {
      v.isPlaying = false;
    });
  });
};

// 图片预览相关
const showImagePreview = ref(false);
const startPosition = ref(0);
const currentPost = ref(null);

// 打开图片预览
const openImagePreview = (index, post) => {
  currentPost.value = post;
  startPosition.value = index;
  showImagePreview.value = true;
}

// 图片切换事件处理
const onChange = (index) => {
  startPosition.value = index;
}

const handLike = async (post) => {
  if (!post.is_liked) {
    const { code, data } = await likeUploadTaskInfoAPI({ checkin_id: post.id, })
    if (code) {
      showSuccessToast('点赞成功')
      post.likes++;
      post.is_liked = true;
    }
  } else {
    const { code, data } = await dislikeUploadTaskInfoAPI({ checkin_id: post.id, })
    if (code) {
      showSuccessToast('取消点赞成功')
      post.likes--;
      post.is_liked = false;
    }
  }
}

const loading = ref(false)
const finished = ref(false)
const limit = ref(3)
const page = ref(0)

const onLoad = async (date) => {
  const nextPage = page.value;
  const current_date = date || route.query.date || dayjs().format('YYYY-MM-DD');
  //
  const res = await getUploadTaskListAPI({
    limit: limit.value,
    page: nextPage,
    task_id: route.query.id,
    date: current_date
  });
  if (res.code) {
    // 整理数据结构
    checkinDataList.value = [...checkinDataList.value, ...formatData(res.data)];
    finished.value = res.data.checkin_list.length < limit.value;
    page.value = nextPage + 1;
  }
  loading.value = false;
};

const formatData = (data) => {
  let formattedData = [];
  formattedData = data?.checkin_list.map((item, index) => {
    let images = [];
    let audio = [];
    let videoList = [];
    if (item.file_type === 'image') {
      images = item.files.map(file => {
        return file.value;
      });
    } else if (item.file_type === 'video') {
      videoList = item.files.map(file => {
        return {
          id: file.meta_id,
          video: file.value,
          videoCover: file.cover,
          isPlaying: false,
        }
      })
    } else if (item.file_type === 'audio') {
      audio = item.files.map(file => {
        return {
          title: file.name ? file.name : '打卡音频',
          artist: file.artist ? file.artist : '',
          url: file.value,
          cover: file.cover ? file.cover : '',
        }
      })
    }
    return {
      id: item.id,
      task_id: item.task_id,
      user: {
        name: item.username,
        avatar: item.avatar,
        time: item.created_time_desc,
      },
      content: item.note,
      images,
      videoList,
      audio,
      isPlaying: false,
      likes: item.like_count,
      is_liked: item.is_like,
      is_my: item.is_my,
      file_type: item.file_type,
    }
  })
  return formattedData;
}
</script>

<style scoped lang="less">
/* 自定义样式 */
.van-circle {
  font-size: 12px;
  font-weight: bold;
}

.van-tag {
  margin-right: 0.5rem;
  margin-bottom: 0.25rem;
}

.van-list {
  min-height: 200px;
}

/* 标签页样式 */
.border-b-2 {
  border-bottom-width: 2px;
}

.post-card {
  // margin: 1rem 0;
  padding: 1rem;
  background-color: #FFF;
  border-radius: 5px;

  .post-header {
    margin-bottom: 1rem;
  }

  .user-info {
    margin-left: 0.5rem;

    .username {
      font-weight: 500;
    }

    .post-time {
      color: gray;
      font-size: 0.8rem;
    }
  }

  .post-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }

  .post-content {
    .post-text {
      color: #666;
      margin-bottom: 1rem;
    }

    .post-media {
      .post-images {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }

      .post-video {
        margin: 1rem 0;
        width: 100%;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .post-audio {
        margin: 1rem 0;
      }
    }
  }

  .post-footer {
    margin-top: 1rem;
    color: #666;

    .like-icon {
      margin-right: 0.25rem;
    }

    .like-count {
      font-size: 0.9rem;
    }
  }
}
</style>